Support

Account

Home Forums General Issues Problem delivering retina images via data-src attribute

Solved

Problem delivering retina images via data-src attribute

    • paulb

    • September 17, 2013 at 9:06 pm

    Hi all,

    Apologies if that has been asked before (I have searched to no avail).

    In a nutshell, I’d like to make use of this lazy load plugin which supports hi-res/retina images: https://github.com/luis-almeida/unveil – it uses the “data-src” attribute to deliver retina images, something along the lines of:

    <img src="loader.gif" data-src="img2.jpg" data-src-retina="img2-retina.jpg" alt="" />

    How would be the best way to tackle this using ACF + WordPress? I’ve defined the appropriate “add_image_size” options in my functions.php file, covering off both retina and standard versions, however I’m having no luck pulling the images into the data-src attributes for these custom fields. The generated HTML ends up being:

    <img src="loader.gif" data-src="" data-src-retina="">

    Thanks in advance,

    Paul

    • paulb

    • September 17, 2013 at 10:37 pm

    In typical fashion, I got there in the end! This is what I ended up using in my template files:

    <?php $image = get_field('field_name'); ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" alt="" data-src="<?php $image = get_field('field_name'); echo($image['sizes']['custom-size']); ?>" data-src-retina="<?php $image = get_field('field_name'); echo($image['sizes']['custom-size-retina']); ?>" />

    And to the functions.php with these declarations:

    add_image_size( 'custom-size', 300, 300, true ); // Standard pixel density
    add_image_size( 'custom-size-retina', 600, 600, true ); // Double pixel density
    • Elliot

    • September 18, 2013 at 11:47 am

    Hi @paulb

    Thanks for sharing your solution.

    Great work

    Thanks
    E

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.