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

issue with thumbnail sizes WordPress

  • SOLVED

I have a theme which uses the featured image to display the image on the homepage, and on the post page. the homepage image is meant to be exactly half the size of the image on the main page. Seems to work with some images, and not with others... any ideas?

site is here: http://onehundredprojects.com/

there's two image based posts on the home page.. one which has worked fine (BIENNALE OF LANDSCAPE URBANISM 2010) and one which hasn't (Weirder)

when I upload the images, I ensure that the width is set to full size, and yet for some reason, on the landscape image, the image is cropping to 150 x 150, and the width and height are being set in the html to 107 x 107. In fact, it's width on the homepage should be 558px.

Here's the index loop:

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if (have_posts()) : ?>
<div id="sort">
<div class="box homepagebox homie">
<h2>Projects</h2>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<!--[if IE ]>
<div class="ie">
<![endif]-->
<!--[if !IE]>-->
<div>
<!--<![endif]-->
<a class="selecta" href="javascript:void(0);" onclick="wp_showhide('mytest')">SELECT</a>
</div>
<div id="mytest" style="display:none;"><ul><?php wp_list_categories( 'exclude=1&title_li=' ); ?></ul></div>
</div> <!-- homepagebox -->
<?php while (have_posts()) : the_post(); ?>
<div class="box <?php echo get_post_meta($post->ID, width, true); ?>">
<?php
if ( has_post_thumbnail() ){ ?>
<a href="<?php the_permalink() ?>">
<?php
$thumb = get_the_post_thumbnail();
$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];
$sizes = getimagesize($theSrc);
$ratio = 0.5;
$thumbheight=$sizes[1]*$ratio;
$thumbwidth=$sizes[0]*$ratio;
the_post_thumbnail(array($thumbwidth,$thumbheight), array("class" => "thumb"));
?>
</a>
<?php } ?>

<div class="restrain" style="width:<?php echo get_post_meta($post->ID, width, true); ?>px">
<h2><?php the_title(); ?></h2>
<?php the_content('<span class="morelink"> >>></span>'); ?></div>
<p class="datemeta">Published <?php the_time('jS F Y') ?></p>
</div>
<?php endwhile; ?>
</div><!-- #sort -->

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older') ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer <span class="meta-nav">&rarr;</span>') ); ?></div>
</div><!-- #nav-below -->
<?php endif; ?>

<?php else : ?>
<div id="sort">
<div class="box">
<h2>Sorry, no posts were found</h2>
<?php get_search_form(); ?>
</div>
</div><!-- #sort -->
<?php endif; ?>


thanks in advance for your expert input!

Answers (6)

2011-02-07

Sébastien | French WordpressDesigner answers:

send me your folder "ed-wall-brandy" with all the content, i look at this.
maildeseb @ gmail.com


Dave Smith comments:

just posted it to you Seb, thanks


Sébastien | French WordpressDesigner comments:

Dave,
just try to replace
$thumb = get_the_post_thumbnail();
by
$thumb = get_the_post_thumbnail($post->ID,'');


Sébastien | French WordpressDesigner comments:

If you modify your code like i write above, you have yet a problem and i explain to you :

this code the_post_thumbnail(array($thumbwidth,$thumbheight), array("class" => "thumb")); display the image of your post. In a format (thumbnail, medium, or large). <strong>But which format in your case ?</strong>

If your settings in backoffice are this :

thumbnails : 50 x 50 (checkox is unchecked : no crop)
medium : 500 x 500
large : 5000 x 5000



<strong>1/experience 1</strong>


all the experience [[LINK href="http://demo1.archiparmentier.com/"]]here[[/LINK]]


if you uploads an image test1.jpg (w=225 h=150)
wordpress save the image test1.jpg and generate one image only test1-50x33.jpg

in this case,
$thumbheight=150*$ratio=75
$thumbwidth=225*$ratio=112;
your code display test1.jpg (because test1-50x33.jpg is more small)
and add in html width=112 and height=75 to have exactly the size you want.

<strong>2/experience 2</strong>

if you uploads an image test2.jpg more small than test1.jpg
test2.jpg : w=75 h=50
wordpress save the image test2.jpg and generate one image only test2-50x33.jpg

in this case
$thumbheight=50*$ratio=25
$thumbwidth=75*$ratio=37;
your code display <strong>not</strong> test2.jpg but test2-50x33.jpg because test2-50x33.jpg is the format just most big than the format you want display (37x25)

In this case, your code display the format "thumbnail" because this format is better.

and, of course, wp add in html width="37" height="25" to have exactly the size you want.

<strong>3/conclusion</strong>

the format (thumbnail, medium, large) displayed by the code the_post_thumbnail(array($thumbwidth,$thumbheight), array("class" => "thumb"));depends of the format of your original image.

