Tuesday, March 3, 2015

Applying Bootstrap Styles to WordPress Feature Image

For WordPress themes that are based on Bootstrap framework, applying styles such as circled, rounded image or thumbnails provides one way to enhance featured image appearances.

In the screenshot below, a feature image is displayed together with a loop post:

I've used the function the_post_thumbnail() to display the feature image:








Bootstrap circled image style can be applied to the featured image by using the arguments parameter to pass the corresponding class style.


The function the_post_thumbnail() was modified to take 'thumbnail' as the first parameter to define the size and 'array(,,,' to define the attributes. Take note of the Bootstrap image circle style added to the class

The code for the post loop together with the Bootstrap style on the featured image is listed below:

<?php if(have_posts()): while (have_posts()): the_post(); ?>
  <div class="col-lg-6" style="margin-bottom:5px;">
    <div class="media">
      <a href="#" class="pull-left">
        <?php the_post_thumbnail('thumbnail', array( 'class' => 'media-object img-circle' )); ?>
      </a>
    <div class="media-body">
      <h3 class="media-heading"><?php the_title(); ?>. <small><?php echo(get_the_excerpt()); ?></small></h3>
    </div>
    </div>
  </div>
<?php endwhile; ?>