Skip to content

Instantly share code, notes, and snippets.

@atelierbram
Last active September 5, 2021 13:06
Show Gist options
  • Save atelierbram/da36b73a927c895f4d3a2d93bb27bc56 to your computer and use it in GitHub Desktop.
Save atelierbram/da36b73a927c895f4d3a2d93bb27bc56 to your computer and use it in GitHub Desktop.
Set data-src attribute in a function for lazy-loading of image (WordPress)
function rchv_projects_link() { ?>
<a class="grid_item-link gallery_item-link" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
<?php $imgPlaceholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk2A8AAMUAwUPJ2C4AAAAASUVORK5CYII="; ?>
<figure class="grid_item-figure gallery_item-figure">
<?php if( !empty(get_the_post_thumbnail()) ) {
the_post_thumbnail( 'post-thumbnail', array(
'alt' => the_title_attribute( array(
'echo' => false,
) ),
'src' => $imgPlaceholder,
'data-src' => get_the_post_thumbnail_url(),
) );
} else {
echo '<img src="data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'1200\' height=\'800\' viewBox=\'0 0 1200 800\'%3E%3Crect width=\'1200\' height=\'800\' fill=\'%23AAA\'/%3E%3C/svg%3E" />';
}
$img_caption = get_field('img_caption'); ?>
<figcaption class="grid_item-caption gallery_item-caption"><?php if( $img_caption ): the_field('img_caption'); endif; ?></figcaption>
</figure>
</a>
<?php }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment