Featured Images in WordPress

css-background-result.html

<div class="some-class" style="background:url(http://example.com/path/to/image.jpg)"></div>

css-background.php

<?php
  $feat_id = get_post_thumbnail_id();
  $img = wp_get_attachment_image_src( $feat_id, 'thumbnail' );
  $src = $img[0];
?><div class="some-class" style="background:url(<?php
  echo esc_attr( $src );
?>)"></div>

helper-functions.php

<?php

/**
 * Returns whether the post whose id is $id uses an external featured image or not.
 * 
 * @param  $id  int  the ID of the post.
 * 
 * @return  boolean  whether the post whose id is $id uses an external featured image or not.
 */
function uses_nelioefi( $id ) {
  $image_url = nelioefi_get_thumbnail_src( $id );
  if ( $image_url === false ) {
    return false;
  } else {
    return true;
  }
}

/**
 * Returns the URL of the external featured image (if any). False otherwise.
 * 
 * @param  $id  int  the ID of the post.
 * 
 * @return  string|boolean  the URL of the external featured image (if any). False otherwise.
 */
function nelioefi_get_thumbnail_src( $id ) {
  $image_url = get_post_meta( $id, '_nelioefi_url', true );
  if ( ! $image_url || strlen( $image_url ) == 0 ) {
    return false;
  }
  return $image_url;
}

/**
 * Returns an IMG tag with the URL of the external featured image (if any). False otherwise.
 * 
 * @param $id    int                   the ID of the post.
 * @param $size  string|array|boolean  the dimensions of the featured image to use.
 * @param $attr  array                 additional attributes.
 * 
 * @return  string|boolean  an IMG tag with the URL of the external featured image (if any). False otherwise.
 */
function nelioefi_get_html_thumbnail( $id, $size = false, $attr = array() ) {
  if ( uses_nelioefi( $id ) === false ) {
    return false;
  }

  $image_url = nelioefi_get_thumbnail_src( $id );

  $width = false;
  $height = false;
  $additional_classes = '';

  global $_wp_additional_image_sizes;
  if ( is_array( $size ) ) {
    $width = $size[0];
    $height = $size[1];
  }
  else if ( isset( $_wp_additional_image_sizes[ $size ] ) ) {
    $width = $_wp_additional_image_sizes[ $size ]['width'];
    $height = $_wp_additional_image_sizes[ $size ]['height'];
    $additional_classes = 'attachment-' . $size . ' ';
  }

  if ( $width && $width > 0 ) {
    $width = "width:${width}px;";
  } else {
    $width = '';
  }

  if ( $height && $height > 0 ) {
    $height = "height:${height}px;";
  } else {
    $height = '';
  }

  if ( isset( $attr['class'] ) ) {
    $additional_classes .= $attr['class'];
  }

  $alt = get_post_meta( $id, '_nelioefi_alt', true );
  if ( isset( $attr['alt'] ) ) {
    $alt = $attr['alt'];
  }
  if ( !$alt ) {
    $alt = '';
  }

  if ( is_feed() ) {
    $style = '';
    if ( isset( $attr['style'] ) ) {
      $style = 'style="' . $attr['style'] . '" ';
    }
    $html = sprintf(
      '<img src="%s" %s' .
      'class="%s wp-post-image nelioefi" '.
      'alt="%s" />',
      $image_url, $style, $additional_classes, $alt );
  }
  else {
    $html = sprintf(
      '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" ' .
      'style="background:url(\'%s\') no-repeat center center;' .
      '-webkit-background-size:cover;' .
      '-moz-background-size:cover;' .
      '-o-background-size:cover;' .
      'background-size:cover;' .
      '%s%s" class="%s wp-post-image nelioefi" '.
      'alt="%s" />',
      $image_url, $width, $height, $additional_classes, $alt );
  }

  return $html;
}

/* ... */

hook-to-wordpress.php

<?php

/* ... */

add_filter( 'post_thumbnail_html', 'nelioefi_replace_thumbnail', 10, 5 );
function nelioefi_replace_thumbnail( $html, $post_id, $post_image_id, $size, $attr ) {
  if ( uses_nelioefi( $post_id ) ) {
    $html = nelioefi_get_html_thumbnail( $post_id, $size, $attr );
  }
  return $html;
}

/* ... */

image-broken-aspect-ratio.html

<img src="http://example.com/path/to/image.jpg" width="50" height="50">

image-tag.html

<img src="http://example.com/path/to/image.jpg" />

manual-image-tag-result.html

<img src="http://example.com/path/to/image.jpg" />

manual-image-tag.php

<?php
  $feat_id = get_post_thumbnail_id();
  $img = wp_get_attachment_image_src( $feat_id, 'thumbnail' );
  $src = $img[0];
?><img src="<?php
  echo esc_attr( $src );
?>" />

nelio-efi.html

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  style="background:url(http://example.com/path/to/image.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    width:50px;
    height:50px;"
    class="attachment-post-thumbnail wp-post-image nelioefi"
    alt="Featured Image Example" />

Updating NelioEFI.md

This gist is used in The Day I Tried to Update Nelio External Featured Image.

wordpress-image-tag-result.php

<img
  width="50" height="50"
  src="http://example.com/path/to/image.jpg"
  class="attachment-post-thumbnail wp-post-image"
  alt="Featured Image Example" />

wordpress-image-tag.php

<?php
  the_post_thumbnail();
?>