Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Atlas Theme: Blurry and washed out thumbnails in galleries WordPress

Hi all,

I've recently launched this website on an Atlas template:

http://www.lillipippins.com

I notice the gallery thumbnail images are, in some cases, blurry and washed out in terms of colour contrast. (See Designs, Greetings and Merchandise gallery pages) You will see the difference when you click on an enlargement.

Even though I have used separate thumbnails to enlargements, the image files have still been prepared exactly the same so the sharpness and colour should be identical.

The weird thing is, some of the thumbnails are sharp, others are blurred. But all of them have the same colour washout issue.

Any ideas on how to get the thumbnail and the enlargement consistent?

I've included the original donkey thumbnail which is what is being uploaded to the site.

I've also included the same image when dragged from the site.
The difference is clear to see.

Cheers
Pete

Answers (6)

2012-10-15

Kyle answers:

Can you post a link or list where one of the blurry thumbnails is?

2012-10-15

Bryan Headrick answers:

I don't really see any blurriness, but I know that is usually due to images not being properly resized - then being resized by html or css. I noticed that these thumbnails are all being resized via timthumb. You'd be better off replacing the reference to timthumb with actual resized images. You could use [[LINK href="http://wordpress.org/extend/plugins/simple-image-sizes/"]]simple image sizes [[/LINK]]to create the 260x260 size, and then reference the image size in your template file.

So replace this
bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=350&zc=1

with this

wp_get_attachment_image_src( get_post_thumbnail_id(), 'th260', $icon );

(assuming you set the name of the size to th260 - (you'd need to [[LINK href="http://wordpress.org/extend/plugins/regenerate-thumbnails/"]]regenerate thumbnails [[/LINK]]first)

2012-10-15

Arnav Joy answers:

which image you are referring to as bad , can you show original thumbnail image

2012-10-16

Jatin Soni answers:

As other says it is hard to see blurriness in any image until you post two different images to compare. However there could be the issue with file compression too. So if that is the issue than you can try with one or two images by saving with high quality settings in Photoshop or any of your image editor software to just test either that is the issue or what.

2012-10-16

Abdelhadi Touil answers:

Hi.
You are right, I can see the difference. I think if you can use the builtin wordpress thumbnail (not using timthumb) then images will be better, because I'v compared resized image by wordpress and the other one resized by timthumb.php and I think the second one is burry.
So we should replace the timthum tumbnail in the theme by the wordpress thumbnail. I think withtout having access to your theme files I can't do that, or if you can do it yourself, then try to use this plugin:

[[LINK href="http://wordpress.org/extend/plugins/get-the-image/"]]http://wordpress.org/extend/plugins/get-the-image/[[/LINK]]

and then use this code to display the thumbnail image (replace the timthumb code with it):

<?php if ( function_exists( 'get_the_image' ) ) {
get_the_image ( array(
'order_of_image' => 1,
'default_size' => 'thumbnail',
'width' => 260,
'height' => 260
) );
} ?>


Make sure to make the tumbnail size in wordpress setting equal to 260x260. I think you should regenerate your thumbnail, so use this plugin for that:

[[LINK href="http://wordpress.org/extend/plugins/force-regenerate-thumbnails/"]]http://wordpress.org/extend/plugins/force-regenerate-thumbnails/[[/LINK]]

Good luck.


pete comments:

I have had the theme amended so that I can upload different thumbnails and enlargements.
So as I understand it timthumb is not creating the thumbnail, I am uploading the thumbnail myself as a 260 x 260 image.

This is why I am so confused as I am uploading a sharp thumbnail that is the correct size yet the site still shows some of them blurry.


Abdelhadi Touil comments:

But you are still using timthumb.php script, what I suggest you to do is to use just the builtin wordpress thumbnail. Sorry my English isn't as good as it should be, so hope you understand me. If you want try to send me your theme and I can make changes for you then try it to see the difference.


pete comments:

As I've uploaded my own specific thumbnails that are 260 x 260 do I still need to regenerate the thumbnails?


Abdelhadi Touil comments:

But your theme isn't using your thmbnails image, it's still using tumbnails generated by timthumb.php script, that's why I asked you to remove the timthumb code and replace it with the plugin and the code I'v gived you above.


pete comments:

OK, thanks Abdelhadi

I've resized my thumbnails however I need to include you code into my file.

I've included the current code below, can you please let me know where I need to insert your code.

Thanks


<!-- Begin content -->
<div id="page_content_wrapper">

<?php
$pp_gallery_width = 260;
$pp_gallery_height = 260;
?>

<div class="inner">

<div class="inner_wrapper">

<div class="sidebar_content full_width">
<h1 class="cufon"><?php echo $post->post_title; ?></h1><br/>

<?php
if(!empty($post->post_content))
{
?>
<p><?php echo nl2br(stripslashes(html_entity_decode(do_shortcode($post->post_content)))); ?></p>
<br/>
<?php
}
?>

<?php
foreach($all_photo_arr as $key => $photo)
{
$small_image_url = get_stylesheet_directory_uri().'/images/000_70.png';
$hyperlink_url = get_permalink($photo->ID);

if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;

$small_image_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_url[0].'&amp;h='.$pp_gallery_height.'&amp;w='.$pp_gallery_width.'&amp;zc=1';
}

$last_class = '';
if(($key+1)%3==0)
{
$last_class = 'last';
}
?>

<div class="one_third <?php echo $last_class; ?> gallery3" style="margin-top:3%">
<?php
if(!empty($small_image_url))
{
$pp_display_image_title = get_option('pp_display_image_title');

$img_url = get_post_meta($photo->ID,'img_url',true);

if(!empty($img_url))
$image_url[0] = $img_url;
?>
<div class="shadow">
<div class="zoom">Enlarge</div>
</div>
<a rel="gallery" href="<?php echo $image_url[0]; ?>" <?php if(!empty($pp_display_image_title)) { ?> title="<?php echo $photo->post_title; ?>" <?php } ?>>
<img src="<?php echo $small_image_url; ?>" alt="" class="one_third_img"/>
</a>
<?php
}
?>

</div>

<?php
}
?>
</div>
</div>

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

</div>
<!-- End content -->


Abdelhadi Touil comments:

Hi.
Try to use this code insted of yours, but save a copy of your original code because I didn't test the code (I don't have the theme):
<!-- Begin content -->

