Hi,
Glad that this helped, as I pointed out above the zoom-gallary thumbnail container has replaced the standard woo thumbnail container, so while we could try stabbing at it, I would recommend asking the plugin author for their recommended solution as they probably had to correct this for other customers.
I would point out that your images are not square, so while that may look good when it’s the featured image as the thumbnail it’s not square. Also note that the “thumbnail” is actually the full-size image, just shown smaller, so there is not a “cropped” thumbnail.

Best regards,
Mike

Hi,
If you have the theme option Product gallery set to WooCommerce 3.0 product gallery right now then your plugin Motif Product Image Zoom has replaced the Product gallery because the source code doesn’t match the our theme.
You can try disabling the lightbox for the theme at Enfold Theme Options ▸ Lightbox Modal Window
or try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_noLightbox_script() { ?>
    <script>
(function($){
  $("#thumbnail-slider a.thumb").addClass("noLightbox").removeClass("lightbox-added");
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_noLightbox_script');

Best regards,
Mike

Hi,
Thank you for your patience, I found another way to add the images without a plugin, I replaced the previous shortcodes with these:
[porsche-logo]
[kadewe-logo]
[fcbayern-referenzen-logo]
[fraunhofer-referenzen-logo]
then I added this function to your child theme functions.php

function pure_javascript_image_shortcode() { ?>
    <script>
var elements = new Array();
var elements = document.getElementsByClassName('av-masonry-entry-content');
for (var e = 0; e < elements.length; e++) {
    var newHTML = elements[e].innerHTML;
    newHTML = newHTML.replace('[porsche-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/porsche-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    newHTML = newHTML.replace('[kadewe-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/kadewe-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    newHTML = newHTML.replace('[fcbayern-referenzen-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/fcbayern-referenzen-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    newHTML = newHTML.replace('[fraunhofer-referenzen-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/fraunhofer-referenzen-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    elements[e].innerHTML = newHTML;
};
</script>
    <?php
}
add_action('wp_footer', 'pure_javascript_image_shortcode');

now the images show without messing up the other elements, please check.

Best regards,
Mike

Hi,

Thank you for the update.

It seems to work better if we use a separate JSON-LD markup for the video element. In the video.php file, look for this block of code around line 704..

	$output = '';
				$output .= $style_tag;
				$output .= "
<div {$meta['custom_el_id']} class='{$container_class}' {$markup_video} data-original_url='{$src}'>";
				$output .=		$output_html;
				$output .= '</div>';

.., then replace it with this one.

				$json = '    <script type="application/ld+json">
				{
				  "@context": "https://schema.org",
				  "@type": "VideoObject",
				  "name": "Another video object.",
				  "thumbnailUrl": [
					"https://example.com/photos/1x1/photo.jpg",
					"https://example.com/photos/4x3/photo.jpg",
					"https://example.com/photos/16x9/photo.jpg"
				   ],
				  "uploadDate": "2016-03-31T08:00:00+08:00",
				  "duration": "PT1M54S",
				  "contentUrl": "https://www.example.com/video/123/file.mp4",
				  "embedUrl": "https://www.example.com/embed/123",
				  "interactionStatistic": {
					"@type": "InteractionCounter",
					"interactionType": { "@type": "WatchAction" },
					"userInteractionCount": 5647018
				  },
				  "regionsAllowed": "US,NL"
				}
				</script>';

				$output = '';
				$output .= $style_tag;
				$output .= "
<div {$meta['custom_el_id']} class='{$container_class}' {$markup_video} data-original_url='{$src}'>";
				$output .= $json;
				$output .=		$output_html;
				$output .= '</div>';

The validator should be able to recognize the video element as a separate object as shown in the screenshot below.

// https://1drv.ms/u/s!AjjTfXSRbKTvwGG1fhkWkkzFci3X?e=x3G9bb

This is based on the following documentation.

// https://developers.google.com/search/docs/advanced/structured-data/video

Best regards,
Ismael

Hi navindesigns!

Thank you for the inquiry.

Is this a duplicate of this thread?

// https://kriesi.at/support/topic/move-gallery-caption-below-thumbnails/#post-1348740

For the horizontal gallery, you have to edit the config-templatebuilder/avia-shortcodes/gallery_horizontal/gallery_horizontal.php and place this code after line 615.

$output .=      "<span class='avia-gallery-caption'>{$caption}</span>";

After this code.

{
						$lightbox_attr = Av_Responsive_Images()->html_attr_image_src( $lightbox_img_src, false );
						$output .= "<a {$lightbox_attr} class='av-horizontal-gallery-link' {$display_char} title='{$lightbox_title}' alt='{$alt}'>";
						$output .= '</a>';
					}

Regards,
Ismael

Hey navindesigns,

Thank you for the inquiry.

This is possible but you have to modify the enfold/config-templatebuilder/avia-shortcodes/gallery/gallery.php around line 683.

				
				$thumbs .= "<a {$lightbox_attr} data-rel='gallery-" . self::$gallery . "' data-prev-img='{$prev[0]}' {$class} data-onclick='{$counter}' title='{$lightbox_title}' {$markup_url} {$rel}>";
				$thumbs .=		$img_tag;
				$thumbs .=		"
<div class='big-prev-fake'>{$prev_img_tag}</div>
";
				$thumbs .= '</a>';

Replace it with:

$caption = wp_get_attachment_caption( $attachment->ID );

				$thumbs .= "<a {$lightbox_attr} data-rel='gallery-" . self::$gallery . "' data-prev-img='{$prev[0]}' {$class} data-onclick='{$counter}' title='{$lightbox_title}' {$markup_url} {$rel}>";
				$thumbs .=		$img_tag;
				$thumbs .=      "<span class='avia-gallery-caption'>{$caption}</span>";
				$thumbs .=		"
<div class='big-prev-fake'>{$prev_img_tag}</div>
";
				$thumbs .= '</a>';

Then add this css code to display the avia-gallery-caption container.

#top .avia-gallery .avia-gallery-caption {
    display: block;
}

This modification should display the caption below the gallery thumbnails.

Best regards,
Ismael

Hey BrendanG,

Thank you for the inquiry.

You can add this code in the functions.php file to override the default thumbnail size in the single post page.

add_action("ava_after_main_title", function() {
  global $avia_config;

  if( is_singular("post") ) {
    $avia_config['image_size'] = 'full';
    $avia_config['preview_mode']  = 'custom';
  }
}, 10);

Best regards,
Ismael