search

chipsenkbeil / grid-side

Personal portfolio and blog for use by the Hugo generator.
MIT License
32 stars 21 forks source link

Support responsive images #33

Open ohbadiah opened 7 years ago

ohbadiah commented 7 years ago

Sorry, I'm not a front-end specialist, so this issue may reflect my ignorance. But what would it take in order to support the HTML5 picture tag, or something like it, so there's an easy way to load big images for big screens and smaller images for phones etc? I'd be glad to help implement, if I could.

chipsenkbeil commented 7 years ago

Currently, the main header and cell images are using the CSS background-size along with an inline background-image on divs to display content. The header and cells would need to be updated to support the picture tag in some manner that also supports the resizing of background-size.

For the image gallery, I don't know if the infinite-scroll library supports loading HTML5 picture tags. The library is abandoned, but it does exactly what this theme needed. If there is an alternative or some way to figure out how to load multiple images through the picture tag, we can try it.

Images used in lists like the project list page use a standard img tag, so they might be easier to adapt.