Gallery element - editing thumbnail view

[Raddica]

I was planning to add a gallery page to my site, which has been simple so far.

However....

In the 'Gallery' page element that you add to your page, there is no option to edit the thumbnail preview. For example, if I wanted to use square or reactangle thumbnails, I cannot move the image within the square or rectangle shape to improve the thumbnail. I end up with heads being chopped off or a thumbnail with a weird crop.I know that I use a thumbnail showing the whole image, but I like page format with unform shaped thumbnails.

This could be so much better, but am I missing something? I tried all the options I could find with no joy. I would have thought this would be a given in any gallery page option? Maybe it is difficult to implement?

I notice someone else posted about this last year but the post was archived.

[WebfireThemes]

Hi Raddica

If all of the images you upload are different sizes, then the thumbnails (which are pulled from those images uploaded) will not be able to show the whole picture if you want each thumbnail to be uniform.

There are some options in the gallary view which will let you change aspect ratios etc, but i believe you're already experiencing the symptoms of using those as bits will get cropped.

As a Web designer and theme developer one of the things we are very regularly helping our customers with are images... The world of images on the web vs your photo album is very much a different matter... 

My advise would be normalise the images, so every image you upload into your gallary is actually the same size... you can use many applications including GIMP, Photoshop, online tools like https://pixlr.com/editor/ to change the canvas size of the image..

This is the approach I would normally take... Let's say for example you have 5 images with the following dimensions (as you can see, all very different)

1020 x 800

1000 x 843

800 x 600

2048 x 900

400 x 1000

You're going to face nothing but issues if you try to keep all of these images the same size.

The approach i would take is firstly. try to normalise things a bit by resizing the images (never upsize, always downsize) so the first thing is to make the biggest images a bit smaller to match the smallest images... so in the list below, with the exception of the last one (which has a height bigger than width so is the exception) the smallest image width is 800px... so i'd resize everything down to that width (the image tool will automatically adjust the height too so skewing doesn't occur)

1020 x 800 - resize to (800 x 627)

1000 x 843 - resize to (800 x 674)

800 x 600 - Leave this one as is

2048 x 900 - resize to (800 x 352)

400 x 1000 - Resize this bue based on the tallest height of the other images to (360 x 900)

So, now you've got 5 images with relatively similar sizes... what you can now do is increase the canvas size (ensuring transparency is added around the edges... The important thing here is to make sure when you increase the canvas size, you make sure you center the image (so the new transparent space on the edges of the images is equal on each size) ass all the widths are now the same, you just look for the heighst height and increase the canvas size of the smaller ones... so

800 x 627 would become 800 x 674

800 x 674 would stay the same

800 x 600 would become 800 x 674

800 x 352 would become 800 x 674

360 x 900 would become 800 x 674

So as you see now, all images are the same size, but you haven't cropped or stretched anything, just added transparent blank space on the edges (after normalizing the size)...

Now, when you upload, the thumbnails will be equally sized, even though the visible image will still be bigger/smaller than eachother, it will look uniform and consistant in the preview mode.

If you send me a dropbox link with a handful of images that you want for your gallery i'll make the changes to them to illustrate exactly how it would work...

[Raddica]

Thank you for your detailed and very helpful reply. I had not thought of doing them that way, but it makes sense.

Thank you again - much apppreciated.

[WebfireThemes]

My pleasure @Raddica

Images (in my experience) are the single most annoying thing on websites for most people building a site without the experience of a web designer.

Not only for the person building the website, but the person viewing it.

A bad image can put people off a website instantly, and in some cases the people building a website only have a certain quality of images available, meaning finding these little tricks can be a life saver

We've got a mini series of in depth articles on our blog about images and some other great tips that you should check out: 

http://www.webfirethemes.com/blog/how-to-make-the-most-of-free-weebly-images

http://www.webfirethemes.com/blog/how-to-make-the-most-of-free-weebly-images-part-2

http://www.webfirethemes.com/blog/how-to-make-the-most-out-of-free-images-for-weebly-part-3

