Focal Point Cropping Picture Tag for Post Thumbnail #wp

focal-point-cropping-picture-tag-for-post-thumbnail.php

<?php
// UPDATE: This may also be accomplished with object-postion css property depending on your needs. Check that first.

/**
 * Focal Point Cropping using post_thumbnail(); featured image of page.
 * - displays post_thumbnail() at different crops at different breakpoints
 * - using the <picture></picture> tag srcset to returnt the correct img
 * - decide on image widths and change crop sizes
 * - edit source "media" widths to coorespond with crop sizes
 */

// Add crop sizes to functions.php.
add_image_size( 'cropped-front-page-hero-xs', 400, 667, array( 'right', 'top' ) );
add_image_size( 'cropped-front-page-hero-sm', 600, 667, array( 'right', 'top' ) );
add_image_size( 'cropped-front-page-hero-md', 800, 667, array( 'right', 'top' ) );
add_image_size( 'cropped-front-page-hero-lg', 1000, 667, array( 'right', 'top' ) );
add_image_size( 'cropped-front-page-hero-xl', 1366, 667, true );

/**
 * Get the id, alt, title, urls of post_thumbnail.
 * - [0] returns the image url from array
 * - wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-xl' )[0]
 * - See docs - https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/#user-contributed-notes
 */
$img_id     = get_post_thumbnail_id();
$img_alt    = get_post_meta( $img_id, '_wp_attachment_image_alt', true );
$img_title  = get_the_title( $img_id ) ? get_the_title( $img_id ) : $img_alt;
$img_url_xs = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-xs' )[0];
$img_url_sm = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-sm' )[0];
$img_url_md = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-md' )[0];
$img_url_lg = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-lg' )[0];
$img_url_xl = wp_get_attachment_image_src( $img_id, 'cropped-front-page-hero-xl' )[0];

?>
<figure class="feature-wrapper">
	<picture>
		<source type="image/jpg"
			media="(min-width: 1001px)"
			srcset="<?php echo esc_url( $img_url_xl ); ?>"
			alt="<?php echo esc_attr( $img_alt ); ?>"
			title="<?php echo esc_attr( $img_title ); ?>" >

		<source type="image/jpg"
			media="(min-width: 801px) and (max-width: 1000px)"
			srcset="<?php echo esc_url( $img_url_lg ); ?>"
			alt="<?php echo esc_attr( $img_alt ); ?>"
			title="<?php echo esc_attr( $img_title ); ?>" >

		<source type="image/jpg"
			media="(min-width: 601px) and (max-width: 800px)"
			srcset="<?php echo esc_url( $img_url_md ); ?>"
			alt="<?php echo esc_attr( $img_alt ); ?>"
			title="<?php echo esc_attr( $img_title ); ?>" >

		<source type="image/jpg"
			media="(min-width: 421px) and (max-width: 600px)"
			srcset="<?php echo esc_url( $img_url_sm ); ?>"
			alt="<?php echo esc_attr( $img_alt ); ?>"
			title="<?php echo esc_attr( $img_title ); ?>" >

		<source type="image/jpg"
			media="(max-width: 420px)"
			srcset="<?php echo esc_url( $img_url_xs ); ?>"
			alt="<?php echo esc_attr( $img_alt ); ?>"
			title="<?php echo esc_attr( $img_title ); ?>" >

		<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php echo esc_attr( $img_alt ); ?>"
		title="<?php echo esc_attr( $img_title ); ?>" >
	</picture>
</figure>
<?php