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?
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!
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;}
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
Michael Caputo answers:
You should be able to just remove the width and height attribute from the image tag.
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.
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);