display thumbnail image in wordpress theme code example

Example: wordpress thumbnail image with picture tag html

<?php 
	// Get this attachment ID
	$attachment_id = get_post_thumbnail_id( $post_id );
	$image_large_src = wp_get_attachment_image_src( $attachment_id, 'large' );
?>

<picture>
	<!-- Large art direction resolutions -->
	<source media="(min-width: 50rem)"
		srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large' ); ?>"
		sizes="(min-width: 60rem) 60rem, 100vw">

	<!-- Small art direction resolutions -->
	<source 
		srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large-cropped' ); ?>"
		sizes="100vw">	

	<!-- fallback -->
	<img src="<?php echo $image_large_src[0]; ?>"
		srcset="<?php echo wp_get_attachment_image_srcset( $image_large_id, 'large' ); ?>"
		sizes="(min-width: 60rem) 60rem, 100vw"
        alt="<?php get_post_meta( $attachment_id, '_wp_attachment_image_alt', true) ?>"
	>
</picture>

Tags:

Html Example