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

Question

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="https://wordpress.stackexchange.com/questions/115727/%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. 207×80 or modify function and markup to take into account this issue.

Related Posts: