Fix image hosting.

[FactorioBlueprints]

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:

• Migrate images from Google Cloud Storage to Cloudinary or alternative
• Update reads to look at Cloudinary
• Update writes to write to Cloudinary (and probably still Google as a backup)

[alexmorleyfinch]

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]

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]

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

[megamit]

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]

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]

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

[clbuttic]

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]

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

[dima74]

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

[trufanowpav]

they do not have there is just a file crossed. 01.07.2019, 02:18, "Dmitry Murzin" <[email protected]>: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]

Thanks05.07.2019, 07:03, "Grzegorz Krzemiński" <[email protected]>: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]

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

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

[chayleaf]

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

[boneskull]

https://pixelfed.org/

[boneskull]

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

[vcarl]

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]

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

8.5 GB @dima74

[FactorioBlueprints]

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]

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]

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]

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

[chayleaf]

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]

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]

@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]

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]

This does not work in MacOS Safari tho.

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.