How to make images look better instead of using groups to display images?

[julpereira82]

So I’ve been using groups to display images simply because they fit well. Otherwise I get this:

Which, creates a really awkward blank space and essentially ruins all my design. For example, if I want to put some information right after the image ends, it will start after the blank and it looks awkward. And is not consistent across different sized images.

Hence, I’ve used groups to display images… but then they are cropped oddly and my users have complained.

Do you guys offer any best practice or tips for how to make an image look good as on regular platforms? Or at least how to make the blank space a specific color, like black? I don’t really see an option for it with the image element itself so is the only way to just put it on a black background group?

Like this:

[boston85719]

Simple way…use processed with imgix and crop image to fit dimensions.

Harder way…use an image uploader that allows you to set the dimensions and allows the user to crop to those dimensions (many on plugin marketplace)

More difficult way…find way to extract uploaded images dimensions and use a plugin that allows you to set the width and height of an element using a dynamic expression…I’ve built a plugin that does the dynamic width and height, and there are other more expensive versions available as well.

[julpereira82]

Awesome thank you, I’m gonna give it a try with the first way you suggest.