Converting specific images from src to data-src for lazy load

[ScottWhitaker]

Hello,

I am using a jquery plugin that lazy loads images with specific classes. Their processes is to load a placeholder image with src and store that image url in data-src until the image becomes visible on the page.

I was able to change the src to data-src here: pro/cornerstone/includes/shortcodes/image.php

  if ( $link == 'true' ) { 
$output = "<a {$id} class=\"{$class}{$link_class}{$type}{$float}\" {$style} href=\"{$href}\" {$title} {$target} {$tooltip_attr} {$lightbox_caption} {$lightbox_options}><img src=\"{$src}\" {$alt}></a>";
  } else {
$output = "<img {$id} class=\"{$class}{$type}{$float}\" {$style} src=\"{$src}\" {$alt}>";
  }

My question would be, if a certain image or image + link had a class, would I be able to specify that with this code such as:

if ( $customClass == ‘lazyLoad’ ) {
$output = a>img data-src="{$src}" {$alt}> /a>;
}

Thanks

[christian]

Hey Scott,

The $class variable outputs a string so you’ll need might need to apply some string manipulation first because you can apply multiple classes to the image in addition to the generic Image element class.

Please just note that this question touches on PHP development which is beyond the scope of our support. I just gave you the information about the variable’s output. Beyond that, we can’t help further.

It’s also not recommended to modify the elements. You should create your own element instead and just copy an element’s functionality. See https://theme.co/apex/forum/t/cornerstone-content-builder-plugin-integration/216/1

If the third party plugin requires just a selector and in case you didn’t know, you can target the image of the V2 Image element using this selector .x-image img. That is regardless if it’s a link or not. For the Classic Image element, it’s .x-img for non-link and .x-img img if the link is enabled.

Hope that helps and thank you for understanding.