Remove thumbnail overlay, disable changing of big image, remove first thumbnail

Hi Ismael,

1. The code works fine. Thank you very much.

2. The code works, but yes, I still need the galleries to open the lightbox. Now they don’t anymore. How do I have to edit the gallery script directly?

3. The code works , but now, I have the following problem:

The first gallery on my page “Portfolio” contains only two images which I want to show next to each other and aligned center of the page. There, I chose “Gallery Style: Small Thumbnails” instead of “Big image with thumbnails below”. Now, because the fist thumbnail is removed, the first of the two images isn’t visible either.

I considered to replace the gallery by two image elements next to each other (Link Settings: Lightbox), but if I wanted them to align center of the page, they would be either too big or too small.

– images too big:
1/2 Layout Element with first image in it | 1/2 Layout Element with second image in it

– images too small:
1/4 Layout Element | 1/4 Layout Element with first image in it | 1/4 Layout Element with second image in it | 1/4 Layout Element

Now in the gallery, the two images are aligned center of the page and are just the right size.

– right image size:
1/5 Layout Element | 3/5 Layout Element with Gallery in it | 1/5 Layout Element

That’s the reason I would like to keep the gallery.

Is there a way to except the first gallery on my page “Portfolio” of the rule which removes the first thumbnail? Or do you find another solution?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

2.) I opened FileZilla and connected to my server.

I went to wordpress > wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > gallery and moved the gallery.js file to my desktop. (In wordpress > wp-content > themes > enfold child, I couldn’t find this file.)

There, I opened it with TextEdit (I also have Adobe Dreamweaver on my macbook but never used it so far), removed the block code you wrote about in your post, saved the file and moved it back to the gallery folder on the server (Action: Overwrite).

Then I went to the page “Portfolio” of my website, pressed shift and the reload button of Chrome, but unfortunately, the lightbox of the gallery still doesn’t work.

3.) Referring to your link, I turned on the custom css class field.

Now when I go to “Pages” > my page “Portfolio” > my first gallery > “Edit element” and scroll down, I see the “Custom CSS Class” field.

What do I have to add there to except this gallery of the rule which removes the first thumbnail?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

2.) That’s it. I removed the css code you suggested in your first post. Now, the lightbox of the gallery works.

3.) Now, it works fine. I replaced the code of your first post by the code of your last post in Quick CSS. Then I added “custom-gallery” without quotes to the custom css class field of each gallery where I wanted to hide the first thumbnail.

Although I chose “No Scaling (Original Width X Original Height)”, the big image of the gallery is not as sharp as the same image opened in a lightbox or added to a image media element . How can I fix this?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

I added the code to Quick CSS, but unfortunately, the big image of the gallery still is blurry.

Edit: There is a further problem. The big image should be left-aligned and right-aligned to the thumbnails below. When you remove the gallery padding, the big image is wider then the thumbnail row below. Moreover, the white space between the big image and the thumbnails is smaller then the white space between the thumbnails. When you remove the padding of the thumbnails too, the white space between the image and the thumbnails is missing.

Best regards,
zizibe1

• This reply was modified 6 years, 4 months ago by zizibe1. Reason: further problem

Hi Ismael

Thank you for your reply.

I added the code to Quick CSS.

a) Now the white space between the big image of the gallery and the thumbnails below is too thin.

b) When there are more than two thumbnails below the big image of the gallery, they don’t have the same size.

c) The big image of the gallery still is slightly blurry.

Best regards
zizibe1

Hi Ismael

Thank you for your reply.

a) I found the mistake. I had the following code in my Quick CSS:

/* no border around gallery thumbnails */
#top div .avia-gallery img {
    border-style: none;
    padding-top: 0px;
}

I removed “padding-top: 0px;”. Now the white space between the big image of the gallery and the thumbnails below is the right size.

b) I removed the code you’ve mentioned in your previous post. Now the thumbnails below the big image are all the same size.

But now the big image isn’t left-aligned and right-aligned to the thumbnails below anymore. Now the big image is wider then the thumbnail row below. It’s the same problem I’ve already described above in my post of July 13, 2018 at 12:08 pm, #985121.

c) Yes, I have a larger version of the image.

The original details of the image are:
File type: image/jpeg
Dimensions: 5000 × 3333 px
File size: 18.2 MB

Here are the details of the uploaded image which is blurry:
File type: image/jpeg
Dimensions: 1200 × 800 px
File size: 356 KB

What file size would you recommend to get a sharp but still fast-loading image?

I’ve read online that the file size should be smaller than 200 KB because of the visitors of the website who have a slow internet connection. Is that true?

Best regards
zizibe1

Hi Ismael,

Thank you for your reply.

b.) I removed the code to re-align the main image and the gallery thumbnails. It worked fine.

c.) I uploaded the largest version of the jpg:

File size: 9 MB
Dimensions: 5208 × 3648

Unfortunately, the big image of the gallery still is blurry. In the lightbox, the image is sharp no matter I uploaded the smaller or the larger version.

So I tried this workaround:

Instead of a gallery, I used a “1/1 Layout Element”, added an “Image Media Element” to it, inserted the jpg (1200 × 800 px, 356 KB). Now, the image is sharp. I also activated the lightbox ( Edit Element > Link Settings > Image Link > Lightbox).

