Hi,

Thank you for the info.

But if I reinstate the ‘shop_catalog image size, it starts picking it up again and not the woocommerce_thumbnail one.

Did you implement the changes in the enfold/config-woocommerce/config.php after reinstating the shop_catalog image size?

$woocommerce_thumbnail_image_width = get_option( 'woocommerce_thumbnail_image_width' );
		$default_size = $woocommerce_thumbnail_image_width == 300 ? 'shop_catalog' : 'woocommerce_thumbnail';
		$size = apply_filters( 'avf_wc_before_shop_loop_item_title_img_size', $default_size );

The theme by default will prioritize the custom shop_catalog (450x450px) thumbnail if the changes above are not implemented. You can also use the filter.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'temp_thumbnail_size_fix', 10, 1 );
function temp_thumbnail_size_fix( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Ismael

Hi,

You can add comment as following

/* This is the comment to describe what I did */
add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );

function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Cheers!
Yigit

Hey Omar Skapti,

Thank you for the inquiry.

The theme sets the product thumbnail to shop_catalog (450x450px) by default, and this overrides the value set in the Woocommerce > Product Images > Product Thumbnail Width field.

To change this behavior and to revert back to the default product thumbnail, you have to add this filter in the functions.php file.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_wc_before_shop_loop_item_title_img_size_mod', 10, 1 );

function avf_wc_before_shop_loop_item_title_img_size_mod( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Ismael

Hey JaimBateman,

Thank you for the inquiry.

Have you tried implementing the changes that we suggested in the previous thread?

// https://kriesi.at/support/topic/bug-in-enfold-for-woocommerce-prduct-images/#post-1363586

The enfold/config-woocommerce/config.php file has to be modified directly. This will set the thumbnail to the default woocommerce_thumbnail if the woocommerce_thumbnail_image_width option has been adjusted.

Best regards,
Ismael

Hi,

Glad to know that this has been resolved. Regarding the product gallery, you can try the Gallery element from the Media Elements tab, set the Styling > Gallery Style to the second option (Big image with thumbnails below), then adjust the Thumbnail Columns.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey kreativeseite,

Thank you for the inquiry.

Looks like both the single post and blog overview page are using the same thumbnail, which is 1030x1030px in size. Did you remove the other registered thumbnails? The default thumbnail for the single post page should be 845x321px in size but this thumbnail doesn’t get applied for some reason.

Best regards,
Ismael

Hi,
To add a caption below your gallery items, you can use this css from our documentation:

/* Display caption below thumbnail */
#top .avia-gallery .avia-gallery-thumb a:after {
content: attr(title);
margin: 10px 0;
position: relative;
display: block;
width: 100%;
font-size: 14px;
text-align: center;
}

adjust the css font size and margin to suit, after applying the css clear your browser cache.
and use the caption field:

the expected results:

Or try using the masonry gallery element for both galleries, the first one without captions and the second one with captions, again use the caption field:

then choose to show the caption excerpt always:

the expected results:

Best regards,
Mike

Hey Andrew,

Sorry for the confusion. We provided a filter in the previous thread, please continue here: https://kriesi.at/support/topic/magazine-thumbnails-display-at-different-sizes/#post-1364153

Best regards,
Ismael

Hi,

Sorry for the confusion. Looks like you can only select the thumbnail size for the big entry in the Styling > General Styling panel, small entries use the default thumbnail (80x80px). Please add this filter in the functions.php file instead.

add_filter('avf_magazine_settings', function($config) {
    $config['image_size']['small'] = 'full';
    $config['image_size']['big'] = 'full';
    return $config;
}, 10, 1);

The filter will set the thumbnail size of the small entries to full and display the original image.

Best regards,
Ismael

Hi,

Thank you for the update.

The images in the magazine element get distorted because of this css code.

.AVR-home-page .av-magazine-thumbnail {
    width: 320px !important;
    height: 180px !important;
}

.AVR-home-page .av-magazine-thumbnail img {
    height: 168px !important;
    width: 309px !important;
}

Removing the css code should bring the magazine element back to its default style or layout, screenshot below.

// https://1drv.ms/u/s!AjjTfXSRbKTvxAoJplsUeMQf6rZy?e=HVdrI7

Best regards,
Ismael

Hi la_tripping,

Please try this filter in your functions.php file:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'temp_thumbnail_size_fix', 10, 1 );

