Make featured image responsive

Hey guys,

I’ve found a code snippet to add a featured image to my post but I want to make it responsive. See code below:

if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  add_image_size('index-categories', 550, 400, true);
  add_image_size('page-single', 350, 350, true);
}

function InsertFeaturedImage($content) {
  global $post;
 
  $original_content = $content;
 
  if ( current_theme_supports( 'post-thumbnails' ) ) {

    if ((is_page()) || (is_single())) {
      $content = the_post_thumbnail('page-single');
      $content .= $original_content;
      } else {
      $content = the_post_thumbnail('index-categories');
      $content .= $original_content;
    }

  }
  return $content;
}
 
add_filter( 'the_content', 'InsertFeaturedImage' );

Thanks in advance!

Heads up: I formatted your post using Markdown like this, to make your code render properly:

<?php /*code here*/ ?>

As to your question, I am pretty sure Bootstrap adds max-width: 100%; or something similar to all images, making them “responsive”.

Try embedding the image without the width="" attribute by using the filter post_thumbnail_html as mentioned in the codex.

Thanks Leoj3n! I’ll give this a try.

Also see: http://getbootstrap.com/css/#overview-responsive-images

Thanks for the info!

Also this is simple usage:

<?php get_the_post_thumbnail(get_the_ID(), 'post-thumbnail', array('class' => 'img-responsive')); ?>

Thanks horo, I’ll give this a try!

Hello, placing this code in the template.php file works properly for me to get the responsive images:

  <?php the_post_thumbnail('meduim', array('class' => 'img-responsive')); ?>