desrosj/respect-art-direction

<?php
/**
 * Functions for displaying images within a <picture> tag.
 *
 * @package Respect_Art_Direction
 */

/**
 * If a post thumbnail is requested for a source set, display a <picture> tag.
 *
 * @param string       $html              The post thumbnail HTML.
 * @param int          $post_id           The post ID.
 * @param string       $post_thumbnail_id The post thumbnail ID.
 * @param string|array $size              The post thumbnail size. Image size or array of width and height
 *                                        values (in that order). Default 'post-thumbnail'.
 * @param string       $attr              Query string of attributes.
 *
 * @return mixed
 */
function rad_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    if ( ! rad_image_size_is_image_source( $size ) ) {
        return $html;
    }

    return rad_the_post_thumbnail_with_art_direction( $post_thumbnail_id, $size );
}
add_filter( 'post_thumbnail_html', 'rad_post_thumbnail_html', 10, 5 );

/**
 * Display an image with art direction.
 *
 * @param sting|int $image_id    Image ID.
 * @param string    $source_name Source set size.
 *
 * @return string Image HTML markup.
 */
function rad_the_post_thumbnail_with_art_direction( $image_id, $source_name = '' ) {
    global $rad_source_lists;

    $html_tags = array(
        '<picture>'
    );

    foreach ( $rad_source_lists[ $source_name ] as $breakpoint => $size ) {
        $sources = array();
        $breakpoint_info = rad_get_breakpoint( $breakpoint );

        foreach ( $size as $current_size ) {
            $image_src = wp_get_attachment_image_src( $image_id, $current_size );
            $sources[] = $image_src[0] . ' ' . $image_src[1] . 'w';
        }

        $html = '<source';

        if ( ! empty( $breakpoint_info ) ) {
            $html .= ' media="' . esc_attr( $breakpoint_info ) . '"';
        }

        $html .= ' srcset="' . implode( ', ', $sources ) . '" />';

        $html_tags[] = $html;
    }

    $default = wp_get_attachment_image_src( $image_id, 'custom1_default_size' );

    $html_tags[] = '<img src="' . $default[0] . '" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." />';

    $html_tags[] = '</picture>';

    return implode( "\n", $html_tags );
}