0

Where I work, we have a problem (especially on responsive websites) every project where our designs have fixed ratio areas to display images in. It all works well when we're working with the perfectly sized comp images originally dropped into the design, but once the site is built and the client has control, the images they upload are all different aspect ratios and orientations. This usually looks awful and/or breaks the layout of the site. It'd be great if we could optimize the image areas to fit either portrait or landscape images of a fixed ratio and tell the client to only use photos that fit. However, the client is going to upload whatever image they find.

Now, I know a bunch of ways to use overflow hidden on image containers and position the images perfectly in the center of the container with css. However, I've not been able to find a perfect solution for both landscape and portrait. When I get portrait nice and centered, landscape doesn't look right and visa versa. Of course there's the issue of "focal point" as well. Maybe the image doesn't look right because the main focus of the image isn't the center. Therefore you'd need custom css to position each image on the site.

We are a wordpress shop where I work. I've been researching plugins that might function sort of like Facebook's coverphoto feature. So a client uploads, say, a banner image. A crop box with a fixed aspect ratio pops up for the client to position the image and crop it how they want it. I haven't found a good enough solution for this...

I apologize for my long-windedness, but I'd really like to know if anyone out there has come up with a solution to this that keeps everyone - or at least a good amount of the people involved - happy.

Thanks in advance for your responses!

2
  • Are the images in question using WP's post_thumbnail functionality or would these be dropped in the content editor via insert image?
    – Pedro
    May 14, 2014 at 16:34
  • Yes, most likely they would be the featured images of posts and/or uploaded into custom field suite "loop" fields to be used in banners and slideshows.
    – jtomeck
    May 14, 2014 at 16:40

1 Answer 1

1

The fact you can isolate it to post thumbnails helps because you can then predetermine a few sizes in your functions.php file with WordPress's add_image_size() function. But the only thing I can really envision that would work (in terms of really preventing them from screwing things up), would be to set some ground rules for image display options and writing your own admin meta box function.

Give them a meta box in the post/page editor that lets them see a preview of how the image will fit into a wrapper div as you alluded to. Then re-position it with either radio buttons or a select menu for "Align Image" (with values like "top left", "top middle") etc. This ideally would save a post meta attribute (you could call it "_image_align" or something similar), with the attribute they selected.

<select name="_image_align">
    <option value="center-center">Center Align</option>
    <option value="top-center">Top Center</option>
    <option value="top-left">Top Left</option>
    (etc.)
</select>

OR radio button option...

<input type="radio" name="_image_align" value="center-center">Center Align<br />
<input type="radio" name="_image_align" value="top-center">Top Center<br />
<input type="radio" name="_image_align" value="top-left">Top Left<br />
(etc.)

Then map that to your style.css file where you actually set the display rules for different classes.

img.center-center {
    /*center align the image both vertically and horizontally in the parent div*/
}

img.top-center {
    /*center align the image horizontally and vertically align it to the top of the parent div*/
}

img.top-left {
    /*left align the image horizontally and vertically align it to the top of the parent div*/
}

You'll obviously have to grab the appropriate post meta within the loop before displaying the post thumbnail so you can then apply your custom class to it.

I know it sounds convoluted but I've often had to implement "fool proof" custom theme functionality for stuff like this because, as you stated, clients don't give a crap about pre-sizing images in most cases (and instructing them on how to edit/crop the images in WordPress's media tool sounds like it would be a disaster), so it unfortunately falls back on developers to add layers of intelligence to their themes because we obviously don't want our work looking jacked if we want to show it to potential clients in the future.

Definitely some different routes you can go with this, though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.