Skip to content

Instantly share code, notes, and snippets.

@stffndtz

stffndtz/acf-responsive-image.php

Forked from wearehyphen/acf-responsive-image.php
Created August 28, 2017 23:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stffndtz/28c65586a09e7a57d4864fbe7a353af0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stffndtz/28c65586a09e7a57d4864fbe7a353af0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @wearehyphen wearehyphen created this gist Aug 22, 2017.
    111 changes: 111 additions & 0 deletions acf-responsive-image.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,111 @@
    <?php

    /**
    * Output Responsive Image Tag based on ACF Image Field
    *
    * @param $image (array) ACF Image Field
    * @param $size (string) Image size name (ie. medium, large, my-custom-image-size )
    * @param $lazyload (bool) Enable/Disable lazy loading of responsive images (requires lazysizes.js to be loaded — see https://github.com/aFarkas/lazysizes)
    * @param $classes (array) Array of class names to apply to the image
    * @author Eivind Borgersen for Hyphen
    * @version 1.0.2
    * @link https://wearehyphen.co
    *
    **/
    function acf_responsive_image( $image,$size,$lazyload = true,$classes ) {
    // Get the size data from the ACF Image Field
    $data = $image['sizes'];

    // Set 'lazyload' class if $lazyload
    if( $lazyload )
    $classes[] = 'lazyload';

    // Set up arrays for size (string), and width (int) data
    $sizes = array();
    $widths = array();
    $heights = array();
    $ratio = null;


    // Separate data from the ACF Image array
    foreach( $data as $key => $value ) {
    if( strpos( $key,'width' ) !== false ) {
    // Width values (int)
    $widths[] = $value;
    } else if( strpos( $key,'height' ) !== false ) {
    // Height values (int).
    $heights[] = $value;
    } else {
    // Size names (string)
    $sizes[] = $key;
    }
    }

    // Get largest size (int) and the array key (int)
    if( $size ) {
    $w = $data[$size . '-width'];
    $h = $data[$size . '-height'];
    $wk = array_search( $w,$widths );
    } else {
    $w = max( $widths );
    $wk = array_search( $l,$widths );
    $h = $heights[$wk];
    }

    // Define the ratio to prevent lazy loading of off-ratio images in the output
    $ratio = round( $h / $w,2 ); // Rounding to two decimal points to be able to match the ratio more easily

    // Get count of $sizes and $widths (int) to loop through
    $cs = count( $sizes );
    $cw = count( $widths );

    // Set largest image as default src
    $src = $data[$sizes[$wk]];

    // Markup
    // $o_classes Image classes
    if(! empty( $classes ) ) {
    $o_classes .= 'class="' . join( ' ',$classes ) . '"';
    }

    // $o_src Image SRC
    if( $lazyload ) {
    $o_src = ' data-src="' . $src . '"';
    } else {
    $o_src .= ' src="' . $src . '"';
    }

    // $o_srcst Image SRCSET
    if( $lazyload ) {
    $o_srcset = ' data-srcset="';
    for( $i = 1; $i < $cs; $i++ ) {
    if( $widths[$i] <= $w && round( $data[$sizes[$i] . '-height'] / $widths[$i], 2) === $ratio ) {
    $o_srcset .= $data[$sizes[$i]] . ' ' . $widths[$i] . 'w';
    } else {
    $cs--;
    }
    if( $i < $cs-1 ) $o_srcset .= ',';
    }
    $o_srcset .= '"';
    } else {
    $o_srcset = 'srcset="';
    for( $i = 1; $i < $cs; $i++ ) {
    if( $widths[$i] <= $w ) {
    $o_srcset .= $data[$sizes[$i]] . ' ' . $widths[$i] . 'w';
    } else {
    $cs--;
    }
    if( $i < $cs-1 ) $o_srcset .= ',';
    }
    $o_srcset .= '"';
    }

    // $o_sizes Image Sizes
    $o_sizes .= 'sizes="(max-width: ' . $w . 'px) 100vw, ' . $w . 'px"';

    // $output .= '/>';
    // Image Markup
    $output = '<img ' . $o_classes . ' ' . $o_src . ' ' . $o_srcset . ' ' . $o_sizes . ' width="' . $w . '" height="' . $h . '" />';

    echo $output;
    }