search

rupl / chrisruppel.com

My personal website
https://chrisruppel.com
Other
4 stars 1 forks source link

Use <picture> for gallery images #4

Closed rupl closed 8 years ago

rupl commented 8 years ago

Not quite sure how yet, and I might have to go back and crop many photos since I was relying on background-size: [contain|cover] to display a lot of them. But I think if I add an explicit type to each gallery I can predict the sizes attr based on the other bits of yaml.

rupl commented 8 years ago

:tada: Finally!! fixed by 5579a3eb — definitely a blog post worth of stuff in there but it takes the Gallery YML and properly specifies srcset and sizes from the limited grid data contained in the gallery.

Also I got rid of the background-image mechanism entirely. That was a lazy stop-gap. The page now serves actual <img> without hiding them, meaning the lookahead parser actually helps my page, and no JS is needed to display images if the browser supports <picture>

I did not end up re-cropping any images, instead I have a brand new lazy stop-gap which is the object-fit CSS prop. I'll bolt on the light polyfill sometime.