Hi,

One of the users kindly modified one of our snippet and use it to delete other thumbnails from the server which he thought was not necessary for a site that he was working on. Please check these threads.

// https://kriesi.at/support/topic/responsive-content-images-retina-screens/#post-1077293
// https://kriesi.at/support/topic/disable-creation-of-multiple-file-resoltuions-on-media-upload/#post-1172543

Please make sure to create a site backup (database, files etc) after adding the code and before regenerating the thumbnails.

If you have more questions about the theme, please feel free to open a new thread.

Thank you for your patience.

Best regards,
Ismael

Hey nasi,
Thank you for your patience and for the link to your site. I installed the Simple Image Sizes plugin for you to demonstrate that your woocommerce_gallery_thumbnail size is 100px, yet it is showing at 175px so it is blurry:

Try going to WordPress ▸ Settings ▸ Media ▸ Image sizes and change this to 180px and then regenerate the thumbnails

and then clear your browser cache and check again.

Best regards,
Mike

Hey!

Thank you for the info @Guenni007.

I tested the filter on my end and it seems to break the layout of the post, pushing the image outside of the big-preview container.

code from: https://kriesi.at/support/topic/remove-link-from-featured-image-2/

function av_remove_featured_image_link(){
  if(is_single()){
    echo get_the_post_thumbnail( $current_post['the_id'], 'featured' );
  }
}
add_filter('avf_post_featured_image_link','av_remove_featured_image_link');

I adjusted the code a bit.

function av_remove_featured_image_link($image) {
    if (is_single()) {
        $image = get_the_post_thumbnail( $current_post['the_id'], 'featured' );
    }
    return $image;
}
add_filter('avf_post_featured_image_link','av_remove_featured_image_link', 10, 1);

This returns the same markup or image which still contains a link as expected. This is due to this markup in the loop-index.php file.

iif( $slider )
					{
						if( $link_lightbox )
						{
							$slider = '<a ' . $lightbox_attr . ' ' . $featured_img_title . '>' . $slider . '</a>';
						}
						else
						{
							$slider = '<a href="' . $link . '" ' . $featured_img_title . '>' . $slider . '</a>';
						}
					}

					if( $slider )
					{
						echo '<div class="big-preview ' . $blog_style . '" ' . avia_markup_helper( array( 'context' => 'image', 'echo' => false ) ) . '>' . $slider . '</div>';
					}

We can slightly edit the code above to remove the link completely,

iif( $slider )
					if( $slider )
					{
						echo '<div class="big-preview ' . $blog_style . '" ' . avia_markup_helper( array( 'context' => 'image', 'echo' => false ) ) . '>' . $slider . '</div>';
					}

Or just use the css suggestion above.

Best regards,
Ismael

Hi,

Thank you for the info.

Is there a staging version of the site? We don’t want to accidentally break the site while editing the code.

Another solution is to extract the actual html of the slideshow and the layer slider and replace the shortcode. This solution works on our end.

This is an example of the fullwidth slider’s html.

  $output .= '
<div id="full_slider_1" class="avia-fullwidth-slider main_color avia-shadow    container_wrap fullsize">
<div class="avia-slideshow av-41ebxqf-8e1d42e67b1a6175203854efa82b817e avia-slideshow-no scaling av_slideshow_full avia-slide-slider av-slideshow-ui av-control-default av-slideshow-manual av-loop-once av-loop-manual-endless avia-slideshow-1" data-slideshow-options="{&quot;animation&quot;:&quot;slide&quot;,&quot;autoplay&quot;:false,&quot;loop_autoplay&quot;:&quot;once&quot;,&quot;interval&quot;:5,&quot;loop_manual&quot;:&quot;manual-endless&quot;,&quot;autoplay_stopper&quot;:false,&quot;noNavigation&quot;:false,&quot;bg_slider&quot;:false,&quot;keep_padding&quot;:false,&quot;hoverpause&quot;:false,&quot;show_slide_delay&quot;:0}" itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
<ul class="avia-slideshow-inner " style="padding: 0px; height: 366px;">
 	<li class="avia-slideshow-slide av-41ebxqf-8e1d42e67b1a6175203854efa82b817e__0 av-single-slide slide-1 slide-odd next-active-slide active-slide" style="visibility: visible; opacity: 1; transition: none 0s ease 0s; transform: translateZ(0px);">
