Ask your WordPress questions! Pay money and get answers fast! (more info)

Responsive website - Images don't appear responsive

  • SOLVED

Hello All:

I have the [[LINK href=" (http://demo.designmd.net/canowp/) "]]Cano Theme[[/LINK]] from ThemeForest. The featured image reacts to responsive design when viewed on an iPhone, but any additional image posted within the blog post is not.

Here is an example of a blogpost with issue ([[LINK href="http://jacobbergmeier.com/2012/happy-1st-birthday-lj/"]]here[[/LINK]])

Can someone help me fix this issue?

Answers (6)

2012-08-13

Hai Bui answers:

Add this to your css file:

.blog-single img {
max-width: 100%;
height: auto;
}


Jacob Bergmeier comments:

Where would I put that?

<?php global $pag, $post, $paged, $data; ?>

<!-- BEGIN: page title -->
<div class="page-title">
<div class="wrapper">
<div class="ptitle">
<h2><?php echo get_post_meta( $pag->ID, '_cano_page_title', true );?></h2>
<p><?php echo get_post_meta( $pag->ID, '_cano_page_subtitle', true )?> </p>
</div>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Blog Category") ) : ?>
<?php endif; ?>

<div class="clearfix"></div>
</div>
</div><!-- END: page title -->

<div class="wrapper blog-page" id="blog-page">
<div class="pblog">
<div class="blog-load">

<?php
$type = 'post';
$pp_per_page = $data['blog_posts_per_page'];

if($data['show_new_post'])$pp_per_page++;

$args=array(
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => $pp_per_page,
'paged' => $paged,
);

$wp_query = new WP_Query($args);

if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post();
$c++;

if($c==1 && $paged==1 && $data['show_new_post']) { ?>

<!-- BEGIN: new post -->
<div class="new-post clearfix" id="post-<?php the_ID(); ?>">
<div class="new-blog-post">
<?php
if (has_post_thumbnail($post->ID, 'large')){
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<img src="'.get_template_directory_uri().'/library/timthumb.php?src='. $image_url[0] .'&h=309&w=465&zc=1" alt="'. get_the_title() .'" class="scale"/>';
}
?>

<h2><a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<?php if(!$data['hide_blog_meta']){?>
<p class="blog-meta">By <?php the_author(); ?> - On <?php the_time('M d'); ?> - In <?php the_category(', '); ?> - With <?php comments_popup_link( '0 Comment', '1 Comment', '% Comments'); ?></p>
<?php } ?>
<p><?php cano_max_charlength(760); ?></p>
<a href="<?php echo get_permalink(); ?>" class="read-more"><?php echo $data['blog_read_more'] ?></a>
<div class="clear"></div>
</div>
</div><!-- END: new post -->

<?php }
else { ?>
<!-- BEGIN: blog post -->
<div class="one-two blog-last" id="post-<?php the_ID(); ?>">
<div class="blog-post">
<?php
if (has_post_thumbnail($post->ID, 'large')){
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<img src="'.get_template_directory_uri().'/library/timthumb.php?src='. $image_url[0] .'&h=196&w=164&zc=1" alt="'. get_the_title() .'" class="scale" />';
}
?>
<h2><a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<?php if(!$data['hide_blog_meta']){?>
<p class="blog-meta">By <?php the_author(); ?> - On <?php the_time('M d'); ?> - In <?php the_category(', '); ?> - With <?php comments_popup_link( '0 Comment', '1 Comment', '% Comments'); ?></p>
<?php } ?>
<p><?php cano_max_charlength(170); ?></p>
<a href="<?php echo get_permalink(); ?>" class="read-more"><?php echo $data['blog_read_more'] ?></a>
<div class="clear"></div>
</div>
</div><!-- END: blog post -->
<?php } ?>

<?php endwhile; endif; ?>

<div class="clear"></div>

<!-- BEGIN: blog paginate -->
<?php cano_pagination_blog($pages = '', $range = 2); ?>
<!-- END: blog paginate -->

</div>
</div>
</div>


Hai Bui comments:

Add it to style.css


Jacob Bergmeier comments:

This did it. Problem solved!

2012-08-13

Navjot Singh answers:

Wrap all your post images in the class "scale" when posting which will help your images to resize according to the device.

For example this image code in your post,

<img class="aligncenter size-full wp-image-2364" title="jacobbergmeier" src="http://jacobbergmeier.com/wp-content/uploads/2012/08/jacobbergmeier.jpg" alt="" width="900" height="598">

Change it to

<img class="aligncenter size-full wp-image-2364 scale" title="jacobbergmeier" src="http://jacobbergmeier.com/wp-content/uploads/2012/08/jacobbergmeier.jpg" alt="" width="900" height="598">

Better still change this line in your style.css

.blog-single img{margin-bottom: 15px;}

to

.blog-single img{margin-bottom: 15px; max-width: 100%; height: auto;}

2012-08-13

Gabriel Reguly answers:

Hi Jacob,

Try changing the class of the images you added to be like the featured image, also remove the width and height from them

Featured:
<img class="scale" alt="Happy 1st Birthday, LJ" src="http://jacobbergmeier.com/wp-content/themes/cano/library/timthumb.php?src=http://jacobbergmeier.com/wp-content/uploads/2012/08/jacobbergmeier.jpg&h=530&w=948&zc=1">

Other images:

<img class="aligncenter size-full wp-image-2364" width="900" height="598" alt="" src="http://jacobbergmeier.com/wp-content/uploads/2012/08/jacobbergmeier.jpg" title="jacobbergmeier">


Regards,
Gabriel

2012-08-13

Michael Caputo answers:

You should be able to just remove the width and height attribute from the image tag.

2012-08-13

Ross Wilson answers:

Looks like you need to add the class="scale" attribute to each of your images. Hover over the images, click edit, select the advanced settings tab and then put scale in the CSS Class textbox.

2012-08-13

Basilis Kanonidis answers:

Hi,


You do not need to do it manually, on every image.

Here, how you will have all your images, responsive :-)



function my_get_attachment_link($html) {
$postid = get_the_ID();
$html = str_replace('<a', '<a class="scale"', $html); return $html; }
add_filter('wp_get_attachment_link', 'my_get_attachment_link', 10, 1);