Lazy Load – Image Dimension Problem

ensure the right width and height are added to the image tag in the HTML or else exclude the images from lazyloading?

How to exclude them?

<img src="***********************.jpg" class="" alt="****************" style="width: 402px; height: 226px; margin-left: -201px; margin-top: -113px;">

This is the html, to widht and height are set in the img

• This reply was modified 4 years, 11 months ago by BigBlack.
• This reply was modified 4 years, 11 months ago by BigBlack.
• This reply was modified 4 years, 11 months ago by BigBlack.

by adding (part of) the image filename or e.g. an ID or specific class in the comma-separated exclusion list.

no one of this options is applicable. Names are all different and no class in the gallery img. Only in upper div

<div class="avante-gallery-grid-content-wrapper do-justified justified-gallery smooved" data-row_height="150" data-margin="5" data-justify_last_row="yes" style="height: 160px; perspective: 1000px;"><div class="entry gallery-grid-item smoove jg-entry entry-visible smooved" data-delay="150" data-minwidth="769" data-scale-x="0" data-scale-y="0" style="width: 300px; height: 150px; top: 5px; left: 5px; opacity: 1; transition-delay: 150ms;"> 

<a class="tg_gallery_lightbox" href="*********************.jpg" data-thumb="**********uploads/thumbnails/**********300x200.jpg" data-rel="tg_gallery124a557"> 

<noscript><img src="*****************************.jpg" class="" alt="***********" /></noscript>

<img src="************.jpg" data-src="*****************.jpg" class=" ls-is-cached lazyloaded" alt="************" style="width: 300px; height: 150px; margin-left: -150px; margin-top: -75px;"> </a>

The only class is the ls-is-cached that is added by autoptimize.
You see something else to use?

maybe ask the avante gallery people if (how) one could add a specific class to all images used in their gallery?

if not and assuming you don’t have a gallery on every page, you could disable lazyloading on specific pages with a couple of lines of code which I can provide?

I’ve about 30 pages where I need to disable it. The avant people are not collaborative..
WHere to put those lines?

The easiest & safest solution is using the code snippets plugin.

If every page that has such gallery has avante-gallery-grid in the page source, we might use that to base the snippet on, can you confirm?

Yes It’s the same gallery used for about 29 pages. Instead 1 use portfolio-grid

Instead 1 use portfolio-grid

but I don’t see that in the HTML source you posted earlier? or do you mean you switched from avante to another gallery plugin which works out of the box?

No I’ve those galleries in several pages. I’ve posted the code of one of them. However in 29 pages I use the same gallery, so the avante-gallery-grid it’s ok. Then in the home I use another gallery with portfolio-grid
So you don’t see that because is on another page. In the home

OK, try this code snippet to disable lazy loading on pages with avante-gallery-grid ;

add_filter('autoptimize_filter_imgopt_should_lazyload','should_lazyload_context',10,2);
function should_lazyload_context($flag, $context) {
  if ( strpos( $context ,'avante-gallery-grid') !== false ) {
	return false;
  } else {
	return $flag;
  }
}

Ok it work, thank you! ??
For the home gallery with portfolio-grid class I’ve make the code like that.

add_filter('autoptimize_filter_imgopt_should_lazyload','should_lazyload_context',10,2);
function should_lazyload_context($flag, $context) {
  if ( strpos( $context ,'avante-gallery-grid') !== false ) {
	return false;
  } else {
	return $flag;
  }
}
add_filter('autoptimize_filter_imgopt_should_lazyload','should_lazyload_context2',10,2);
function should_lazyload_context2($flag, $context) {
  if ( strpos( $context ,'portfolio-grid') !== false ) {
	return false;
  } else {
	return $flag;
  }
}

There’s a more clean way?

there is;

add_filter('autoptimize_filter_imgopt_should_lazyload','should_lazyload_context',10,2);
function should_lazyload_context($flag, $context) {
  if ( strpos( $context ,'avante-gallery-grid') !== false || strpos( $context ,'portfolio-grid') !== false ) {
	return false;
  } else {
	return $flag;
  }
}

TOP!! Thank you!!!

you’re welcome, feel free to leave a review of the plugin and support here! ??