Below, instead of the two thumbnails, I added two 1/2 layout elements, added an “Image Media Element” to each of it, inserted a jpg (1200 × 800 px) to each of it and activated the lightbox.

Now I would like to:

– align the first image to the two images below
– reduce the white space between the first image and the two images below
– reduce the white space between the second and the third image

How can I achieve this?

Best regards,
zizibe1

Hi Ismael,

Thank you very much for your support. Now, the white space between the images looks much better to me .

Because I wanted to reduce the white space a little bit more, I changed the parameters of your code like this:

First column:
width: 49.5%
margin-left: 0
margin-top: 1%

Second column:
width: 49.5%
margin-left: 1%
margin-top: 1%

Now, the white space between the images looks alright to me.

Back to the image sharpness. I think I might have figured something out. I went to the portfolio page of my website and measured the size of the big image by pressing “shift + cmd + 4” on my MacBook. Then I cropped the original image exactly to this size in Photoshop. If the big image is one or two pixels larger or smaller then the measured size, it looks slightly blurry, but if the big image is exactly the measured size, it looks sharp.

In my case, the ideal image sizes are:

Gallery:
Big image 1196 × 798 px

Image Media Element:
Big image 1210 × 806 px

But now, I have an issue concerning the lightbox of the “Image media Element”. The image in the lightbox is resized down a little bit which makes it look slightly blurry. How can I adjust the lightbox so the image isn’t resized down anymore?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

On my screen (2560 × 1440 px), the full size of the image is:

Original image: 1196 × 798 px
Gallery: 1196 × 798 px -> image sharp
Lightbox of Gallery: 1196 × 798 px -> image sharp

Original image: 1210 × 806 px
Image Media Element: 1210 × 806 px -> image sharp
Lightbox of Image Media Element: 1199 × 799 px -> image blurry

How can I adjust the lightbox of the “Image media Element” so the image isn’t resized down?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

I resized the image to exactly 1199 × 799 px and uploaded it.

Here are the results:

Original image: 1199 × 799 px
Image Media Element: 1210 × 806 px -> image blurry
Lightbox of Image Media Element: 1199 × 799 px -> image sharp

Now, it’s the other way round: The image displayed in the Image Media Element is slightly blurry while the same image displayed in the Lightbox of the Image Media Element is sharp. As you see, the Image Media Element displays the image bigger than the lightbox. This effects the sharpness of the image.

As a designer, the sharpness of the images is very important to me because I want to present them to my clients with the highest quality possible. So the Media Element and the Lightbox of the Image Media Element should display the image the same size.

How can I fix this?

Best regards,
zizibe1

Hi Ismael

Thank you for your reply.

I decreased the “Maximum Container width” value. The problem is that this effected not only the Image Media Element, but also the big image of the gallery.

Here are the results:

“Maximum Container width value”: 1299 px

Original horizontal image: 1199 × 799 px
Image Media Element: 1199 × 799 px -> image sharp
Lightbox of Image Media Element: 1199 × 799 px -> image sharp
Big image of gallery: 1185 × 791 px -> image blurry
Lightbox of Gallery: 1199 × 799 px -> image sharp

Original big vertical image: 705 × 1000 px
Big image of gallery: 676 × 959 px -> image blurry
Lightbox of Gallery: 705 × 1000 px -> image sharp

Therefore I removed the css code and went back to my original settings:

“Maximum Container width” value: 1310 px

Original horizontal image: 1196 × 798 px
Big image of gallery: 1196 × 798 px -> image sharp
Lightbox of Gallery: 1196 × 798 px -> image sharp

Original big vertical image: 682 × 962 px
Big image of gallery: 682 × 964 px -> image almost sharp
Lightbox of Gallery: 682 × 962 px -> image sharp

Now the galleries come pretty close to be okay.

As for the blurry Image Media Elements, I think I’ll replace them all by galleries and choose “Big image with thumbnails below” even if there are no thumbnails. Nobody will find out if there’s an Image Media Elements or a gallery. The main point is that all the images are sharp.

Or do see another solution?

Best regards,
zizibe1

Hi Ismael

Thank you for your reply.

Okay, if somebody of your team has another idea, I’m looking forward to hearing from you.

In the meantime, I’ll replace all Image Media Elements by galleries.

Best regards,
zizibe1

Hi Basilis,

Thank you for your reply.

No, unfortunately not.

When the image displayed in the “Image Media Element” and in the “Lightbox of Image Media Element” was sharp, the big image of the gallery was blurry, see my second last reply (#993727).

No matter which setting I chose up to now, always one or several of the horizontal or vertical images displayed in the following media elements were blurry:

– Image Media Element
– Lightbox of Image Media Element
– Gallery
– Lightbox of Gallery

No matter which setting I used, always one of these media elements varied in size. Already a slight difference of a few pixels made the image look blurry.

Best regards,
zizibe1

Hi Vinay,

Thank you for your reply.

I installed the plugin “Regenerate Thumbnails” and went to Tools > Regenerate Thumbnails for all 44 Attachments > checked: “Skip regenerating existing correctly sized thumbnails (faster)” > hard refresh in Chrome, but I can’t see any difference.

Should the images be sharper now?

Best regards,
zizibe1