How to crop images in a certain size only for a certain page?

Question

To me, add_image_size() increases Server-space consumption, as they increases newer image size of every image that are uploaded to a site beside the three common sizes (large, medium and thumbnail) and the original one.
So, first of all, I don't want to crop my image physically.

I'm creating a page for my blog with a custom WP_Query() with some selected posts in 3 columns.

My HTML structure is as below:

<div class="my-column<?php echo $class; echo $first; echo $one; ?>">
   <div class="the-top-thumbnail">
      <img src="<?php echo catch_that_image(); ?>" alt="top-post-image-soothtruth"/>
   </div>
   <h1 class="post-title"><?php the_title(); ?></h1>
</div> <!-- .my-column -->

Where I'm loading custom classes for 3 columns dynamically. Used a custom function to retrieve the first image URL of the post (code from here).

Problem is: as with a common <img/> tag the first images from the posts are displayed in original sizes. But for a nice design I want a cropped version of the image to display them in a custom width x height, i.e. 217px x 130px.

You know I can use a width and height parameter in the <img/> tag like:

<img src="<?php echo catch_that_image(); ?>" alt="top-post-image" width="217" height="130"/>

But that won't work and I don't want it that way, because it makes the images re-sized in bad proportion.

WHAT I WANT

I want the images to be cropped ^{(not physically - as mentioned above)} in 217px x 130px - so that they load faster, and looks smarter in a three column loop with the same sizes and proportions for a list of posts. Even though the images can be portrait or landscape - they will crop dynamically a portion of the image.

Answer 1

You don't want resize your images, you want to show them in a different size.

Right way is the one you mention, (width and height in img tag) and if it does't work it's only for some css attached to img (or maybe to all children of the col div..) so, you have to also add the css inline style for the image.

What you said about show image in wrong proportions is not true per se, because you can create the image sizes proportionally, e.g. with fixed width, and then use some css (a combination of max-height and overflow:hidden for the parent element of the image.

That said, this seems a combination of generic PHP + HTML + CSS technique and so off topic here.

Only reason why I don't vote to close and I'm answering is because with WordPress function you can get the image sizes and use it for your scope.

For what I can see, you are using the second function in the linked answer, that return only the url of the image.

But in that function, there are these lines

$img = wp_get_attachment_image_src($img);
$img = $img[0];
return $img;

Note that you are returning the first element of the value returned by wp_get_attachment_image_src, but the other two values are the width and the height of the image that are useful for you.

So, replace the three lines above with this one:

return wp_get_attachment_image_src($img);

in this whay the function return the whole 3 items array.

After that your markup became:

<?php
$imgData = catch_that_image();
$src = $imgData[0];
$width = $imgData[1];
$height = $imgData[2];
$desiredWidth = 207;
$desiredHeight = 130;
// now use a custom function to get the sizes resized proportionally:
$sizes = get_proportional_sizes($width, $height, $desiredWidth, $desiredHeight); 
?>
<div class="the-top-thumbnail" style="height:<?php echo $desiredHeight; ?>;overflow:hidden;">
<?php
$format = '<img src="%1$s" width="%2$d" height="%3$d" style="width:%2$d;height:auto;min-height:%3$d!important;" alt="top-post-image-soothtruth" />');
printf($format, $src, $sizes[0], $sizes[1]);
?>
</div>

The function get_proportional_sizes will be something:

function get_proportional_sizes($width, $height, $dWidth, $dHeight) {
  $sizes = array();
  $ratio = $width / $height;
  $sizes[0] = $dWidth;
  $sizes[1] = round ( $sizes[0] / $ratio );
  return sizes;
}

Whis workflow will shown not proportional images only if the original image has a format more horizontal than the desired.

To solve this issue, you can use a format very horizontal, e.g. 207x80 or modify function and markup to take into account this issue.