Faux image cropping

My CMS of choice is Expression Engine. With the Codeigniter framework, Expression Engine allows you to customize as deep as you have to without hacking the core. As a front-end developer this gives me amazing control over the design and layout without having to fuss with a bulky backend.

I swear by Expression Engine, but it has its limitations. One of the biggest limitations is the fact that I can’t manually crop images the way I want to. The file upload manager is great, it even allows me to save multiple sizes of an image. If I choose to I can save a thumbnail, cover image, small, medium and large versions. The only downside is that in the current build I can’t manually crop them without buying a plugin; I know it’s a total bummer.

So I am stuck using a workaround. One of my pet peeves is having an image gallery with multiple sized images making my page look ugly, there’s no uniformity…and I hate that. So to fix this I use a little technique called faux image cropping. Faux image cropping works by creating a container wrapped around an image. The container will get a specified height and width with a max height and max width also specified. The final touch is making sure that overflow is hidden. Depending on the image size, this should work out fine, but if you find that some images are smaller either in height or width specify a width of 120% or higher to make that image fill the container. Thumbnails aren’t there to be perfect, they are there to give you just enough of a visual to want to click and see the image. I also use negative margins on images to select more of the inner image rather than have the image slammed into one corner.

    .faux-container{
        width: 100px;
        max-width: 100px;
        height: 100px;
        max-height: 100px;
        overflow: hidden;
    }   

    .faux-container img{
        width: 120%;
    }

Why do I set a max-height and max-width you ask, because if I switch my width and height to percentages I don’t want the faux-container to be any larger than a specified amount or it could potentially break the layout…and that my friend is not what we want.