0

I am trying to understand how to add a class to a set of images in WordPress. Specifically I am trying to add a class, for example, .no-lazy-load, to exclude those images from being lazy loaded via the a3 Lazy Load plugin. The set is a series of 6 images within a Slick slideshow, and they have no other class or id (other than the .lazy-loaded class added by the plugin) when the html is rendered.

I'm using the Jevelin theme with the Classic Editor plugin and don't see an option to add a class to an image via Advanced Options. In fact I don't see the Advanced options for editing the image at all.

I was thinking about using something like this but don't know how to add this hook to that set of images instead of all images in the DOM. For example, can I create an array of attachment IDs using wp_get_attachment_image and apply the hook to only those?

I'm not very well-versed in WordPress and apologize if this is an overly broad question. Any help or getting pointed in the right direction would be very much appreciated!

  • It depends entirely on how the images are originally added. Since yours are added by the theme (or a plugin), that theme or plugin would need to support a way for you to add classes. So you're going to need to ask its authors for options. The suggestion in your second link probably won't work because it doesn't sound like the relevant images are inside the_content. – Jacob Peattie Feb 1 at 9:10
  • Thank you for your feedback. I added the images using the built-in slick slider implementation with the theme (Jevelin). It doesn't appear there is any way to add a class to an image anywhere on the front-end. – Mark Feb 3 at 18:04
2
+50

You can use the get_image_tag_class filter which passes the attachment ID as an argument:

apply_filters('get_image_tag_class', string $class, int $id, string $align, string|array $size)

So you can use:

function my_image_tag_class($class, $id, $align, $size) {
   // Logic to check your attachment IDs
   if($some_logic) {
       $class .= ' no-lazy-loaded';
   }
   return $class;
}
add_filter('get_image_tag_class','my_image_tag_class');

If you have an array of attachment IDs you want to filter, your logic would be:

if(in_array($id, $your_array_of_attachments)) { ...
0

You can use jQuery to add remove classes on user browser. Approach can be something like this:

jQuery.( document ).ready(function($){
    $( ".lazy-loaded" ).each(function() {
        //You can simply add the class then remove existing one like this
        $( this ).addClass( "no-lazy-loaded" ).removeClass('lazy-loaded');

        //You can just add the class like this
        $( this ).addClass( "no-lazy-loaded" );


        //Only use one of above methods
    });
});

This will allow you to manipulate the output. You can add this in your footer.php file.

****Again I'm just suggesting an approach.

  • Thank you for your response. Unfortunately, I need to add the exclusion class in the PHP before the html is rendered and especially before the .lazy-loaded class is added by the lazy load plugin. jQuery would've been my first choice but Javascript won't work in this case. Again, my issue isn't about manipulating the DOM on load, it's about excluding those images from the lazy load plugin, which will ignore images with a specified class. – Mark Feb 3 at 17:04
  • how is your Slick slideshow working? added within theme or plugin? if plugin then what is the name? – Sabbir Hasan Feb 3 at 20:42
0

It depends on through which hooks and functions does the mentioned plugin outputs the HTML. As you haven't posted the exact function (code) which generates the output.

1) As we don't have enough time to dig into the plugin, I might suggest in unknown scenarios, a simple hook:

add_filter('a3_lazy_load_images_after','output_change');

// or even: add_filter('the_content','output_change');

function output_change($html_output) { 
   return str_replace('.lazy-loaded', '.no-lazy-loaded', $html_output);
}

2) This approach be used too:

add_filters( 'a3_lazy_load_run_filter', '__return_false');

before your chosen post is output. after that, restore the behavior:

add_filters( 'a3_lazy_load_run_filter', '__return_true');
0

It sounds like the easiest option is to add the class you want to the images yourself. You were looking for this option but said you could not find it. However if you are using the Classic Editor as you said, it is in fact possible.

To add a class to an image using the classic editor:

  1. Add the image to the page using the Add Media button
  2. Once the image is in the editor, click it once to bring up the menu buttons
  3. Select the edit (pencil) button
  4. On the Image Details popup, click the words "Advanced Options" on the left
  5. Enter the class name you want (i.e. no-lazy-loaded) into the field, "Image CSS Class"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.