Thanks Ismael.

Your solution is close to what I already had (and mentioned in my first post). I modified it slightly so it’s:

bottom: 230px;

(instead of 50px per your suggestion)

and I added:

@media only screen and (max-width: 767px) {
#top .av-masonry-outerimage-container .av-masonry-image-container {
    height: 50%;

This means both the thumbnail and title are exactly how I want them in terms of thumbnail image size and title is much closer to thumbnail, when viewing in mobile..

However, now the gap between elements is even bigger than before. Please see attached screenshot so you can see what I mean.

This is the problem I’ve had from the start – I was able to modify image height and move title so it’s directly under it’s thumbnail, and have different view settings for mobile vs desktop.

However, I can’t solve the problem where there’s such a big gap between each element, when viewing on mobile.

This is what I need help with.

BTW, when I say “each element”, I mean: thumbnail + it’s title = 1 element.

The page currently has 11 elements (ie articles).

Hope that makes sense, and hopefully you can help with this issue.

Thanks!

The setting at 70% “solves” the problem on desktop, but not on responsive (mobile view) – that’s what I’m trying to explain in my post above.

There is a big gap between thumbnail and title, when viewing on mobile.

I figured I could create a “mobile only” setting in CSS with “@media only screen and (max-width: 767px)” and set the height to 34%, as the thumbnail looks better (fits mobile screen better), however that still doesn’t fix the problem that there’s a gap between the thumbnail and title, so that’s what I need help with.

As I explained, I tried adding -250px margin-top to the title text, which kinda fixes the gap…however the other thumbnail/title elements don’t shift up with it – they stay fixed, so then the gaps are simply between each thumbnail/title.

I’m guessing I’m just missing something really obvious, so any help would be greatly appreciated!

Hi Mike

It exactly is the problem that the lightbox has an empty title field. Even though I add text in the image title field in the media library, that text won’t be displayed as a caption in the lightbox.

Just to be clear how the image with hotspots media element opens image-links in the lightbox. Within the settings of a specific hotspot I set under “Anvanced” the hotspot link to manually, add the link of the image that has to be opened in the lightbox and set the link to be opened in the same window (see screenshot in private content).

On the frontend the link of hotspot number 7 looks for example like this:
<a href="https://www.mydomain.com/wp-content/uploads/2021/10/seminarraum.jpg" class="av-image-hotspot_inner lightbox-added">7</a>
If the link is an image, Enfold adds automatically the class lightbox-added by default.
If the link is a webpage…
<a href="https:// www.mydomain.com " class="av-image-hotspot_inner">7</a>
…then there is no class lightbox-added.
So, the class lightbox-added triggers the lightbox.

The whole concept of the image with hotspots media element is different to the masonry gallery media element where you have thumbnail images with the title attribute – taken from the media library – that is obviously sent to the lightbox. The image with hotspots media element only shows hotspots made with CSS that have no title attribute of the image they are linking to. That’s why no title can be sent to the lightbox.

At least this is my interpretation of what’s going on and it seems to be complicated.

Is there still a way to have captions if I link from a hotspot to an image that opens in the lightbox?

Kind regards
Ueli

Thanks Mike, I don’t mind the linked image overlay but, I do find it strange that my Enfold theme options > Advanced Styling doesn’t look like your image. Mine does not have the Linked Image Overlay. Strange….

The code for removing titles on mouse-over worked. Thank you!

The four links at the bottom of page two don’t change color with mouse-over. I feel like I have that set to turn blue but, something is a miss. lol

Also still need help with the three images on page two. The desktop looks great but, the mobile version has micro thumbnails. lol
Would be great if we could get that to look like the desktop, please.

Thank you!
Jason

Making great progress!! Thank you for the grid element suggestion. That is working out well.

Just a couple more things to dial in, please.

In the desktop version, is it possible to have the titles NOT show up when hovering over an image?

Can I reduce the gap top & bottom on the row of three images?
(second page, portfolio item – Digital tech in Phoenix Arizona for professional still photography)

Lastly, the images on the mobile landing page are vertical and I think that looks awesome!
But when you click the bird to the next page… The row of three images look like micro thumbnails. LOL!!!
Can we get that page to look like desktop page?

Home/landing page is portfolio item: Phoenix digital tech
The second page with three images is portfolio item: Digital tech in Phoenix Arizona for professional still photography

Thanks again!

an update on this issue: it seems we have fixed it just by using the “Regenerate Thumbnails” tool on Woocommerce. Even the new product thumbnail images added to the site now seem to be created correctly. Maybe there was a process stuck and by using that tool it just unstuck. We’ll let you know if there will be new issues on this matter, but for now we hope our example could help someone else with the same issue

Hi Nikko

Thanks for the response. That does fix the issue with the images, so thank you for that.

The only problem is that it meant it created a fairly large gap between the thumbnail and the title, so I modified your suggested 54% to 70% instead, and that seems to have helped.

It means the images are “mostly” recognizable (they are still a little “zoomed in”), and the gap between the thumbnail and title isn’t so big that it’s noticeable, so that’s the best compromise for now.

Thanks once again :)

