Hi,

We updated the code above. It should now apply the original image URL instead of the portfolio thumbnail.

Have you tried disabling the plugins temporarily? It is possible that one of the plugins is causing the lightbox to fail.

Best regards,
Ismael

Hi,

Welcome back! It’s been a while.

Have you tried editing the Image elements and re-selecting the square thumbnail? You may need to do this manually for every image element.

We also noticed that a “resize” parameter or query var is prepended to the image URL, which might be causing the issue. Did you install an image optimization plugin?

Best regards,
Ismael

Hi Danielle,

Sorry, apparently I have forgot to paste the link :)
This is the one I was referring to – https://wordpress.org/plugins/simple-image-sizes/. After activating the plugin, you can go to Settings > Media, update image sizes and then click regenerate thumbnails button at the bottom

Best regards,
Yigit

Hey,

Thanks for contacting us!

Could you please use this plugin and increase the size of “featured_large” images and regenerate thumbnails?
Currently your image is 1500x700px and increasing the size would display it sharper :)

Best regards,
Yigit

Hey ishish,

Thank you for the inquiry.

Would you like to increase the size of the lightbox image? The default thumbnail used for the lightbox is called the Large thumbnail, which can be adjusted in the Settings > Media panel. After the size adjustment, you have to upload the images again or regenerate them using a plugin.

// https://wordpress.org/plugins/regenerate-thumbnails/

Best regards,
Ismael

Hi,

The plugin is outdated but it works properly. If you do not want to use it, then you will have to modify the functions.php file and adjust the dimension of the thumbnail manually. Around line 193, you will see this code.

$avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );						// images for fullsize pages and fullsize slider

Adjust the width and height value, then regenerate the thumbnails, or upload the images again. This plugin will help with the thumbnail regeneration.

// https://wordpress.org/plugins/regenerate-thumbnails/

Best regards,
Ismael

Hey w_archer,

Thank you for the inquiry.

That is the default size of the featured images on post with sidebar. To adjust it, you may need to install the following plugin, activate it, go to the Settings > Media panel, look for the entry_with_sidebar thumbnail, adjust its size, then regenerate the thumbnails.

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

Best regards,
Ismael

Hi,
Thank you for your patience and the link to your sidebar news widget, so in this screenshot of your current source code please note that the current width & height of the image is 36px, and the “sizes” attitude has the max-width set to 36px, Red Arrows, but you also have a 180px source image available, Yellow Arrow

So I prepose this jQuery script to change the source image used to the 180px version which will give you a larger image and keep it looking crisp.