function temp_thumbnail_size_fix( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Rikard

Hi,

Please try this filter in functions.php to see if you have any luck with it:

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'temp_thumbnail_size_fix', 10, 1 );

function temp_thumbnail_size_fix( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Best regards,
Rikard

Hi,

The issue occurs because Woocommerce just returns the declared thumbnail shop_catalog instead of using the values set in the Woocommerce > Product Images options. The function that controls the image size is located in the plugins/woocommerce/includes/wc-core-functions.php file, look for the wc_get_image_size (line 928).

Your filter works because when the thumbnail is set to woocommerce_thumbnail, the following condition block (line 971) gets executed and return the values or options set in the Woocommerce > Product Images panel.

} elseif ( 'thumbnail' === $image_size ) {
			$size['width'] = absint( wc_get_theme_support( 'thumbnail_image_width', get_option( 'woocommerce_thumbnail_image_width', 300 ) ) );
			$cropping      = get_option( 'woocommerce_thumbnail_cropping', '1:1' );

			if ( 'uncropped' === $cropping ) {
				$size['height'] = '';
				$size['crop']   = 0;
			} elseif ( 'custom' === $cropping ) {
				$width          = max( 1, (float) get_option( 'woocommerce_thumbnail_cropping_custom_width', '4' ) );
				$height         = max( 1, (float) get_option( 'woocommerce_thumbnail_cropping_custom_height', '3' ) );
				$size['height'] = absint( NumberUtil::round( ( $size['width'] / $width ) * $height ) );
				$size['crop']   = 1;
			} else {
				$cropping_split = explode( ':', $cropping );
				$width          = max( 1, (float) current( $cropping_split ) );
				$height         = max( 1, (float) end( $cropping_split ) );
				$size['height'] = absint( NumberUtil::round( ( $size['width'] / $width ) * $height ) );
				$size['crop']   = 1;
			}
		}

Please try to edit the enfold/config-woocommerce/config.php file and look for this code around line 442.

$size = apply_filters( 'avf_wc_before_shop_loop_item_title_img_size', 'shop_catalog' );

Replace it with:

$woocommerce_thumbnail_image_width = get_option( 'woocommerce_thumbnail_image_width' );
		$default_size = $woocommerce_thumbnail_image_width == 300 ? 'shop_catalog' : 'woocommerce_thumbnail';
		$size = apply_filters( 'avf_wc_before_shop_loop_item_title_img_size', $default_size );

Best regards,
Ismael

Hey la_tripping,

Thank you for the inquiry.

Did you adjust the value of the Thumbnail Width field in the Customize > Woocommerce > Product Images panel and set the Thumbnail cropping to Uncropped? Using the filter from the previous thread should switch the thumbnail back to woocommerce_thumbnail and allow Woocommerce to return the image size based on the Product Images settings.

Best regards,
Ismael

Hi,

Sorry for the confusion. The correct attribute in order to enable lazy loading is loading=”lazy” (https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading).

You may need to install a plugin for this because not all image entities in the database has the loading attribute by default (e.g shortcodes), so search and replace might not work as expected. Also, please note that WordPress automatically adds the loading attribute to images when they are retrieve using default functions such as wp_get_attachment_image or get_the_post_thumbnail.

// https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/

You can try one of the these plugins.

// https://wordpress.org/plugins/optimole-wp/
// https://wordpress.org/plugins/rocket-lazy-load/

Best regards,
Ismael

Hey Annemarie,

Thank you for the inquiry.

Did you adjust the Thumbnail Width in the Customize > Woocommerce panel? Adding this filter in the functions.php file should override the default shop_catalog thumbnail and use the value set in the Thumbnail Width field.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_thumbnail_size_adjustment', 10, 1 );
function avf_thumbnail_size_adjustment( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Related thread: https://kriesi.at/support/topic/woocommerce-product-images-not-displaying-correctly/#post-1362021

Best regards,
Ismael

Hey paoluccimarketing2015,

Thank you for the inquiry.

Are you using the Product Grid element? If you want the grid to use the specified Thumbnail width in the Customize > Woocommerce > Product Images panel, please add this filter in the functions.php file.

add_filter( 'avf_wc_before_shop_loop_item_title_img_size', 'avf_thumbnail_size_adjustment', 10, 1 );
function avf_thumbnail_size_adjustment( $thumbnail_size ) {
    return 'woocommerce_thumbnail';
}

Related thread: https://kriesi.at/support/topic/woocommerce-product-images-not-displaying-correctly/#post-1362021

Best regards,
Ismael