search

Psycojoker / prosopopee

a static website generator to make beautiful customizable pictures galleries that tell a story
http://prosopopee.readthedocs.org
GNU General Public License v3.0
333 stars 57 forks source link

Generate several different images size for mobile support #33

Open Psycojoker opened 8 years ago

Psycojoker commented 8 years ago

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

And for support for old browsers https://scottjehl.github.io/picturefill/

QSchulz commented 5 years ago

I saw that most of the places we could make use of this feature, we already do. However, it's not used where it could have the most impact: for pictures-group. The issue I guess is with the lazy-loading with jquery_lazyload which cannot make any use of the srcset/sources and sizes that are described in picture or img (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) tags. I think we may have a way out with the new lazyload that is a complete revamp (and isn't using jQuery anymore): https://github.com/tuupola/lazyload/tree/2.0.0-rc.2 Unfortunately it is only in rc/beta mode for now but the last commit was pushed less than a month ago so it's a pretty good indicator. What I'm hopeful for is that we can make use of the data-srcset (https://github.com/tuupola/lazyload/tree/2.0.0-rc.2#responsive-images) with sizes properties in the img tag. That would solve the issue we're having with the current version of lazyload.

Now the next issue I see is more: how do we configure the sizes property? How do we know the actual values to be put in there to benefit from the data-srcset? We'd need to know the expected size of the pictures on the line, but that is handled by the browser, thanks to the flex container. Am I missing something? Is there some property I don't know about or maybe a math function for this?