Height and width tags added to gallery images


#1

I’m using a javascript based gallery (photoswipe) and have it working nicely after creating a custom shim. Only thing is that this gallery really needs the height and width specified to work nicely. Surreal knows the image dimensions, so surely it wouldn’t be too hard to add them into the img tags in a gallery?


#2

Surreal leaves image dimensions up to your stylesheet (except for images inside editable regions, for resizing purposes).

Most galleries can detect the width/height (or naturalWidth/naturalHeight) programmatically, so maybe there’s an option to enable that in PhotoSwipe? I haven’t used that library, so I’m not sure off the top of my head.


#3

The stylesheet image dimensions are a render-time directive, not an actual image size - using stylesheets to resize means that images either all need to be the same aspect ratio, or some images will be stretched.

Yes, it is easy enough to determine the dimensions programmatically, but if the images are lazy-loaded, so can’t work out the dimensions if the image hasn’t been retrieved yet!

If Surreal added actual height and width attributes to the img tag for gallery images (even its a custom attribute (eg, image-width and image-height) so as not to interfere with anything else, then a js shim can manipulate the DOM for a cleaner and more responsive UX with lazy or slow loading images.