How to Add or Remove Image Tag Attributes

You can add, change or remove the attributes on your slideshow’s image tags with a few lines of PHP, for example to add fetchpriority="high", or to stop WordPress adding loading="lazy" to slideshow images in your posts and pages.

Add these snippets to your theme’s functions.php file, or to a code snippets plugin. Each one uses its own function, so rename the my_ prefix to something unique to your site, and use each function name only once. They work on image slides, and also on most slide types in MetaSlider Slideshow Pro, which use the same filters.

How to Change MetaSlider’s Own Attributes #

MetaSlider builds each image tag from a list of attributes: src, width, height, alt, title, class and rel. You can change that list before the tag is built with the metaslider_flex_slider_image_attributes filter.

The filter receives the attributes, the slide’s data and the slideshow ID. Set a new key to add an attribute, and use unset() to remove one.

// Add fetchpriority="high" to every image slide
function my_metaslider_add_fetchpriority( $attributes, $slide, $slider_id ) {
    $attributes['fetchpriority'] = 'high';
    return $attributes;
}
add_filter( 'metaslider_flex_slider_image_attributes', 'my_metaslider_add_fetchpriority', 20, 3 );

// Remove the title attribute from the images in slideshow 123 only
function my_metaslider_remove_title( $attributes, $slide, $slider_id ) {
    if ( 123 === (int) $slider_id ) {
        unset( $attributes['title'] );
    }
    return $attributes;
}
add_filter( 'metaslider_flex_slider_image_attributes', 'my_metaslider_remove_title', 20, 3 );

Use a priority above 10, as in the examples. MetaSlider’s own Lazy Load setting uses this filter at priority 10 to move the image address from src into data-ms-src, so a higher priority runs after it and sees the final attributes. This filter also runs for Livid and Local Video slides, where it changes their cover image.

MetaSlider escapes every value and leaves out any attribute with an empty value, except alt. That means setting an attribute to an empty string removes it rather than adding it with no value.

How to Change the Attributes WordPress Adds #

WordPress adds loading, decoding and fetchpriority to images in your post content, and that includes a slideshow added with the MetaSlider block or shortcode. These come from WordPress itself, not from MetaSlider, so you change them with WordPress filters.

To use your own value, set it with the MetaSlider filter above. WordPress never replaces an attribute that is already on the tag, and since WordPress 6.3 it doesn’t add loading="lazy" to an image that has fetchpriority="high".

To stop WordPress adding an attribute to slideshow images, return false for images with the msDefaultImage class, which every image slide has:

// Stop WordPress adding loading="lazy" to MetaSlider images
function my_metaslider_skip_loading_attr( $value, $image ) {
    return false !== strpos( $image, 'msDefaultImage' ) ? false : $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'my_metaslider_skip_loading_attr', 10, 2 );

// Stop WordPress adding decoding="async" to MetaSlider images
function my_metaslider_skip_decoding_attr( $value, $image ) {
    return false !== strpos( $image, 'msDefaultImage' ) ? false : $value;
}
add_filter( 'wp_img_tag_add_decoding_attr', 'my_metaslider_skip_decoding_attr', 10, 2 );

The decoding filter was added in WordPress 6.1.

fetchpriority="high" tells the browser to load an image before others, so it usually belongs on the first slide only. Slides are built in their slideshow order, and MetaSlider can build them more than once while showing a slideshow, so remember which slide came first rather than counting:

// Add fetchpriority="high" to the first image slide of each slideshow
function my_metaslider_first_slide_fetchpriority( $attributes, $slide, $slider_id ) {
    static $first = array();
    if ( ! isset( $first[ $slider_id ] ) ) {
        $first[ $slider_id ] = $slide['id'];
    }
    if ( $slide['id'] === $first[ $slider_id ] ) {
        $attributes['fetchpriority'] = 'high';
    }
    return $attributes;
}
add_filter( 'metaslider_flex_slider_image_attributes', 'my_metaslider_first_slide_fetchpriority', 20, 3 );

If the slideshow’s order is set to random or by date, the slides are sorted after they are built, so this image may not be the one shown first.

How to Change Post Feed and WooCommerce Images (Pro) #

Post Feed and WooCommerce slides show one image for each post or product, and they pass each image through the same filter as image slides. Every snippet in this guide works on them too.

To change only these images, check the slide’s class. It contains ms-postfeed for Post Feed slides and ms-woocommerce for WooCommerce slides, plus post- and the ID of the post or product:

// Add fetchpriority="high" to Post Feed images only
function my_metaslider_post_feed_fetchpriority( $attributes, $slide, $slider_id ) {
    if ( isset( $slide['class'] ) && false !== strpos( $slide['class'], 'ms-postfeed' ) ) {
        $attributes['fetchpriority'] = 'high';
    }
    return $attributes;
}
add_filter( 'metaslider_flex_slider_image_attributes', 'my_metaslider_post_feed_fetchpriority', 20, 3 );

Here $slide['id'] is the ID of the post’s featured image, or of the post itself when it has none. To change a slide’s details before its image is built, such as its alt text or title, use the metaslider_post_feed_slide_attributes or metaslider_woocommerce_slide_attributes filter. Each receives the slide’s data and the slideshow ID.

The Smart Crop section below doesn’t apply to these slides: they always build their own image tag.

How to Change Images in Other Pro Slide Types (Pro) #

These Pro slide types also pass their image through metaslider_flex_slider_image_attributes, so the snippets above work on them:

• YouTube, Vimeo and TikTok slides: the cover image shown before the video plays. $slide['id'] is the slide’s ID.
• Layer slides: the background image. When the background is a video, the image has the msInvisibleImage class too and isn’t shown.
• Image Folder slides: one image for each file in the folder. Use metaslider_folder_slide_attributes to change a slide’s details first.
• Post Images slides: one image for each image in the post. Use metaslider_post_images_slide_attributes to change a slide’s details first.

External Image slides build their image tag without this filter, so you can’t change their attributes this way.

How to Change Attributes When Smart Crop Is Disabled #

When ‘Smart Crop’ is set to one of its disabled options, MetaSlider uses WordPress’s own wp_get_attachment_image() to build the tag for image slides. WordPress then also adds srcset and sizes, along with the loading attributes. You can change those with the wp_get_attachment_image_attributes filter:

// Remove sizes from MetaSlider images built by WordPress
function my_metaslider_remove_sizes( $attributes ) {
    if ( isset( $attributes['class'] ) && false !== strpos( $attributes['class'], 'msDefaultImage' ) ) {
        unset( $attributes['sizes'] );
    }
    return $attributes;
}
add_filter( 'wp_get_attachment_image_attributes', 'my_metaslider_remove_sizes' );

Your slideshow images now have exactly the attributes you want.