Skip to content

Instantly share code, notes, and snippets.

@bahia0019
Last active March 31, 2017 23:25
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bahia0019/cb5d43825aaf03bbc5209c4fc9c6c777 to your computer and use it in GitHub Desktop.
Save bahia0019/cb5d43825aaf03bbc5209c4fc9c6c777 to your computer and use it in GitHub Desktop.
For ACF users, creates an easy to use function that wraps your image in HTML5 <figure> adds <figcaption>. Also adds Schema markup in JSON LD. Parameters are 1. ACF field name, 2. Size, 3. Figure CSS class, 4. Figcaption CSS class.
function fsc_figure( $image, $size, $imageclass, $captionclass ){
/**
* Let plugins pre-filter the image meta to be able to fix inconsistencies in the stored data.
*
* @param string $image The ACF field name (i.e. 'your_photo_name').
* @param string $size Thumbnail size (i.e. 'Thumbnail', 'Medium', 'Large')
* @param string $imageclass The Figure class you want to use (ex: 'my-figure')
* @param string $captionclass The Figcaption class you want to use (ex: 'caption-blue')
*/
$image = get_field( $image );
$size = $size;
$thumb = $image['sizes'][ $size ];
if( !empty($image) ): ?>
<figure class="<?php echo $imageclass; ?>">
<?php echo wp_get_attachment_image( $image['ID'], $size, false, array( 'alt' => $image['alt'] ) ); ?>
<figcaption class="<?php echo $captionclass; ?>">
<?php echo $image[ 'caption' ]; ?>
</figcaption>
</figure>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ImageObject",
"author": "<?php the_author(); ?>",
"contentUrl": "<?php echo $thumb; ?>",
"datePublished": "<?php echo $image[ 'created_timestamp' ]; ?>",
"description": "<?php echo $image[ 'alt' ]; ?>",
"name": "<?php echo $image[ 'title' ]; ?>",
"copyright": "<?php echo $image[ 'copyright' ]; ?>"
}
</script>
<?php endif;
}
@bahia0019
Copy link
Author

Thanks to @kevinwhoffman for incorporating the WordPress responsive src set.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment