FactorioBlueprints / factorio-prints

factorioprints.com
https://factorioprints.com/
179 stars 33 forks source link

Fix image hosting. #29

Open FactorioBlueprints opened 5 years ago

FactorioBlueprints commented 5 years ago

Images are primarily in Imgur, and it seems that factorioprints.com got banned by Imgur.

Backup images are in Google Cloud Storage in gs://facorio-blueprints.appspot.com.

Likely next steps:

alexmorleyfinch commented 5 years ago

I'd recommend having a SaveBlueprint.js saga that handles the adding and updating of blueprints. All of the write code for the images would be self-contained in this one file, making changes easier in the future. Then, in the EditBlueprint and Create components you could just call dispatch(saveBlueprint({...blueprint})). If blueprint contains an id, then it is updated, otherwise it is created.

I only mention because I notice that the add and edit code has been implemented separately in different component, making fixes slower. I'd give it a go myself but am not comfortable with firebase, nor am I familiar with Google Storage.

I'd also recommend having an <BlueprintImage / > component that accepts a blueprintId and just automatically handles the fetching/building of the image url, or even a BlueprintCarousel which can show multiple images. Sorry I can't be of more help

asasine commented 5 years ago

You can use Google Cloud Storage and Google App Engine to store your images and use their free resizing magic URLs to reduce bandwidth costs

https://medium.com/google-cloud/uploading-resizing-and-serving-images-with-google-cloud-platform-ca9631a2c556

FactorioBlueprints commented 5 years ago

@asasine That's a good idea, because the images are already in GCS

megamit commented 5 years ago

I thought i should post this somewhere but in despiration for blueprints i knocked this dirty tampermonkey userscript together that unblocks any imgur images on factorio blueprints. https://gist.github.com/megamit/6e3aa76e14b0d0fe333abb7aa827521f/raw/cb926ab0ab04e35e2108f2ff8c89d5518f21fe67/fpfix.user.js Feel free to delete this if its inappropriate

tzwaan commented 5 years ago

I'd like to add that there's many browsers that already have similar functionality built in.

I never even noticed the images not working, since I'm using brave browser.

trufanowpav commented 5 years ago

how to fix photo problem. как исправить проблему с фото

clbuttic commented 5 years ago

S3 + Cloudflare on a static content domain. Maximize cache options (Cache-Control: public, max-age=86400).

S3 has no competitors from egress data cost ($0.0007 per GB, $0.0004 per 1,000 requests). Cloudflare has an exceptional CDN.

Yeh, cloudfront, cloudinary, etc are free for the first x usage, but after that their costs increase rapidly. AWS does provide some free stuff for the first 12 months of your account.

boneskull commented 5 years ago

tampermonkey script works but needs the @match changed from https://factorioprints.com/blueprints to https://factorioprints.com

dima74 commented 5 years ago

May I ask, what is current total size of images?

trufanowpav commented 5 years ago

they do not have there is just a file crossed. 01.07.2019, 02:18, "Dmitry Murzin" notifications@github.com:May I ask, what is current total size of images?

—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread.

trufanowpav commented 5 years ago

Thanks05.07.2019, 07:03, "Grzegorz Krzemiński" notifications@github.com:Why dont you just change img to iframe ? Just for now.

—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread.

eScribMac commented 5 years ago

Why dont you just change img to iframe ? Just for now. image

@FactorioBlueprints if you are ok with this solution I can make a PR

chayleaf commented 5 years ago

wouldn't setting referrerpolicy="no-referrer" work?

boneskull commented 5 years ago

https://pixelfed.org/

boneskull commented 5 years ago

don’t know if that would work or not but worth investigating.

vcarl commented 5 years ago

Imgur is not a free CDN, working around the block is not a solution to the problem.

The fix to this is to replace the Imgur hosting code with logic that uploads to an S3 bucket or similar and to set up a CDN to cache those images, which costs money but not much.

A quick search for imgur across the codebase shows that it's pretty tightly coupled. Where is the code that generates the images? I can't seem to find it.

FactorioBlueprints commented 5 years ago

May I ask, what is current total size of images?

8.5 GB @dima74

FactorioBlueprints commented 5 years ago

wouldn't setting referrerpolicy="no-referrer" work?

@pavlukivan I've done that now. Force refresh and take a look. It's not working for me but maybe I messed something up.

FactorioBlueprints commented 5 years ago

Where is the code that generates the images? I can't seem to find it.

@vcarl I'm working on the rest rewrite on the master branch and temporarily deleted all write functionality. The code to upload to both google and imgur lives in the Create component on the stable branch.

https://github.com/FactorioBlueprints/factorio-prints/blob/stable/src/components/Create.js#L378-L386

JonathanGorr commented 5 years ago

Since the game is sprite atlas and grid based, why not just reconstruct the image with sprites with the .json data? All the sprites are uncompressed here

Steam\steamapps\common\Factorio\data\base\graphics

kutepovea commented 5 years ago

console: $('.card-img-top').each(function(){$(this).attr('src',$(this).attr('src'))});

chayleaf commented 5 years ago

It's not working for me but maybe I messed something up

Hm, doesn't work here either.

Maybe using the http header instead would work? https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

hannesvz commented 5 years ago

Hotlinking to imgur images works on their http addresses. I have no idea if they prefer you to use the https endpoints, but here is proof that it works on http. Open a page on Factorio Prints and run this in Chrome's console: document.querySelectorAll("img").forEach(i=>{ if(i.src.includes('imgur')) i.src = i.src.replace(/https/,'http'); })

edit: ok I guess Mixed Content errors is probably the reason for this. The above was a good quick hack for me when I just wanted to see the images. Hopefully a better permanent solution can be found soon :)

BBonifield commented 5 years ago

@FactorioBlueprints So, it seems like you need to green light an approach here. I can work decoupling everything from imgur and pushing assets to Cloudinary as well as writing a conversion script that bulk-processes the images, however there will be cost associated with the service provider that you'd need to accept. If you pick a desired approach, I think that can help move this along.

FactorioBlueprints commented 5 years ago

I just tried changing the links from https to http, not sure if it would really work. After a force-refresh, it does appear to work. This is a decent workaround for now and I'm glad it's live. Still imgur could ban my whole account or take down these images without warning at any point. I'd like to move to cloudinary still. Maybe it's not as much of a rush though.

koprivajakub commented 2 years ago

This does not work in MacOS Safari tho.

image

Chrome seems fine, but it is just a matter of time when Chrome will start "upgrading" the protocol by itself as well. The strange thing is that on homepage some images are loaded even over SSL.