Feature Image - ar-to/WordPress-Theme GitHub Wiki

The feature image or post thumbnail can be added for all post types using the following inside functions.php. See post thumbnails add_theme_support,developer.wordpress,wpbeginner, image sizes, add_image_size() for more information. Regenerating images may also be necessary when making changes to sizes.

add_theme_support( 'post-thumbnails' );

This adds a panel inside the post & page screen towards the right. Clicking "set feature image" opens the media uploader. Adding image does not add it to the template until the following code is used which creates a <img> tag. In this case I added it to the index.php loop.

  <?php the_post_thumbnail(); ?>

Depending on the size of the image uploaded it may be necessary to specify the default size use when calling the_post_thumbnail()

//Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

Complete code within the loop

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
          <!--Markup... Display post content-->
          <h1 class="text-center">Post</h1>
          <?php the_post_thumbnail(); ?>
          <h2><a href="<?php the_permalink(); //returns url of current post ?>"><?php the_title(); //shows post title ?></a></h2>
          <?php the_content(); //add the post content ?>
      <?php endwhile; ?>

The size of the thumbnail can be changed by using the following inside functions.php but it applies to all instances of the feature image

set_post_thumbnail_size( 50, 50);

Or the following to use on a specific template or templates

// Image size for single posts
add_image_size( 'index-thumbnail', 120, 100, true );

Unfortunately, this does not work if an image needs to be responsive or have custom styling such as add the url to background-image:url();. To do this the image needs to be called and then echoed into the inline style. Since I used Bootstrap the top div has a a column and a well class to help position and identify the image better. I added this code before the loop. The <p> tag is simply in to show an element on top of the image and for future styling if desired. Refer to stack exchange, wp_get_attachment_image_src(), and get_post_thumbnail_id() for help on this.

<div class="col-md-12 well">
  <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="post" class="feature-image" style="background-image: url('<?php echo $thumb['0'];?>')">
<p>text demo</p>
</div>
</div>

I then styled the feature-image class with the following css since it did not look right by itself and I also wanted it to be responsive. The position and size helps the image to get smaller towards the center as the screen get smaller rather than towards a corner.

/*feature image*/
.feature-image{
  height: 500px;
  background-position: center;
  background-size: cover;
}

fi_1

Other code that may help but my test did not yield what I needed

<?php
//returns image url
        $image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
        echo $image;
?>
<!--echoes image url but did not show image; need more testing-->
<div id="custom-bg" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
      <div id="custom-bg" style="background-image: url('http://example.dev/wp-content/uploads/2016/12/bg_02.jpg');"></div>
    </div>
⚠️ **GitHub.com Fallback** ⚠️