WordPress image handling (ACF / Background Images / Inline / srcset /

image-handling-wordpress.php

// 

<?php 
if ( has_post_thumbnail() ) {
echo wp_get_attachment_image(get_post_thumbnail_id($post->ID), '', false, array('class' => 'featured-image'));
} else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' )
. '/library/images/thumbnail-default.jpg" alt="default thumb" class="featured-image"/>';
}
?>

// Responsive ACF images

<?php 
$img = get_field('image'); // specify ACF field
$size = 'featured'; // specify thumbnail size
$src = wp_get_attachment_image_src($img, $size);
$srcset = wp_get_attachment_image_srcset($img, $size);
?>

<img class="featured-image" 
     src="<?php echo esc_url($src[0]); ?>" 
     srcset="<?php echo esc_attr($srcset); ?>" 
     sizes="
            (max-width: 640px) 640px, 
            (max-width: 1024px) 1024px, 
            1600px" />
or
	<img class="featured-image"
			 src="<?php echo esc_url( $src[0] ); ?>"
			 srcset="<?php echo esc_attr( $srcset ); ?>"
			 sizes="
			 (max-width: 374px) 300px,
			 (max-width: 415px) 350px,
			 (max-width: 600px) 400px,
			 1600px" />

// Background images inline

<?php
$image = get_field('image');
$thumb = wp_get_attachment_image_src($image, '');
$url = $thumb['0'];
?>

<!-- Usage 
<div class="home-hero" style="background-image="<?php echo $url; ?>">
</div> 
-->
                                                                                                                                                
// Responsive ACF images

<?php 
// functions.php

function ccd_responsive_images( $image_id, $image_size, $max_width ) {
	// Check if the image ID is not blank
	if ( $image_id != '' ) {
		// Set the default src image size
		$image_src = wp_get_attachment_image_url( $image_id, $image_size );
		// Set the srcset with various image sizes
		$image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
		// Generate the markup for the responsive image
		echo 'src="' . $image_src . '" srcset="' . $image_srcset . '" sizes="(max-width: ' . $max_width . ') 100vw, ' . $max_width . '"';
	}
}
?>  

<img class="img-class" <?php ccd_responsive_images( get_field( 'image_field' ), 'thumb-size', '640px' ); ?> />


// responsive srcset background images with styles inline

<?php
      
function responsive_srcset_bg_images_with_styles($attachment_id, $selector, $page_padding = 0)
{
    $srcset = wp_get_attachment_image_srcset($attachment_id);
    $sets   = explode(', ', $srcset);

    if (is_array($sets)) {
        echo '<style>';

$thumb = wp_get_attachment_image_src($attachment_id, 'full');
$url = $thumb['0'];
echo $selector; ?> {
background-image: url(<?php echo $url; ?>);
}
<?php
$smallest_image_url = '';
$smallest_width = 9999;
$min_width = 0;

foreach ($sets as $set) {
list($url, $width) = explode(' ', $set);
if ($smallest_width > $width) {
$smallest_image_url = $url;
}
$width = str_replace('w', '', $width) + $page_padding;
?>
@media (min-width: <?php echo $min_width ?>px) and (max-width: <?php echo $width; ?>px) {
<?php echo $selector; ?> {
background-image: url(<?php echo $url; ?>);
}
}
<?php $min_width = $width+1;
}
echo '</style>';
}
}

?>

<?php
$image = get_field('hero_image');
$selector = ".hero-image";
responsive_srcset_bg_images_with_styles($image, $selector);
?>
<section class="hero-image">
</section>

//