function newsbox_custom_script() { ?>
    <script>
(function($){
  $(document).ready(function(){
$('.sidebar .newsbox .news-thumb img.size-widget').attr('width', '180');
$('.sidebar .newsbox .news-thumb img.size-widget').attr('height', '180');
$('.sidebar .newsbox .news-thumb img.size-widget').attr('sizes', '(max-width: 180px) 100vw, 180px');
$('.sidebar .newsbox .news-thumb').css({'height': '180px','width': '180px'});
 });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'newsbox_custom_script');

Now if you want the image larger you could regenerate the thumbnails so you would have a larger option for a source and adjust the script, or if you don’t need the image to be very crisp you can adjust the last line of the script (css) to suit.

Best regards,
Mike

Hi,

We added this snippet in the functions.php file to replace the description with the actual product archive title.

add_action( 'init', 'avia_woocommerce_full_width_category_images', 50 );
function avia_woocommerce_full_width_category_images()
{
   	remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
	remove_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner', 11 );
	add_action( 'ava_after_main_container', 'avia_woocommerce_big_cat_banner_child_theme', 11);
	//add_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner_child_theme', 11);

	function avia_woocommerce_shop_banner_child_theme()
	{
		global $avia_config;

		if(is_shop() || (is_product_category() && avia_get_option('shop_banner_global') == "shop_banner_global") && !isset($avia_config['woo-banner']))
		{
			$options = avia_get_option();

			if( isset( $options['shop_banner'] )  && ( $options['shop_banner'] == 'av-active-shop-banner' ) )
			{
				$bg 		= $options['shop_banner_image'];
				$overlay 	= $options['shop_banner_overlay_color'];
				$opacity 	= $options['shop_banner_overlay_opacity'];
				$description= wpautop($options['shop_banner_message']);
				$font 		= $options['shop_banner_message_color'];

				echo avia_woocommerce_parallax_banner($bg, $overlay, $opacity, $description, $font);
			}
		}
	}

	function avia_woocommerce_parallax_banner_child_theme($bg, $overlay, $opacity, $description, $font)
	{

		if(is_numeric($bg))
		{
			$bg = wp_get_attachment_image_src($bg, 'full');
			if(is_array($bg) && $bg[0] != "") $bg = $bg[0];
		}

		if($font) $font = "style='color:{$font};'";
		if($bg) $bg = "background-image: url(".$bg.");";

		$output = "";

		$output .='
<div id="av_product_description" class="avia-section main_color avia-section-large avia-no-border-styling avia-full-stretch av-parallax-section av-section-color-overlay-active avia-bg-style-parallax container_wrap fullsize" data-section-bg-repeat="stretch" '.$font.'>';
		$output .='
<div class="av-parallax  avia-full-stretch" data-avia-parallax-ratio="0.3">';
		$output .='
<div class="av-parallax-inner" style="'.$bg.' main_color background-attachment: scroll; background-position: 50% 50%; background-repeat: no-repeat;">';
		$output .='</div>
';
		$output .='</div>
';

		$output .='
<div class="av-section-color-overlay-wrap">';
		if(!empty($overlay))
		{
			$output .='
<div class="av-section-color-overlay" style="opacity: '.$opacity.'; background-color: '.$overlay.'; "></div>
';
		}

		$output .='
<div class="container">';
		$output .='<main class="template-page content av-content-full alpha units">';
		$output .= "
<h1>".get_the_archive_title()."</h1>
";
		if(false) $output .= "
<h1>".$description."</h1>
";
		$output .='</main></div>
</div>
</div>
';

		return $output;
	}

	function avia_woocommerce_big_cat_banner_child_theme()
	{
		if(is_product_category())
		{
			global $wp_query, $avia_config;

			if(isset($wp_query->query_vars['taxonomy']))
			{
				$term = get_term_by( 'slug', get_query_var($wp_query->query_vars['taxonomy']), $wp_query->query_vars['taxonomy']);
				if(!empty($term->term_id))
				{
					$description 	= term_description() ;
					$style 			= get_woocommerce_term_meta($term->term_id, 'av_cat_styling');
					$attachment_id 	= get_woocommerce_term_meta($term->term_id, 'thumbnail_id');

					$overlay 	= get_woocommerce_term_meta($term->term_id, 'av-banner-overlay');
					$font 		= get_woocommerce_term_meta($term->term_id, 'av-banner-font');
					$opacity 	= get_woocommerce_term_meta($term->term_id, 'av-banner-overlay-opacity');

					if(!empty($style))
					{
						remove_action( 'woocommerce_before_shop_loop', 'woocommerce_taxonomy_archive_description', 11 );
						echo avia_woocommerce_parallax_banner_child_theme($attachment_id, $overlay, $opacity, $description, $font);
						$avia_config['woo-banner'] = true;
					}
				}
			}
		}
	}
}

Best regards,
Ismael

Hi,

Would you mind providing a screenshot of the “section”? Please use imgur or dropbox for the screenshot.

You cannot move the lightbox image but you can enlarge it to make sure that the size is the same as the actual size uploaded. To do that, go to the Settings > Media panel and adjust the dimension of the Large thumbnail. And again, you have to regenerate the thumbnail as suggested above.

Best regards,
Ismael

Hi,

Thank you for restoring the site.

It works fine when we select older images or images that have been uploaded earlier. In the above page, we duplicated the gallery, remove the current images and selected older images. The duplicated gallery displays the selected thumbnail size. (see private field)

It is possible that the new images have been affected by a media or an image optimization plugin, but we cannot be sure. Please try to remove the new images and upload them again while the plugins are deactivated.

Best regards,
Ismael

Hey,

You are welcome!

1- Which browser and device are you experiencing this issue? I checked your page on Firefox, Chrome, Safari and Opera however it does not flicker on my end.

2- It is loading cropped version of the images however that is not the case on my local installation. Have you chose full sized images when creating your gallery? If you are, could you please use this plugin – https://wordpress.org/plugins/simple-image-sizes/ and increase the size of “masonry” image sizes and regenerate thumbnails?

Regards,
Yigit

Hey petschka,

Thank you for the inquiry.

What do you mean by “section” exactly? Are you referring to the lightbox option? Please provide a screenshot (using imgur or dropbox) and a link to the page containing the masonry element. We would like to check it.

If it is about the lightbox images, try to adjust the Large thumbnail size in the Settings > Media panel, then regenerate the images or upload them again.

// https://wordpress.org/plugins/regenerate-thumbnails/

Best regards,
Ismael

Hi,

– To remove the “Category:” prefix, use this in the functions.php file.

add_filter("get_the_archive_title_prefix", "__return_empty_string");

– If you want to move the description back to its original place, remove this line from the avia_woocommerce_parallax_banner function.

if($description) $output .= "".$description."

";

Add this code in the functions.php file.

add_action("after_setup_theme", function() {
    add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    add_action( 'woocommerce_product_archive_description', 'woocommerce_product_archive_description', 10 );
}, 20);

After that, use this css code to remove the default page thumbnail.

.tax-product_cat .page-thumb {
    display: none !important;
}

– You cannot override a config file in the child theme directory.

Best regards,
Ismael

Hi,

@thp: We do not have a list of elements yet, but you can assume that every shortcode or template file that contains the Av_Responsive_Images class and is using its methods should render responsive images.

For example, the enfold/config-templatebuilder/avia-shortcodes/image/image.php file should contain this line, which outputs an image markup with the srcset attribute.

return Av_Responsive_Images()->make_content_images_responsive( $output );

It can be easily done using any text editors’ search feature. In Microsoft VS Code for example, just hit CTRL + SHIFT F in Windows, or CMD + SHIFT + F in Mac to search for the Av_Responsive_Images in every files in the theme.

You can also assume that every template that is using the get_the_post_thumbnail or the wp_get_attachment_image function will render responsive images or an image with the srcset attribute.

Best regards,
Ismael