http://www.webfirethemes.com/blog/free-images-for-your-weebly-website

[Bernadette3]

Thanks for the feedback @JohnJ I agree it would be nice to be able to control what part of the image is shown on the thumbnail. 

[PeterFontana]

It seems like it would be possible to just edit which part of the image is viewed in the thumbnail view. You can already do this when editing images anywhere else on the site, like in editing an image in the section, you can slide it around to see which part is focused on. It seems like it would therefore be simple to just add that functionality to the individual thumbnails in the gallery view.

Is that possible? Can we add that as a feature request?

[ahabs]

The above solution completely misses the point. The problem IS NOT that the images are being cropped, that is expected, it IS that we have no control over how square thumbnails are cropped. Your solution forces square thumbnails to appear as different shapes and sizes. Weebly thumbnails need the same functionality as Facebook profile pictures. The technology has existed for years, and people have been complaining for years. There is no excuse at this point.

[AgeOfOcteen]

I can't believe Weebly hasn't done anything about this!  This basically ruins half the image thumbnails on one of my pages.  I originally switched to using the gallery instead of the slideshow for my images becasue Weebly puts the caption ON TOP of images, instead of above or below them.  WTF?!!  All I did was trade one major flaw for another.  I'm an artist and having images that represent my work is the whole point in having a website.  Now all of them either have a huge caption that covers up as much as a third of the image in Slideshow or having Weebly arbitrarily crop my images for me.  For Weebly to expect the user to format of all images before uploading in order to avoid this is rediculous.  It's 2018!  Get your act together Weebly!

[JohnJ1]

I fully concur that Weebly could use a function to "center" a thumbnail view selected from of a larger image. The Facebook profile photo is a good example of this, and Squarespace has this function for gallery images.

At present, the best alternative is to go into the gallery options, select "Advanced", set the image ratio to "none" and the image spacing to "0". This will dispay the entire image as a thumbnail.

It leaves too much whitespace between the thumbnails for my taste, but it's not bad for a "website-builder" application.

[Jerryp]

I concur as well! I’ve been fighting this issue for months now and there’s no way I’m going back to reformat 462 images I ported from another platform. If I can’t edit and or adjust my thumbnails, I think I’ll just go back to my original platform with BigCommerce. It was professional and very easy to edit. I only switched to Weebly because it came with my Square Account. 

Jerry 

[Bernadette3]

That does sound frustrating and I can see what you mean about your images on your site. I don't have any updates at this time, but definitely suggest trying to resize the images to match the example RGA 2171. 

[lynfabian]

I too am an artist and wish I hadn't paid 2 yrs in advance. 

I am not a stranger to desktop publishing programs but have never done a website. 

I have started a gallery up with a few paintings. I want to know how to do a thumbnail which expands when clicked, with all the information.  I'm going insane!! Everything I read says it is done automatically and shows picks with little adjustment stuff in corners. Mine are plain pics.

[Adam7]

Thanks for posting, @lynfabian. A lightbox is the default behavior for images in a gallery when you click on them, so long as you haven't added a link for that image (otherwise it will just navigate you to whatever link you entered). 

https://www.weebly.com/app/help/us/en/topics/galleries-and-slideshows

Other than uploading images to the Gallery element, you don't need to do anything else to make it behave the way you want on the published site.

[cant_get_a_date]

I would also like to be able to edit the thumbnails in the gallery! This is a much-needed feature. I want the pictures to display in their full size and shape when they are clicked on, but the centered gallery thumbnails often look goofy. Please work on this Weebly!

[teller]

Weebly is a piece of amateur **bleep** and shouldn't get any penny for what they offer.

[DaniN]

This annoys me enough to comment on an thread from 2017. It is now 2022 and you still cannot edit the thumbnails in the gallery. It's not an issue with the aspect ratio. I want them to be squares. All I want to do is drag the image over slightly so it is cropped better. I'm an artist so this is kind of a dealbreaker for me. Once my year is up, I'm switching services.