Hi,

Thank you for sharing the complete steps. Regarding the older thread, the complete solution is already there; you just need to adjust the “std” parameter to “hover_active”.

remove_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements', 500, 1 );
add_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements_mod', 500, 1 );

function avia_woocommerce_product_elements_mod( $elements )
{
	$posttype = avia_backend_get_post_type();

    if( ! empty( $posttype ) && $posttype == 'product' )
    {
        $elements[] = array("slug"	=> "avia_product_hover",
            "name" 	=> "Hover effect on <strong>Overview Pages</strong>",
            "desc" 	=> "Do you want to display a hover effect on overview pages and replace the default thumbnail with the first image of the gallery?",
            "id" 	=> "_product_hover",
            "type" 	=> "select",
            "std" 	=> "hover_active",
            "class" => "avia-style",
            "subtype" => array("Yes - show first gallery image on hover" => 'hover_active', "No hover effect" => ''));

        $counter = 0;
        foreach( $elements as $element )
        {
            if( $element['id'] == 'sidebar' ) 
			{
				$elements[ $counter ]['required'] = '';
			}
            else if( $element['id'] == 'layout' ) 
            {
	            $elements[ $counter ]['builder_active'] = true;
	           // unset($elements[$counter]);
            }
            $counter++;
        }
    }

	return $elements;
}

Best regards,
Ismael

Hi,
When creating a product with the ALB and you want to show the thumbnails under the main image you will first need to ensure that you have Enfold Theme Options ▸ Shop Options ▸ Product gallery ▸ WooCommerce 3.0 product gallery enabled.

Then add this css to your child theme stylesheet or the theme option Quick CSS

.single-product .flex-control-thumbs li {
    display: flex !important;
    float: left;
}

then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_shortcode( 'avs_product_gallery_hook', 'avs_product_gallery_hook_callback' );
function avs_product_gallery_hook_callback( $atts ) {
ob_start();
woocommerce_show_product_images();
$content = ob_get_clean();
return $content;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
and add this shortcode to your page where you want the image to show in a code block:
[avs_product_gallery_hook]


the switch occurs on click and not hover, as per woocommerce.
This will only work on product pages and not shop or archive pages, perhaps there is a plugin that will do that but you will prob need to also use the default editor instead of the ALB.

Best regards,
Mike

Hi,

Yes, we were referring to the left column. Have you tried moving the gallery to 1/1 column to create more space for the main image and the thumbnails?

Best regards,
Ismael

Hey JeffDale,

Thank you for the inquiry.

There is no option for this by default, but you can add this css code to adjust the width of the main image and move it to the right, effectively creating space for the thumbnails.

#top div .avia-gallery .avia-gallery-big {
    float: right;
    width: 50%;
}

Result:

View post on imgur.com

Best regards,
Ismael

Hey Vera,
I added this to your child theme functions.php:

function override_post_thumbnail_size($size, $post_id) {
    if (is_archive()) {
        return 'full';
    }
    return $size;
}
add_filter('post_thumbnail_size', 'override_post_thumbnail_size', 10, 2);

It is working, but you will need to adjust one of your images as it’s full size is smaller than the others (Blinder Port)

Best regards,
Mike

Hey ballindigital,

Thank you for the inquiry.

You can add this css code to hide the product gallery thumbnails and adjust the height of the main product image:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .single .product div.images div.thumbnails {
    display: none;
  }

  .single .product div.images img {
    width: auto;
    height: auto;
    max-height: 300px;
    margin: 0 auto;
  }
}

Best regards,
Ismael

Hi,

Please continue here: https://kriesi.at/support/topic/portfolio-grid-displays-thumbnails-incorrectly-if-they-are-odd/#post-1477293

Best regards,
Ismael

Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  $('.single-post').each(function() {
  $(this).find('.entry-content-header').css({'margin-top':'15px'}).insertAfter($(this).find('.big-preview').css({'margin-top':'0'}));
  });
  })(jQuery);
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

To use the full size featured image for single posts with a sidebar, instead of the 845×321 size that will be upscaled, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter( 'post_thumbnail_size', 'custom_single_event_post_thumbnail_size' );
function custom_single_event_post_thumbnail_size($size) {
    if( !is_singular('post') ) {
        return;
    }
    if( ! has_post_thumbnail() ) {
        return;
    }
    $size = 'full'; 
    return $size;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

Thank you for the info.

This seems to be an issue with the Smush Pro plugin. When deactivated, the post slider displays the correct thumbnails. We created a test page. (see private field).

Please check the plugin settings and contact the plugin developer for additional assistance.

Best regards,
Ismael

Hey arbormat,

Thank you for the inquiry.

Some images in the grid are smaller than 1500x630px, so the original or full-size versions are displayed. Please note that WordPress doesn’t generate larger versions of images. Make sure to upload images with the same size and aspect ratio, or at least larger than the selected thumbnail.

Best regards,
Ismael

Hey TheConduitLondon,

Thank you for the inquiry.

The size of the images is 710x375px, so they are displaying the correct magazine thumbnail. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,

Thank you for the update.

It turned out to be an issue with the config-templatebuilder > avia-template-builder > assets > js > avia-media.js file. We modified this code around line 466:

preview_img = element.sizes && element.sizes['thumbnail'] ? element.sizes['thumbnail'].url : element.url;

We added a few images in the Masonry Gallery in the test page. Please make sure to purge the cache before testing.

Best regards,
Ismael

Hey MysticMimi,
On your blog page the categories show at the bottom because you are using a full width color section and a grid row, these full width elements push the sidebar down below, so you would need to change your layout.
To add categories to your footer you can use the categories widget.

I don’t know what you mean by: “thumbnail photo strip underneath the section” perhaps this?

I don’t see a “white shadow thing at the edge of the page on the blog page”

Best regards,
Mike

Hi,
Please note that adding the code above and regenerating the thumbnails will not remove the old images that you want to remove, you will need to remove them via FTP or your cPanel file manager.

Best regards,
Mike