<div data-rel="slideshow-1" class="avia-slide-wrap "><img class="wp-image-3345 avia-img-lazy-loading-not-3345" src="http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136.jpg" width="2560" height="1440" title="teahub.io-spaceship-wallpaper-631136" alt="A new home world. Test our faith." itemprop="thumbnailUrl" srcset="http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136.jpg 2560w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-300x169.jpg 300w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-1030x579.jpg 1030w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-768x432.jpg 768w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-1536x864.jpg 1536w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-2048x1152.jpg 2048w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-1500x844.jpg 1500w, http://site.com/wp-content/uploads/2022/07/teahub.io-spaceship-wallpaper-631136-705x397.jpg 705w" sizes="(max-width: 2560px) 100vw, 2560px" style="left: 0px;"></div></li>
</ul>
</div>
</div>
';

Best regards,
Ismael

Hey ivanglaser,

Thank you for the inquiry.

Are you using any kind of image optimization or compression plugin? It seems to be resizing the lightbox thumbnail based on a specific URL parameter or query. (see private field)

Try to add this code in the functions.php file to adjust the default lightbox thumbnail size.

add_filter('avf_avia_builder_helper_lightbox_size', function($size) {
   return 'full';
}, 10, 1);

Best regards,
Ismael

Hey smudgedesign,
Thank you for your patience, the thread from 2015 that you linked to about the Portfolio Grid doesn’t actually have a solution, the Moderator is pointing out the code block that would need to be edited without advising the specific changes. I found in my test that no change is nessary to achieve what you are looking for if you use the Portfolio Grid.
I created a test page with a Portfolio Grid element and with a square “cropped” image the element shows the image square with the title below:

please note that the image is 349×349 square, with the title it’s 349×403

The key to choosing your images is ensuring that the thumbnails are “cropped”, if you use the Simple Image Sizes plugin you will see which ones are actually cropped square, for example while the “medium” image is 300×300 it is not cropped so it shows as 349×249 if the uploaded image is landscape instead of square, compared to the “woocommerce_thumbnail” which is 300×300 and cropped and produce the square images in the screenshots above.
Now one point, the thread from 2015 that you linked to about the Portfolio Grid, often referred to as the Masonry Portfolio, because it has many of the same features as the Masonry element, so please try the Portfolio Grid element.

Best regards,
Mike

Hi,

Looks like it defaults to the “large” thumbnail when using the list style. Please try to edit the enfold/config-templatebuilder/avia-shortcodes/portfolio/portfolio.php file and look for this code around line 1470.

//	create array with responsive info for lightbox
				$img = Av_Responsive_Images()->responsive_image_src( $attachment->ID, 'large' );

Replace “large” with “full”.

//	create array with responsive info for lightbox
				$img = Av_Responsive_Images()->responsive_image_src( $attachment->ID, 'full' );

Best regards,
Ismael

Hey navindesigns!

Thank you for the inquiry.

You can set a different thumbnail size in the Blog Posts element’s Styling > Appearance > Preview Image Size settings. The default size of the portfolio thumbnail, which is the thumbnail currently selected, can be also adjusted using the following plugin.

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

Best regards,
Ismael

Hi,

You could try to remove all your customisations, then add them back one by one, to see which function is causing the problem. I think this is something you shouldn’t need at all:

/*
Woocommerce 3.0.0 Compatibility Fix
Remove Enfold’s custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}
}

Best regards,
Rikard