Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 2, 2014 at 4:11 pm #361485
    pbennion

    Good Morning,

    I am using a lazy load plugin for my enfold theme and it is helping to speed it up significantly as our site using a lot of hi resolution images.

    There are a few that I need to stop from lazy loading which is done via adding a data attribute to the image html.
    eg.
    <img src="my-image.jpg" data-no-lazy=”1″ alt=”” width=”100″ width=”100″ />
    http://docs.wp-rocket.me/article/15-disable-lazy-load-on-specific-images

    These images are currently added via the Advanced Layout Builder ‘Image’ shortcode and some are part of full width sliders.

    Is there a way to add this attributes to specific images?
    eg. I have enabled shortcode debug, but it will not work if adding to the debug field area.

    Or is there a hook or filter for each shortcode uses that can have function added into child theme?

    Warm regards

    Paul

    December 2, 2014 at 9:47 pm #361787
    Elliott

    Hey pbennion!

    It would take a lot of time and code to add an option for that. Instead what I would do is use a codeblock element and use plain HTML.

    <div itemtype="https://schema.org/ImageObject" itemscope="itemscope" class="avia-image-container  av-styling-  avia-builder-el-0  avia-builder-el-no-sibling   avia-align-center "><div class="avia-image-container-inner"><img data-no-lazy = "1" itemprop="contentURL" title="" alt="" src="#" class="avia_image "></div></div>

    As for the sliders.. does the lazy load really work with them? I wouldn’t have thought so. Unfortunately for those I don’t see an easy way of going about it for each image. You could add it to them all in the PHP code though.

    Cheers!
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
    December 4, 2014 at 7:28 pm #363157
    pbennion

    Good Afternoon,

    Thank for the suggestions to add images using code blocks, instead dug deeper and copied the shortcode to child theme and added a small check to see if the $meta[custom_class] variable contained my specified ‘nolazy’ custom css class. 

    // If Custom Class 'nolazy' then prevent lazy load  
if (strpos($meta['custom_class'],'nolazy') !== false) {
    	$lazy = "data-no-lazy=1";
}

    Then added the {$lazy} into the output img tags.

    So that is all sorted.

    However the full width slider are actually being lazy loaded. (I can confirm this by viewing source while page loads to check for the image script which replaces the src value. )

    and the sliders does not seem to calculate its final height until all images are loaded.

    This is causing whitespace to appear below the slider until all images are loaded and then it is closed back up and slider will scroll as usual.

    Do you have any suggestions for this type of issue?

    Warm regards

    Paul

    December 5, 2014 at 5:54 pm #363719
    Elliott

    Hi!

    Which slideshow is it? You can try adding the attribute to line 569 in /enfold/config-templatebuilder/avia-shortcodes/slideshow.php.

    $html .= "<".$tags[0]." >{$caption}<img data-no-lazy = '0' src='".$img[0]."' width='".$img[1]."' height='".$img[2]."' title='".$imgtitle."' alt='".$imgalt."' $markup_url /></ ".$tags[1]." >";

    Cheers!
    Elliott

    • This reply was modified 9 years, 11 months ago by Elliott.
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.