Skip to content

Instantly share code, notes, and snippets.

@atelierbram
Last active September 5, 2021 12:05
Show Gist options
  • Select an option

  • Save atelierbram/ca64871d7cef28eeb6cc03cdce9af3fc to your computer and use it in GitHub Desktop.

Select an option

Save atelierbram/ca64871d7cef28eeb6cc03cdce9af3fc to your computer and use it in GitHub Desktop.
WordPress Thumbnail Image
<?php $imgPlaceholder3x2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAAEElEQVR42mM88J8BCBghFAAfUgOBvlG2dAAAAABJRU5ErkJggg==";
if( !empty(get_the_post_thumbnail()) ) {
  the_post_thumbnail( 'post-thumbnail', array(
    'alt' => the_title_attribute( array(
      'echo' => false,
    ) ),
    'src' => $imgPlaceholder3x2,
    'data-src' => get_the_post_thumbnail_url(),
    'loading' => 'lazy',
    'data-test' => 'that',
  ) );
}
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=\'%23C0C0C0\'/%3E%3C/svg%3E" />';
} ?>   

or

<?php $imgPlaceholder3x2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAAEElEQVR42mM88J8BCBghFAAfUgOBvlG2dAAAAABJRU5ErkJggg=="; ?>
  <figure class="grid-projects_item-figure">
    <?php if( !empty(get_the_post_thumbnail()) ) {
    $feat_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "large", true);
    $image_alt = trim(strip_tags( $post->post_title ));
    $image_width =  (($feat_image[1]));
    $image_height = (($feat_image[2])); ?>
    <img src="<?= $imgPlaceholder3x2; ?>" data-src="<?php echo (($feat_image[0]))?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image <?php if ($image_height > $image_width): ?>img-portrait<?php else: ?>img-landscape<?php  endif; ?>" alt="<?php echo (($image_alt)) ?>" width="<?= $image_width; ?>" height="<?= $image_height; ?>" />
    <?php  } else { ?><img src="<?= $imgPlaceholder3x2; ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" width="1200" height="800" /><?php } ?>
     <figcaption class="grid-projects_item-caption"><?php if( !empty(get_the_post_thumbnail_caption()) ): the_post_thumbnail_caption(); else: the_title(); endif; ?></figcaption> 
</figure>       
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment