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.