Album Thumbnails different

Hi @photocoen

There’s some theme CSS code that is causing this behavior. You can add the following code to the theme’s style.css file or custom CSS/additional CSS area which will prevent that behaviour on this page:

.page-id-48354 .elementor img {
    height: 200px !important;
}

Kindly try this and let us know how it goes.

Kind regards,
Elvis.

Heya Elvis,

The logo image is showed up very big. So I changed your code into

.page-id-48354 .elementor img.skip-lazy {
   height: 200px !important;

This kind of worked. However, the thumbs are now stretched to a 200 height. So the outside dimensions are now all 200×200. And while the first row of three thumbs are okay, the rest show distorted.

Coen

• This reply was modified 3 years, 2 months ago by photocoen.
• This reply was modified 3 years, 2 months ago by photocoen.

Hi @photocoen

I’ve had a look at the album thumbnails and they have been set to 200px*200px, just as you have them configured.

Here’s an image of the album thumbnails from my end, which shows that they all have similar dimensions: https://prnt.sc/1s55gnd

Kind regards,
Elvis.

Heya Elvis,

Thanks for checking it out.

First off, your link doesn’t show me any screenshot, as I would assume it is a screenshot you are trying to show me.

Secondly. Yes, all the thumbs are now showing in 200 x 200 px.

But….

Only the first row shows the thumbnails undistorted as the ratio of the thumbnail is correct, but all the other thumbs are squished.

For example look at the Thumbnail of the Bhutan gallery, and then have a look at the same (correct) thumbnail on the actual gallery here:

https://landcruisingadventure.com/vanhetpadaf-fotos/gallery/bhutan-test/

So….

Why are all the images squished inside a 200 x 200 px frame?

Adventurous greetings, Coen.

Hi @photocoen

I’m sorry that you were not able to view the screenshot I shared earlier.

I have just taken another one and as you will observe, the images do not appear distorted in any way or squished from my end: https://prnt.sc/1t38chm

Could you please try to clear your browser’s cache and refresh the page again to confirm this or open the page in another different device? Thanks for trying this.

Kind regards,
Elvis.

Hi Elvis,

Thank you for your new screenshot. And yes on your screenshot, clearly the images ARE distorted.

Please have a look at my screenshot of the Thumbnail of the Bhutan gallery, next to the (correct) thumbnail on the actual gallery here: https://prnt.sc/1t3cy01

Now can we agree on it being distorted before moving on to the solutions?

Adventurous greetings, Coen.

Hi @photocoen

Just to confirm what you are referring to, could you kindly clarify if you are referring to the white section/design that are around the outer part/edge of the album thumbnails as shown in this screenshot https://prnt.sc/1ta3jt4? Thanks for the clarification.

Hoping to hear from you soon regarding this.

Kind regards,
Elvis.

Dear Elvis,

No.

I am not talking about the white borders.

I am talking about the image thumbnail inside those borders. That image for the first 3 on the top row are perfect. Now in all the others (so not on the top row) the thumbnail itself is squished.

Please have a look again at my screenshot here: https://prnt.sc/1t3cy01

And pay a bit more attention to the man that is portraid here. On the right side is how it should look like (this is the gallery view) and on the left is the same man, but now he lost a lot of weight! (this is in the album view).

Now, can we agree on the thumbnails begin distorted in album view (apart from the top row)?

Adventurous greetings, Coen.

Not sure the latest plugin update has something so help:

Fix : Added custom CSS for 3 gallery templates, to avoid incorrect thumb widths with certain themes and SVG thumbnails.

The update didn’t solve this issue.

Please advice me.

hi @photocoen

I had a look at your album. The first 3 items are showing correctly with the correct thumb. All the others are not. They are loading the fullsize image and are trying to squash it to the 200×200 dimensions. Looking at the HTML output on the page, the img tags have been replaced with picture tags.

I think this is being caused by another plugin trying to replace img tags with pictures that point to webP versions of the images. Do you have a plugin that does this? If so, please can you disable that plugin temporarily to see if that was the cause of the problem.

Heya Brad,

Thank you for poking around. I indeed have the Shortpixel plugin that compresses my images and has an option to build WebP images and also another option to automatically replace the IMG tags to PICTURE tags.

I now disabled both options.

I’m not sure how to check if that has effect or not, as I see no change in my album layout.

Also, why are those first three images on the top row perfectly as it should and the rest isn’t?