Use with shortcodes

Resolved joneslloyd
(@joneslloyd)

8 years, 3 months ago

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
(@wp_media)

8 years, 3 months ago

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
(@joneslloyd)

8 years, 3 months ago
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
(@wp_media)

8 years, 3 months ago

Did you check if your hook code is correctly executed?

Thread Starter joneslloyd
(@joneslloyd)

8 years, 3 months ago

Yes, it is 🙂
Thread Starter joneslloyd
(@joneslloyd)

8 years, 3 months ago
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.
Thread Starter joneslloyd
(@joneslloyd)

8 years, 2 months ago

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.

Tags