0

Is it possible to get the URL, height and width of an image where the height and width are as a minimum the size I specify?

wp_get_attachment_image_src() almost does this, but not quite, grabbing instead the image where either one of the height or width is as a minimum the size I specify.

Example

For example this -> wp_get_attachment_image_src(get_the_ID(), array(208,208)); will return these results -

array (
  0 => 'http://localhost/wp-content/uploads/2014/04/image-name-300x168.jpg',
  1 => 208,
  2 => 116,
  3 => true,
)

As you can see, the height is less than 208, so when I display the image using those attributes it becomes stretched.

so in the case of the above I would actually require WP to find the next size image and return these results -

array (
  0 => 'http://localhost/wp-content/uploads/2014/04/image-name-672x372.jpg',
  1 => 376,
  2 => 208,
  3 => true,
)

Naturally I don't just want to grab the original (thus largest) image as that will unnecessarily eat bandwidth and cause the page load to be slower.

Background

In case you are wondering why I require this, I am displaying 4x images in a row in a square container (208x208). The images are both horizontally and vertically centered, and I need the images to fill the container while being as small as possible.

Code

<?php
if($this->items->have_posts()) : while($this->items->have_posts()) : $this->items->the_post();

        $last = ($this->is_last_on_line()) ? 'last' : false;
        $media_preview = wp_get_attachment_image_src(get_the_ID(), array(208,208));
        $sizing = ($media_preview[1] >= $media_preview[2]) ? 'height="208"' : 'width="208"';                
?>
        <div id="post-<?php the_ID(); ?>" class="preview-container <?php echo $last; ?>">   
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <img src="<?php echo $media_preview[0]; ?>" <?php echo $sizing; ?> />
            </a>
        </div>
<?php
    endwhile;
endif;
wp_reset_query();
1

If you have the size of the square container before hand as you do, 208x208px then why not just add a custom image size to your functions file and call that image size in your template.

Add this to your themes functions.php:

add_image_size( 'custom-size', 208, 208, true );

if you are running WordPress 3.9 you can use cropping as well so you could use it like this:

add_image_size( 'custom-size', 220, 220, array( 'center', 'center' ) );

Then call it in your template file:

$media_preview = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'custom-size') );
  • Thanks for the reply. I've already done just what you suggested for the add_image_size() in relation to cropping, which is fine going forward. However this unfortunately no good for images that had already been added before that size existed. – David Gard May 21 '14 at 16:47
  • Not to worry, use this plugin by Viper007bond,Regenerate Thumbnails . I use it all the time, its an absolute life saver! wordpress.org/plugins/regenerate-thumbnails – Matt Royal May 22 '14 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.