I found a solution how to get a result (nearly) the way we want it. How to cover an image with any original size and aspect ratio to the same big image preview size:
– big image with thumbnail below
– Gallery Big Preview Image Size: No Scaling
– Force same size for all big preview images? Yes

Set the height you need for your gallery in QuickCSS:

@media only screen and (min-width: 990px) {
#top div .avia-gallery .avia-gallery-big img {
height: 697px !important;
object-fit: cover;
}}
@media only screen and (max-width: 989px) {
#top div .avia-gallery .avia-gallery-big img {
height: 350px !important;
object-fit: cover;
}}

Hi Nikko,

great, this is what I needed :)
Only one little thing is not correct, you need to change in magazin.php

if($image) $output .="<a href='{$link}' {$titleAttr} class='av-magazine-thumbnail-link '>{$image}</a>";

to

if($image) $output .="<a href='{$link}' {$titleAttr} data-title='{$image_alt}' class='av-magazine-thumbnail-link '>{$image}</a>";

for the right output.

Thank you so mutch for your help, great service!
Best regards
Mike

• This reply was modified 6 years, 2 months ago by Mike61.

Hi Nikko,
I am so sorry, but I don’t want applied the attr to the image, I want applied the title of the image (post thumbnail)
as title to the postlink. So I can use…

Blog element:

.avia-content-slider a.slide-image:after {
    content: attr(title);
    font-size: 11px;
}

Magazin element:

.av-magazine a.av-magazine-thumbnail-link:after {
    content: attr(title);
    font-size: 11px;
}

This will show the content of the image title (set in mediathek) for the link tag title of the post.
I need this to show the image licensing below the image. (See link in private conent)

Thank you again and best regards
Mike

Hi Nikko,
thank you for your help! This will work but it is not what I mean – sorry, my fail.

I need the title of the thumbnail (mediathek) as attr of the postlink:
a.slide-image -> Blog element
a.av-magazine-thumbnail-link -> Magazin element

Hope you can help again.

Thank you and best regards
Mike

• This reply was modified 6 years, 2 months ago by Mike61.

ok thank you.
if I want to add thumbnails under the large image where do I do this, see example?
https://kriesi.at/themes/enfold-2017/portfolio/portfolio-4-columns-centered-ajax/#toggle-id-1-closed

• This reply was modified 6 years, 2 months ago by karel.

Thank you Ismael, it works flawlessly.

For those who want to know the solution, you just need to add the following code to the functions.php file:

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);

Thank you very much – it is fixed after all, apologies, for wasting your time…
I do have another query – is there a simple way of making the thumbnail in a widget area larger? The thumbnails on the links to the blogs using the latest news widget are really small and have a white border around them.

Thank you

Hey Victoria,

So you are saying that clicking on the gallery thumbnail will display the large thumbnail (1030px wide) instead of the full-size image? Why though? It doesn’t make sense. Go to any website and you will see that clicking on a thumbnail displays the full image. Say you are shopping online and you see the thumbnails of the product. Wouldn’t you want to see as many details as possible when clicking on an image?

How can I change this behavior? It is kind of annoying because this was working properly time ago. Some update changed this; I’m not sure which one.

Thank you,

Hey Mike, thanks for answering.

You are right, it’s not a horizontal gallery, but a regular gallery.

Anyway, the issue is still there. For some reason, some images load the large thumbnail (1030px wide). For example, these ones: https://i.imgur.com/WhQg5BC.jpg
Or if you change the language to Catalan, all of them will load the large thumbnail.

Why is that?

Dear Mike,

I realized one more thing here.
Your modification works on a gallery, if it is shown with ‘small thumbnails’
Like here on the top: https://www.chironkft.net/portfolio-item/munka6-2/

But if it is shown with one big image and the rest is shown via lightbox, then it is not working on the big image. See here:
https://www.chironkft.net/portfolio-item/proba/
There comes the fading effect again (plus the red circle).
Is it possible to change this to the zoom effect also?

Thanks

András

Hi,

I see what you mean, the point is the WP is generating the thumbnails at 80x80px, that is why I cannot understand why they do not look clear if I use 80x80px size.

Marc