sigal icon indicating copy to clipboard operation
sigal copied to clipboard

Multiple Image sizes for Responsive Sites

Open legenderrys opened this issue 10 years ago • 3 comments

Would be a great feature to format multiple image sizes for responsive sites.

example would take a list of thumbnail sizes thumb_sizes = [ ('100',100'),//small ('400',320'),//medium ('820',400'),//large ] and outputs each size into a corresponding directory. Im too new with python to accomplish this, would need some help making it happen

legenderrys avatar Mar 23 '14 22:03 legenderrys

Yeah, it would be nice to have a more flexible way to handle this. Its easy to generate multiple size, the question is how to reference the different sizes in the themes:

  • directly with the size: album/400x320/image.jpg
  • with a dict with names for each size: album/medium/image.jpg

Currently we have three sizes: thumbnail, resized, original. Changing the way to handle this without breakiing the compatibility can be an issue.

saimn avatar Mar 24 '14 23:03 saimn

@saimn I made a small gist that processes images from a directory. Im very very new to python language and unsure how to fit this within sigal as a setting.

https://gist.github.com/hyperking/9767919

legenderrys avatar Mar 25 '14 18:03 legenderrys

I did a proof-of concept hack for this. If the dimensions of the original image were available in the template, it's easy to make PhotoSwipe dynamically choose between two sizes based on screen size at least. One of the problems is choosing when to go from the resized image to the original. The PhotoSwipe example switches when the screen width is above 1000 pixels, which might not make sense for all image / original sizes.

What might work more universally is something like the PhotoSwipe functionality, only when you hit the zoom button it switches to the original image. Just a random idea, and maybe more of a supplement to the responsive size concept than a replacement.

xim avatar Jul 30 '16 21:07 xim