🎉 Add support for small filename in gdocs images

[ikesau]

Adds an optional smallFilename property to the {.image} component in archie.

This small image is assumed to be smaller than the regular image, and will show when the Image component's img tag has a width that is less than or equal to the width of the small image.

e.g.

{.image}
filename: large.png
smallFilename: small.png
{}

This will generate two <source> elements for the Image's <picture> to consider. The first one will only be active when the viewport width is less than 768px, the second source will always be active.

When previewing, it only uses the Digital Ocean CDN to load the original versions of the images (i.e. a srcset with only one URL specified.)

When baking, it makes multiple resizes of each image and includes all of those in the srcset.

images.mp4

Testing guidelines:

You can use the following archie to test it:

{.image}
filename: ike-test-life-expectancy-large.png
smallFilename: ike-test-life-expectancy-small.png
{}

{.image}
filename: ike-test-life-expectancy-large.png
{}

It should work as expected in the preview, with DPR 2.0 and DPR 1.0

And then if you publish it and run node itsJustJavascript/baker/buildLocalBake.js --steps gdocPosts gdriveImages and then yarn startLocalBakeServer

it should work with all the resized versions of those two images as expected http://127.0.0.1:3000/your-article-slug-here.html

[ikesau]

This requires some additional work to function correctly for higher device pixel ratios 🙂

Done

[sophiamersmann]

Looks good!

When clicking on the small image, the viewer opens the large version. Do you think that's easy to address? Having the viewer show the small version when appropriate would be neat.

[sophiamersmann]

If I understand correctly, this fixes the main concern I had when looking at the code yesterday. To make sure I understand: The media attribute makes sure that the small image will only ever show up on small screen sizes (<= 768px), regardless of its own size? (This is important because I'll probably render mobile Grapher charts at a resolution that is close to the ideal one)

[ikesau]

Yes that's correct 🙂

Which is why the mobile export can be 1536px wide for (DPR 2) but it will still only show on mobiles.