Support

Account

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

Solved

Problem delivering retina images via data-src attribute

  • 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

  • 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
  • Hi @paulb

    Thanks for sharing your solution.

    Great work

    Thanks
    E

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

The topic ‘Problem delivering retina images via data-src attribute’ is closed to new replies.