Thanks @Ismael, much appreciated.

Your solution has narrowed the gap between each element, which is fantastic, so thank you for that.

However, unfortunately it’s introduced a new problem – the thumbnail for the very first element no longer appears (you can only see the title). I’m guessing it gets cut-off somehow?

As a side note, I also note there seems to be a much bigger gap between the last element in the Masonry and the footer, which this change caused somehow.

I can’t believe how frustrating this is – it feels like 2 steps forward and 1 step back.

Any ideas?

Hi Guenni007, thanks again for all the help. The last message regarding the styling tab unfortunately doesn’t work for me. It’s something I tried initially and I was hoping that setting the “preview image size” would fix the issue, but it didn’t. I actually do not know what this option does to be honest. It either does something completely different that what I’m expecting it to do, or it doesn’t work and is buggy.

Anyway, I revisited the code you sent previously that should set the image to full size and I was able to get that to work. At first the code was not working but I removed the “if” statement and after I removed that code the feature images went to full size and resolution. I’m not sure if this will affect other parts of the website but so far it’s looking good. Here is the code I ended up using:

function custom_post_featured_image_link( $image_link, array $current_post, $size ){
    $image_link = get_the_post_thumbnail( $current_post['the_id'], 'full' );
  return $image_link;
}
add_filter( 'avf_post_featured_image_link', 'custom_post_featured_image_link', 10, 3 );

For now I think I am good to go. I really appreciate your help, thank you!

Hi Rikard,
I have tried restoring but I get critical errors. The host 123-reg say the problem is with the child theme I created for Enfold. Please can you look at my child theme functions,php code and see if it has errors. Apparently it is line 23. My child theme is called Orion I.T. Theme:
<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
//set builder mode to debug
add_action(‘avia_builder_mode’, “builder_set_debug”);
function builder_set_debug()
{
return “debug”;
}

/* Add Custom class to all ALB elements */
add_theme_support(‘avia_template_builder_custom_css’);

/*
Woocommerce 3.0.0 Compatibility Fix
Remove Enfold’s custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}
}

add_action( ‘woocommerce_single_product_summary’, function() {
echo ” – FREE SHIPPING IN THE UK!”;
}, 10);

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