Hi all, im trying to find a solution without having to play around with the pictures i have too much.
I have added a gallery, but because all of the images are different sizes the thumbnails in the gallery end up being all different sizes. I cannot find an option to add an image to the gallery, have all the thumbnails the same size and open in lighbox to show the original size.
given the complexity of a lot of the other brics and blocs itself, im surprised that there isn’t an automatic solution for this. ive seen answers that right me to create an extra picture in thumbnail size, but when you relatively big gallery’s this is quite laborious.
i was trying to avoid that if possible, as it means me having to edit each picture prior to uploading it and then linking it to the original.
i would have thought the system would have been intuitive enough to be able to do it automatically. but if not then im looking for an alternative solution. the ‘Same Height’ Bric doesnt seem to work sadly.
The reason that blocs cannot create same size thumbnails from assorted size images is simply because it doesn’t have a crystal ball and therefore won’t know how you want your reduced size thumbnails displayed. For example, you may have small square thumbnails which are going to contain landscape or portrait images. Clearly, such images will have to be cropped to fit a square thumbnail container. The problem is, every image is different and you may want each one cropped differently in order to display a certain portion of the image. Blocs does not make that decision for you - only you can decide that.
It should also be remembered that mixing images of different sizes and aspect ratios can be extremely annoying for users - especially if they are linked to a Lightbox. There is nothing more uncomfortable to look at than a Lightbox gallery that is jumping in size and/or aspect ratio as you advance through the gallery. Its far better to resize your images to a common size. This is far easier to achieve in an image editing app than it is to do it within the web page.
If you have an app such as Pixelmator or Affinity Photo, or maybe one of the open source image apps, just create a canvas the dimensions you would like your Lightbox images to be. Next, drag your images to the canvas and resize them to fit. Each image will normally be on a separate layer, so once your images have been resized, export each layer as a new image for use in your project. If you then want to create thumbnails of a different aspect ratio (square for example), just resize your canvas and then resize/position each image layer to display the portion of the image you would like in your thumbnail. Now export your new images with a different file name so that you know they are the thumbs.
If you have images of different aspect ratios, go through the same exercise but positioning say portrait images to be the same height and centred in the canvas, whilst leaving landscape images to fill the canvas. When exported, the portrait images will have a background colour on each side (use the same background colour you intend using on your page or export the images as PNG’s with a transparent background.) What this does is create a consistently sized Lightbox with the previous and next arrows in the same position on every image. This is far more comfortable from a users perspective. The illustration below show how landscape and portrait images should be created on a common canvas size.
Note: the checkerboard background is to show where the transparent area of the image will be. The important thing is that your Lightbox will remain the same size for all images, making for a better user experience. The thumbnails in my example are square images, but they can be any aspect ratio you like as long as they are all the same.
thank you, that was what i thought i may have to do, was just trying to avoid it to be fair. thank you so very much for your detailed answer and the time you have taken to reply.
As @hendon52 says, a set format always looks better, however there are occasions when you just can’t do this.
If you have a look at my hobby site: https://trevreav.co.uk/gallery/
And scroll down a bit you can see lots of different sizes.
I used @Jannis excellent Volt CMS for this, and used (I think it’s called) the masonry grid, which I think is quite an elegant way of showing differently proportioned pictures.
Of course @hendon52‘s comments still apply when you look at them in light box mode, but as far as I’m concerned, I can put up with that if the grid view looks good. And it resizes nicely to different viewpoints.
The bonus is that I don’t open up the Blocs file and upload the site every time, it’s all done via the browser.
I think Blocs also has the option of a masonry gallery built in, but not sure and not in front of my Mac at the moment.
