How to add css class to a specific set of images?

Question

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!

Answer 1

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)) { ...

Answer 2

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.

Answer 3

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');

Answer 4

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"