<div id="page_content_wrapper">



<?php

$pp_gallery_width = 260;

$pp_gallery_height = 260;

?>



<div class="inner">



<div class="inner_wrapper">



<div class="sidebar_content full_width">

<h1 class="cufon"><?php echo $post->post_title; ?></h1><br/>



<?php

if(!empty($post->post_content))

{

?>

<p><?php echo nl2br(stripslashes(html_entity_decode(do_shortcode($post->post_content)))); ?></p>

<br/>

<?php

}

?>



<?php

foreach($all_photo_arr as $key => $photo)

{

$small_image_url = get_stylesheet_directory_uri().'/images/000_70.png';

$hyperlink_url = get_permalink($photo->ID);



if(!empty($photo->guid))

{

$image_url[0] = $photo->guid;



$small_image_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_url[0].'&amp;h='.$pp_gallery_height.'&amp;w='.$pp_gallery_width.'&amp;zc=1';

$small_image_url = get_the_image (array( 'order_of_image' => 1, 'link_to_post' => false, 'default_size' => 'thumbnail', 'width' => $pp_gallery_width, 'height' => $pp_gallery_height));

}



$last_class = '';

if(($key+1)%3==0)

{

$last_class = 'last';

}

?>



<div class="one_third <?php echo $last_class; ?> gallery3" style="margin-top:3%">

<?php

if(!empty($small_image_url))

{

$pp_display_image_title = get_option('pp_display_image_title');



$img_url = get_post_meta($photo->ID,'img_url',true);



if(!empty($img_url))

$image_url[0] = $img_url;

?>

<div class="shadow">

<div class="zoom">Enlarge</div>

</div>

<a rel="gallery" href="<?php echo $image_url[0]; ?>" <?php if(!empty($pp_display_image_title)) { ?> title="<?php echo $photo->post_title; ?>" <?php } ?>>

<img src="<?php echo $small_image_url; ?>" alt="" class="one_third_img"/>

</a>

<?php

}

?>



</div>



<?php

}

