Use with shortcodes

  • Resolved joneslloyd

    (@joneslloyd)


    7 years, 1 month 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)

    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)

    Thanks for this info!

    Here is an example of the HTML that my retina image shortcode retina_image outputs:
    <img class="" src="https://mysite.com/myimage.png" sizes="(max-width: 850px) 100vw, 850px" srcset="https://mysite.com/myimage.png 850w, https://mysite.com/myimage-271x300.png 271w, https://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)

    Did you check if your hook code is correctly executed?

    Thread Starter joneslloyd

    (@joneslloyd)

    Yes, it is ??

    Thread Starter joneslloyd

    (@joneslloyd)

    Just to clarify:

    I think there’s something about this <img> output that Lazy Load doesn’t like:
    <img class="" src="https://mysite.com/myimage.png" sizes="(max-width: 850px) 100vw, 850px" srcset="https://mysite.com/myimage.png 850w, https://mysite.com/myimage-271x300.png 271w, https://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 7 years, 1 month ago by joneslloyd.
    Thread Starter joneslloyd

    (@joneslloyd)

    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.