Title: Use with shortcodes
Last modified: January 24, 2018

---

# Use with shortcodes

 *  Resolved [joneslloyd](https://wordpress.org/support/users/joneslloyd/)
 * (@joneslloyd)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/use-with-shortcodes/)
 * Hi there,
 * We show images in our posts via a custom shortcode (which generates retina images
   + srcset), via ACF flexible content
 * We’d love to use this plugin but I’ve taken a look at the source code (for filters
   in particular) and I can’t see anything that would allow us to force a `do_shortcode`
   on the content, to convert our shortcodes to images (which the plugin would then
   mark for lazy loading).
 * Are you able to add such a filter, or suggest another course of action so that
   we can use this plugin with our image-generating shortcodes?
 * Thanks a lot!

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [WP Media](https://wordpress.org/support/users/wp_media/)
 * (@wp_media)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-9911283)
 * If you use the core WordPress functions to display the images, lazyload should
   be applied automatically.
 * Else, you can use our `rocket_lazyload_images()` function on your image tag output
   to apply lazyload on it.
 * If you can provide an example of the code you use, it would help give you a better
   solution.
 *  Thread Starter [joneslloyd](https://wordpress.org/support/users/joneslloyd/)
 * (@joneslloyd)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-9912999)
 * Thanks for this info!
 * Here is an example of the HTML that my retina image shortcode `retina_image` 
   outputs:
    `<img class="" src="http://mysite.com/myimage.png" sizes="(max-width:
   850px) 100vw, 850px" srcset="http://mysite.com/myimage.png 850w, http://mysite.
   com/myimage-271x300.png 271w, http://mysite.com/myimage-768x849.png 768w" title
   ="My Image" alt="My Image" style="max-width: 425px !important" />`
 * I’ve added a filter into my retina image shortcode as follows, just before the
   HTML is returned:
    `return apply_filters('retina_image_html', $img_markup);`
 * I then use this to filter the image HTML:
 *     ```
       /**
        * Lazy Load [retina_image]
        */
       add_filter('retina_image_html', function ($img_html) {
           if (function_exists('rocket_lazyload_images')) {
               return rocket_lazyload_images($img_html);
           }
   
           return $img_html;
       });
       ```
   
 * Unfortunately, the HTML output on the page is not changed in any way from the
   image HTML at the top of this post.
 *  Plugin Author [WP Media](https://wordpress.org/support/users/wp_media/)
 * (@wp_media)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-9915183)
 * Did you check if your hook code is correctly executed?
 *  Thread Starter [joneslloyd](https://wordpress.org/support/users/joneslloyd/)
 * (@joneslloyd)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-9915184)
 * Yes, it is 🙂
 *  Thread Starter [joneslloyd](https://wordpress.org/support/users/joneslloyd/)
 * (@joneslloyd)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-9938241)
 * Just to clarify:
 * I think there’s something about this `<img>` output that Lazy Load doesn’t like:
   `
   <img class="" src="http://mysite.com/myimage.png" sizes="(max-width: 850px) 100vw,
   850px" srcset="http://mysite.com/myimage.png 850w, http://mysite.com/myimage-
   271x300.png 271w, http://mysite.com/myimage-768x849.png 768w" title="My Image"
   alt="My Image" style="max-width: 425px !important" />`
 * If we can figure that out, then I think I’ll have it working.
 * Thanks!
    -  This reply was modified 8 years, 3 months ago by [joneslloyd](https://wordpress.org/support/users/joneslloyd/).
 *  Thread Starter [joneslloyd](https://wordpress.org/support/users/joneslloyd/)
 * (@joneslloyd)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-10047575)
 * I found a workaround and this is now fixed 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Use with shortcodes’ is closed to new replies.

 * ![](https://ps.w.org/rocket-lazy-load/assets/icon-256x256.png?rev=2715509)
 * [LazyLoad Plugin – Lazy Load Images, Videos, and Iframes](https://wordpress.org/plugins/rocket-lazy-load/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/rocket-lazy-load/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/rocket-lazy-load/)
 * [Active Topics](https://wordpress.org/support/plugin/rocket-lazy-load/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/rocket-lazy-load/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/rocket-lazy-load/reviews/)

## Tags

 * [improvement](https://wordpress.org/support/topic-tag/improvement/)

 * 6 replies
 * 2 participants
 * Last reply from: [joneslloyd](https://wordpress.org/support/users/joneslloyd/)
 * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/use-with-shortcodes/#post-10047575)
 * Status: resolved