here are the details on the thumbnails, one of the broken sizes (450×450) seems to be created by Woocommerce:

Hi,

but in the “perfect masonry” even with thumbnails “no scaling“ the images are cropped if they differ in ratio.

Best regards,
Vera

Also for information: if we manually create and upload those image thumbnails via FTP and overwrite the broken ones (with filesize 0), then they are shown correctly in homepage / shop

Responsive Images disabled, we tried to upload the image for a product but it still does not create the different sizes thumbnails (for example the 450×450 one) so in the “shop” page and homepage the image is not shown (but they works in the actual product page).

Thanks for your reply Rikard! I have tried to de-activate the file compression ((file CSS + Japascript?) but the issue is still present: when I upload a new product image in the site, it does now show in some parts of the site because some thumbnail sizes are not created, Anything else I could try?

Looked deeper:

This is what i added:

This is what i get and this is definitely not what it supposed to be
One image added, got 4 different in my HTML that bloats my pageload

<a href="http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg" data-rel='gallery-1' data-prev-img='http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg' class='lightbox ' data-onclick='4' title='' itemprop="thumbnailUrl" ><img loading="lazy" class="wp-testimage-27902 avia-img-lazy-loading-27902" data-avia-tooltip='' src="https://127.0.0.1/wp-content/uploads/testimage-97-1-260x185.jpg" width="260" height="185" title='' alt='' /><div class='big-prev-fake'><img loading="lazy" class="wp-testimage-27902 avia-img-lazy-loading-27902" width="1583" height="800" src="https://127.0.0.1/wp-content/uploads/testimage-97-1.jpg" title='' alt='' srcset="http://127.0.0.1/wp-content/uploads/testimage-97-1.jpg 1583w, http://127.0.0.1/wp-content/uploads/testimage-97-1-1030x521.jpg 1030w, http://127.0.0.1/wp-content/uploads/testimage-97-1-80x40.jpg 80w, http://127.0.0.1/wp-content/uploads/testimage-97-1-768x388.jpg 768w, http://127.0.0.1/wp-content/uploads/testimage-97-1-1536x776.jpg 1536w, http://127.0.0.1/wp-content/uploads/testimage-97-1-1500x758.jpg 1500w, http://127.0.0.1/wp-content/uploads/testimage-97-1-705x356.jpg 705w" sizes="(max-width: 1583px) 100vw, 1583px" /></div></a>

1: When i add a masonry gallery with “portfolio smalll 260 x 185” i see a gallery with thumbnails.
Every thumb should be 260 x 185. Right?

2: When the thumbnail is linked via lightbox with the big image, the image should be loaded when a user clicks on it (because this is what a link does)
Not before, Right?

Weird:
– About 50% of all images do not show the original image like i defined in my functions.php
They are like image-1500×710.jpg” or 1500×550″ or “1500×786″ or 1500×758”

This is absolutely not understandable

This is the code i found in some other thread where the user wanted to see the images in the lightbox in original size and so i want too:

// Bilder in Galerie in Lightbox in Originalgröße anzeigen
function avia_change_gallery_thumbnail_link($link, $attachment, $atts, $meta){
    $link = wp_get_attachment_image_src($attachment->ID, "full");
    return $link;
}
add_filter('avf_avia_builder_gallery_image_link', 'avia_change_gallery_thumbnail_link', 10, 4);

function avia_change_masonry_thumbnail_link($size) {
  return "full";
}
add_filter('avf_avia_builder_masonry_lightbox_img_size', 'avia_change_masonry_thumbnail_link', 10, 1);

Thank you Mike,

Can I also add these lines to the code above:

remove_image_size(‘shop_thumbnail’);
remove_image_size(‘shop_catalog’);
remove_image_size(‘shop_single’);
remove_image_size(‘shop_gallery_thumbnail’);

Thanks,
Alwin