and, if you don(t want that your image are not croping (like [[LINK href="http://onehundredprojects.com/wp-content/uploads/2011/02/roaming-forest-stencil1-150x150.jpg"]]that[[/LINK]] ) when wp display the format "thumbnail", you must unchecked the crop in the settings /wp-admin/options-media.php


Sébastien | French WordpressDesigner comments:

and, if you don't want that your image are cropped (like that ) when wp display the format "thumbnail", you must unchecked the crop in the settings /wp-admin/options-media.php


Sébastien | French WordpressDesigner comments:

in your case, the code display the format "thumbnail" for this image : [[LINK href="http://onehundredprojects.com/wp-content/uploads/2011/02/roaming-forest-stencil1.jpg"]]http://onehundredprojects.com/wp-content/uploads/2011/02/roaming-forest-stencil1.jpg[[/LINK]]
because the dimensions of this image are : 1106 x 214

so
$thumbheight=1106*$ratio=553
$thumbwidth=214*$ratio=<strong>112</strong>;

so the format "thumbnail" (150x150) is displayed.
that's not beautiful because the crop is checked !




Dave Smith comments:

Aarrgghh....can't believe it was the pesky check box!! I did think it was weird that i had this working fine on a dev site, and yet when it moved over to the client site it wasn't working.

Not entirely sure I've understood everything you've written, but i'm going to re-read it until I do!

thanks SOOO much for taking the time to look through the theme Seb!

2011-02-07

Oleg Butuzov answers:

change
$thumb = get_the_post_thumbnail();
to
$thumb = get_the_post_thumbnail('original');


Oleg Butuzov comments:

All this sizes is writes at settings -> media section.
whan you call the <strong>get_the_post_thumbnail</strong> by default it ask for 'post-thumbnail' size witch is thumbnail size if specialy created size not found.


the_post_thumbnail(array($thumbwidth,$thumbheight), array("class" => "thumb"));

as for this... its a weird... i did never saw the direct call for the height and weight, insted used call of defined size.

example in next comment.


Oleg Butuzov comments:

ass example, add this to your functions.php

add_action('after_setup_theme', 'after_setup_theme_clb');
function after_setup_theme_clb(){
add_image_size( 'page-portrait', 160, 217);
add_image_size( 'page-portrait-croped', 160, 217, true);
}


and in code of your tempaltes you can call

<?php the_post_thumbnail('page-portrait'); ?>
or
<?php the_post_thumbnail('page-portrait-croped'); ?>


Dave Smith comments:

Hi Oleg, that kind of breaks things, getting this error message:
Warning: getimagesize() [function.getimagesize]: Filename cannot be empty in /home/onehund/public_html/wp-content/themes/ed-wall-brandy/loop-index.php on line 29

I've left it live for you to see. I'm not sure the second part of your comment is relevant... whatever the original size of the featured image I upload, I need it to display at exactly half that size on the home page. I need this to be dynamic, such that I can upload ANY image size and always get it half the size on the home page.

thanks

Dave


Oleg Butuzov comments:

Dave in this case better to timthmb solution. course using a wp_srop services means using a static dimensions.


Dave Smith comments:

but I don't think timthumb provides a function for reducing an image by a specific percentage, only by pixel dimensions...

any other ideas on how this could be implemented?

2011-02-07

Denzel Chia answers:

Hi,

Why are you not using <?php the_post_thumbnail('thumbnail'); ?> instead of

<?php

$thumb = get_the_post_thumbnail();

$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";

preg_match($pattern, $thumb, $thePath);

$theSrc = $thePath[0];

$sizes = getimagesize($theSrc);

$ratio = 0.5;

$thumbheight=$sizes[1]*$ratio;

$thumbwidth=$sizes[0]*$ratio;

the_post_thumbnail(array($thumbwidth,$thumbheight), array("class" => "thumb"));

?>


You can set the thumbnail size in wordpress admin settings>media

Thanks.


Denzel Chia comments:

You can find the reference codes here. http://codex.wordpress.org/Function_Reference/the_post_thumbnail


Dave Smith comments:

see my reply to Oleg above.. i need the images to be dynamic in size.


Denzel Chia comments:

Yes, like Oleg and Gustavo mentioned. Use tim thumb if you want dynamic resized images.


Dave Smith comments:

But can tim thumb handle percentages? I'm looking to scale the image by 50% rather than crop it.

I've tried doing it in the css, but unfortunately that's not playing nicely with the jquery masonry plugin in use in the theme...


Denzel Chia comments:

Hi,

Tim thumb needs a number for width and height. Now that you have mentioned css.
I take a look at your site and found a class .box image generated by jQuery Masonry.
Put the following in your footer.php before </body> and see if it helps.

.box img {
height: 50%;
margin-bottom: 10px;
width: 50%;
z-index: 0;
}


Dave Smith comments:

not worked, it doesn't have any effect other than to stretch the existing small thumbs.

2011-02-07

Gustavo Bordoni answers:

The problem is that you are using images that are pre-registered, the solution is to use a php image cropper, like TimThumb.

http://code.google.com/p/timthumb/

from the BinaryMoon: http://www.binarymoon.co.uk/projects/timthumb/


Dave Smith comments:

I don't want the images to be cropped on the home page... just exactly half the size of which they appear on the post page.

2011-02-07

Victor Teixeira answers:

I'll give you a solution. It's a dynamic image resize and crop script I wrote that uses wp built in image handling capabilities.





/*
* Resize images dinamicaly using wp built in functions
* Victor Teixeira
*
* php 5.2+
*
* Exemple use:
*
* <?php
* $thumb = get_post_thumbnail_id();
* $image = vt_resize( $thumb, '', 140, 110, true );
* ?>
* <img src="<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />
*
* @param int $attach_id
* @param string $img_url
* @param int $width
* @param int $height
* @param bool $crop
* @return array
*/
function vt_resize( $attach_id = null, $img_url = null, $width, $height, $crop = false ) {

// this is an attachment, so we have the ID
if ( $attach_id ) {

$image_src = wp_get_attachment_image_src( $attach_id, 'full' );
$file_path = get_attached_file( $attach_id );

// this is not an attachment, let's use the image url
} else if ( $img_url ) {

$file_path = parse_url( $img_url );
$file_path = $_SERVER['DOCUMENT_ROOT'] . $file_path['path'];

//$file_path = ltrim( $file_path['path'], '/' );
//$file_path = rtrim( ABSPATH, '/' ).$file_path['path'];

$orig_size = getimagesize( $file_path );

$image_src[0] = $img_url;
$image_src[1] = $orig_size[0];
$image_src[2] = $orig_size[1];
}

$file_info = pathinfo( $file_path );
$extension = '.'. $file_info['extension'];

// the image path without the extension
$no_ext_path = $file_info['dirname'].'/'.$file_info['filename'];

$cropped_img_path = $no_ext_path.'-'.$width.'x'.$height.$extension;

// checking if the file size is larger than the target size
// if it is smaller or the same size, stop right here and return
if ( $image_src[1] > $width || $image_src[2] > $height ) {

// the file is larger, check if the resized version already exists (for $crop = true but will also work for $crop = false if the sizes match)
if ( file_exists( $cropped_img_path ) ) {

$cropped_img_url = str_replace( basename( $image_src[0] ), basename( $cropped_img_path ), $image_src[0] );

$vt_image = array (
'url' => $cropped_img_url,
'width' => $width,
'height' => $height
);

return $vt_image;
}

// $crop = false
if ( $crop == false ) {

// calculate the size proportionaly
$proportional_size = wp_constrain_dimensions( $image_src[1], $image_src[2], $width, $height );
$resized_img_path = $no_ext_path.'-'.$proportional_size[0].'x'.$proportional_size[1].$extension;

// checking if the file already exists
if ( file_exists( $resized_img_path ) ) {

$resized_img_url = str_replace( basename( $image_src[0] ), basename( $resized_img_path ), $image_src[0] );

$vt_image = array (
'url' => $resized_img_url,
'width' => $proportional_size[0],
'height' => $proportional_size[1]
);

return $vt_image;
}
}

// no cache files - let's finally resize it
$new_img_path = image_resize( $file_path, $width, $height, $crop );
$new_img_size = getimagesize( $new_img_path );
$new_img = str_replace( basename( $image_src[0] ), basename( $new_img_path ), $image_src[0] );

// resized output
$vt_image = array (
'url' => $new_img,
'width' => $new_img_size[0],
'height' => $new_img_size[1]
);

return $vt_image;
}

// default output - without resizing
$vt_image = array (
'url' => $image_src[0],
'width' => $image_src[1],
'height' => $image_src[2]
);

return $vt_image;
}





Just put this function on the functions.php file and on the theme you call the image like this (change the sizes to what you need):



<?php
$thumb = get_post_thumbnail_id();
$image = vt_resize( $thumb, '', 140, 110, true );
?>
<img src="<?php echo $image[url]; ?>" width="<?php echo $image[width]; ?>" height="<?php echo $image[height]; ?>" />


2011-02-07

rilwis answers:

Try replace this code:

$thumb = get_the_post_thumbnail();
$pattern= "/(?<=src=['|\"])[^'|\"]*?(?=['|\"])/i";
preg_match($pattern, $thumb, $thePath);
$theSrc = $thePath[0];


with this:

$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
$theSrc = $thumb[0];