Hi,

Thank you for using Enfold.

The single product page uses the “shop_single” thumbnail version of the image by default. This thumbnail has a maximum width and height of 450px depends on the current value set in the Woocommerce settings. Use this plugin to adjust the size of the product images (shop_single, shop_catalog, shop_thumbnail) and regenerate the thumbnails.

// https://wordpress.org/plugins/simple-image-sizes/

IMPORTANT: Create a backup or a restore point first.

Best regards,
Ismael

Hi,

Thank you for the info. It should display a placeholder image. Please add this code in the functions.php file.

add_action('init', 'after_theme_setup_placeholder_mod');
function after_theme_setup_placeholder_mod() {
	remove_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail', 10);
	remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
	add_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail_mod', 10);
}

function avia_woocommerce_thumbnail_mod($asdf)
{
	global $product, $avia_config;
	
	if(function_exists('wc_get_rating_html'))
	{
		$rating = wc_get_rating_html(  $product->get_average_rating() );
	}
	else
	{
		$rating = $product->get_rating_html(); //get rating
	}
	
	$id = get_the_ID();
	$size = 'shop_catalog';
	$thumbnail = get_the_post_thumbnail( $id , $size );

	echo "<div class='thumbnail_container'>";
		echo avia_woocommerce_gallery_first_thumbnail( $id , $size);
		if($thumbnail) {
			echo $thumbnail;
		} else {
			$placeholder = wc_placeholder_img_src();
			echo '<img src="' . esc_url( $placeholder ) . '" />';
		}
		
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";
		if($product->get_type() == 'simple') echo "<span class='cart-loading'></span>";
	echo "</div>";
}

Best regards,
Ismael

Hi,

In the same file (loop-index.php), look for this code around line 46.

$size = strpos($blog_style, 'big') ? (strpos($current_post['post_layout'], 'sidebar') !== false) ? 'entry_with_sidebar' : 'entry_without_sidebar' : 'entry_without_sidebar';

Set the “square” thumbnail to “entry_without_sidebar”.

Best regards,
Ismael

Hi,

Thank you for using Enfold.

Did you set that particular page as blog page? If you did, please set the Blog Layout > Blog Layout settings to “Use the advance layout builder… “. Edit the page, switch to the advance layout builder, insert the Blog Posts element and then set the Preview Image Size settings to the second option. Select the “No Scaling” thumbnail from the list of custom preview image sizes.

Best regards,
Ismael

Hi,

2.) This is possible but you need to modify the config-templatebuilder > aviashortcodes > gallery.php file. Look for this code around line 322.

$output .= "<a class='avia-gallery-big fakeLightbox $imagelink $crop_big_preview_thumbnail $custom_link_class' href='".$link[0]."'  data-onclick='1' title='".$description."' ><span class='avia-gallery-big-inner' $markup_url>";

Replace it with:

$output .= "<a class='avia-gallery-big fakeLightbox $imagelink $crop_big_preview_thumbnail $custom_link_class' href='".$link[0]."'  data-onclick='1' title='".$title."' ><span class='avia-gallery-big-inner' $markup_url>";

Best regards,
Ismael

Hi,

Thank you for the update.

The placeholder markup is missing from the theme’s thumbnail hook. Please use this code in the functions.php file.

add_action('init', 'after_theme_setup_placeholder_mod');
function after_theme_setup_placeholder_mod() {
	remove_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail', 10);
	remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
	add_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail_mod', 10);
}

function avia_woocommerce_thumbnail_mod($asdf)
{
	global $product, $avia_config;
	
	if(function_exists('wc_get_rating_html'))
	{
		$rating = wc_get_rating_html(  $product->get_average_rating() );
	}
	else
	{
		$rating = $product->get_rating_html(); //get rating
	}
	
	$id = get_the_ID();
	$size = 'shop_catalog';
	$thumbnail = get_the_post_thumbnail( $id , $size );

	echo "<div class='thumbnail_container'>";
		echo avia_woocommerce_gallery_first_thumbnail( $id , $size);
		if($thumbnail) {
			echo $thumbnail;
		} else {
			$placeholder = wc_placeholder_img_src();
			echo '<img src="' . esc_url( $placeholder ) . '" />';
		}
		
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";
		if($product->get_type() == 'simple') echo "<span class='cart-loading'></span>";
	echo "</div>";
}

Best regards,
Ismael

Hi,

Ah yes. My bad. I forgot about that. You can’t directly add the image hotspot shortcode inside the tabs so you have to generate them on a separate page and then extract the actual hmtl. Example.

<div class="av-hotspot-image-container avia_animate_when_almost_visible   av-hotspot-numbered av-mobile-fallback-active    avia-builder-el-2  avia-builder-el-no-sibling    avia_start_animation avia_start_delayed_animation" itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
<div class="av-hotspot-container">
<div class="av-hotspot-container-inner-cell">
<div class="av-hotspot-container-inner-wrap">
<div class="av-image-hotspot av-display-hotspot" data-avia-tooltip-position="top" data-avia-tooltip-alignment="left" data-avia-tooltip-class="av-tt-default-width av-tt-pos-above av-tt-align-left  av-mobile-fallback-active  main_color av-tt-hotspot" data-avia-tooltip="This is a tooltip." style="top: 52.3%; left: 29.6%; ">
<div class="av-image-hotspot_inner" style=" ">1</div>
<div class="av-image-hotspot-pulse"></div>
</div>
<img class="avia_image " src="HOTSPOT IMAGE URL HERE" alt="Test 3" title="b323e250748487.58da487d9a5e6" itemprop="thumbnailUrl"></div>
</div>
</div>
<div class="av-hotspot-fallback-tooltip">
<div class="av-hotspot-fallback-tooltip-count">1
<div class="avia-arrow"></div>
</div>
<div class="av-hotspot-fallback-tooltip-inner clearfix">
This is a tooltip.
</div>
</div>
</div>

Best regards,
Ismael

Hi,

Please try the following:
1. Install this plugin: https://wordpress.org/plugins/simple-image-sizes/
2. Go to Settings > Media
3. Change the entry_with_sidebar image size (increase its width / height).
4. Regenerate the thumbnails by clicking the button at the bottom.

Best regards,
Yigit

Hi,
Did you Regenerate New Image Sizes? Please see this post: How to Regenerate Thumbnails or New Image Sizes

Best regards,
Mike

Hi,

Thank you for the update. Please edit the post or entries slider element. Set the “Preview Image Size” to “manual” or the second option then select the thumbnail size manually. This should fix the issue but it’s still better if the post images have the same size, orientation and aspect ratio.

Best regards,
Ismael

Hey forever_prodotti,
Try to wrap your code into a function and use the init hook to add your thumbnail size to the avia_config array: overwrite the avia_config array after the main theme functions.php is loaded

Best regards,
Mike

Hi,

Maybe this thread will help you out? You shouldn’t need the version compare part of the code you are using in the child theme anymore.

Best regards,
Rikard

Hey raymondkramer,
How about opening the gallery on page load? If I understand correctly your gallery has one large image with other thumbnails, so the class of the large one should be “avia-gallery-big”
So if you add this code to a code block element on the page, every time the page is opened your gallery will be shown in the lightbox.
You could create a special page that is only meant to be linked via your slider, if you didn’t want other people landing on it by mistake.
Try adding this code in a code block element on the page that has your gallery

<script>
(function($){
    $(window).load(function() {
       $('a.avia-gallery-big').trigger('click');      
    });
})(jQuery);
</script>

Best regards,
Mike