?>

</div>

</div>



</div>

<br class="clear"/>



</div>

<!-- End content -->

Make sure to have the plugin installed and activated, and to regenerate thumbnails.
For what John is saying, you are right John, but the plugin here is just to make using the thumbnails easy to use.
Good luck.


Abdelhadi Touil comments:

Sorry, this is the code (In the above one there is a duplicated variable I forgot):
<!-- Begin content -->

<div id="page_content_wrapper">



<?php

$pp_gallery_width = 260;

$pp_gallery_height = 260;

?>



<div class="inner">



<div class="inner_wrapper">



<div class="sidebar_content full_width">

<h1 class="cufon"><?php echo $post->post_title; ?></h1><br/>



<?php

if(!empty($post->post_content))

{

?>

<p><?php echo nl2br(stripslashes(html_entity_decode(do_shortcode($post->post_content)))); ?></p>

<br/>

<?php

}

?>



<?php

foreach($all_photo_arr as $key => $photo)

{

$small_image_url = get_stylesheet_directory_uri().'/images/000_70.png';

$hyperlink_url = get_permalink($photo->ID);



if(!empty($photo->guid))

{

$image_url[0] = $photo->guid;

$small_image_url = get_the_image (array( 'order_of_image' => 1, 'link_to_post' => false, 'default_size' => 'thumbnail', 'width' => $pp_gallery_width, 'height' => $pp_gallery_height));

}



$last_class = '';

if(($key+1)%3==0)

{

$last_class = 'last';

}

?>



<div class="one_third <?php echo $last_class; ?> gallery3" style="margin-top:3%">

<?php

if(!empty($small_image_url))

{

$pp_display_image_title = get_option('pp_display_image_title');



$img_url = get_post_meta($photo->ID,'img_url',true);



if(!empty($img_url))

$image_url[0] = $img_url;

?>

<div class="shadow">

<div class="zoom">Enlarge</div>

</div>

<a rel="gallery" href="<?php echo $image_url[0]; ?>" <?php if(!empty($pp_display_image_title)) { ?> title="<?php echo $photo->post_title; ?>" <?php } ?>>

<img src="<?php echo $small_image_url; ?>" alt="" class="one_third_img"/>

</a>

<?php

}

?>



</div>



<?php

}

?>

</div>

</div>



</div>

<br class="clear"/>



</div>

<!-- End content -->


pete comments:

I tried your code however it didn't work.
Should I send you the theme to have a closer look at?


Abdelhadi Touil comments:

Yes please, if you send me it I can make changes easier and test them.
Good luck.

2012-10-16

John Cotton answers:

Abdelhadi is right - TimThumb is messing up your images.

Compare these two:

http://www.lillipippins.com/wp-content/themes/Atlas/timthumb.php?src=http://www.lillipippins.com/wp-content/uploads/2012/10/LP-Designs-TH-15.jpg&h=260&w=260&zc=1

That is the image as referenced in your HTML on the designs page.

http://www.lillipippins.com/wp-content/uploads/2012/10/LP-Designs-TH-15.jpg

Is the image you uploaded. Clearly a better image.

However, I don't think you need a plugin to fix this. If you set you media sizes on the dashboard (under settings) to match (eg medium 260 x260, large 512x512, thumbnail 130x130) then the scaling that WordPress does should not hard the quality.

Then, in your theme file for the archive page showing designs, change the output code from timthumb to a file straight from WP (ie using post_thumnbnail or wp_attachment_image depending on how much control you need).