We added CSS feature image cropping to our youngest widget: Same Category Posts came up at the end of September 2015 with the version 1.0 and depends on a fork from ‘Related Posts’ Widget. The idea depends on a user request, don’t have to select the category each time but select dynamicly posts from the ‘same’ category. Ovidiu send us a lot request and featue request: Show from same category as current post instead of choosing is one his greatest.
Because we want to build lightweight, clearly structured widgets that allow the obese the widget area clearly. We opted for a standalone widget – which is designed to do one thing and do it well.
And Same Category Posts is not only the youngest, it’s also the first which gets CSS cropping for feature images.
Its a little check box ‘Use CSS cropping’, the feature is available and we are looking forward if you enjoy it.
Appropriate for widget areas
What is CSS cropping? If you had images with a other format as you want to show you have two options: Scale the image down than you can show the full image or you can crop the image so you can fill you desired image dimention. The first option has the following disadvantage that edges occur which remain empty. The second, the image is cropped and parts of the image was cutted. The third would be the image has the correct size, which is not usually the norm.
WordPress use and supports the first option for rendering HTML with the_post_thumbnail() and shows the full image but with a smaller size. And images of different dimensions is what does not look so great in the widget area.
That’s why we implement the second option for our widgets. With ‘CSS cropping’ your layout gets the configurated image dimentions.
If you don’t use ‘CSS cropping’ because you had a own image size you aren’t use the HTML img attributs srcset and size for ‘best’ images.
Another conceivable case is all your setted image sizes has the same dimention and only differ in there size. We don’t know any website which has only one image dimention.
To crop the image via CSS seems for us the most viable solution. So we will maintain this option and enhance it in the feature.