Force or Allow true aspect ratio

How to force the accurate aspect ratio on images being shown? I can’t seem to find anything except for square images in the selections availabe in bricks.

When I try to set the sizes, all I get is cropped images. Horrible.

Hi,

you can set the aspect ratio via custom css on the image element:

root img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
  /*
  aspect-ratio: 4 / 3;
  aspect-ratio: 16 / 9;
  */
}
2 Likes

Yes, I know that. What it doesn’t do is force true aspect ratio. The posts element forces square and crops when aspect ratio is changed. It doesn’t follow the true aspect ratio. Also, “root img” doesn’t work in that instance. I had to use “.image”.

Sorry, I didn’t know you were talking about the Posts Element because you didn’t mentioned… :wink:

If you look at the related css you´ll see that the background-size is set to cover, so it fills the available space on both axis. If you set it to contain, it will only fill the width and keep the images height (true aspect ratio?). Next remove the padding-top: 100% on the image wrapper and tada.

Depending on the images this could end up in a total mess (unless it is assumed that the images are all in the same aspect ratio). So i think for most people it’s definitely easier not to have to think about the aspect ratio when selecting an image for their posts…

Thank you. I will give that a go. I do worry about it. I guess I’m not most people. :face_with_hand_over_mouth:

I got it to work using background-size: contain; and then made sure the hight is correct for my purposes. Adding padding-top: 100% to the .image-wrapper didn’t change anything. What is the purpose of that addition?

Thanks for the help. I appreciate it.

Hi,

you should remove the padding-top: 100%, not add it, because it’s already there.
This ensures that the height of the image is equal to the width, because padding in percentages is based on width of the parent.

Check the css-tricks article about it: Aspect Ratio Boxes | CSS-Tricks

Interesting. I’m also “unusual” in that 90% of all my images are in Portrait format and mainly have some text on them - covers of old newsletter/magazines. So I have huge issues trying to get things to look right. Would really be good to have the ability to set our own image sizes and aspect ratios, maybe in the Theme Styles?
I’m trying your css tricks but so far not achieving the effect I want. Will keep playing.

Ok found that the aspect ratio for A3(and A4, A5 etc) pages is root2:1 so 1.414 : 1 which does look a lot better. Getting there.

Yeah,
i think “usual” are regular photographs without text, so setting them to background-size cover and set the wrapper to a specific height is kind of “bulletproofing” to ensure, that it looks “good” in most cases.

But of course there are always exceptions … that prove the rule :wink:

@timmse Always thought I was exceptional!

You definitely are. And Karen too :sweat_smile:

Summary

The biggest problem I have is when I purchase something that says things like “A Faster, More Customizable & Performant Tool To Visually Design Your Entire Site.”, " Create Your Entire Site Visually From header to footer, and anything in between. Customize every aspect of your site right in the builder … Soon you’ll forget you’re using WordPress ;)" & “Do I need to know code? No. You can visually design your entire site without any coding knowledge.” and then I have to know code to actually do it for images (image manipulation is a very common thing for people to want to do without knowing how to code), it is irritating.

I buy builders for the very reason of being able to customize my site without having to code. If I knew code, I wouldn’t need to use a builder. I’d probably build my own.

WordPress leaves us with what developers believe we should be stuck with (unless we use another tool to change it) I don’t expect that logic in a builder. Especially with image manipulation. Yet Bricks stops short of allowing freedom of expression when it comes to actually being able to “visually” work with images, unless it is what the developer has decided those limitations should be. That’s, of course my opinion. But I think there are a lot of “exceptional” people who purchase builders based on the creative wording used in the sales pitch, that doesn’t turn out to be 100% true.

There is a big market out there that thrives on people being able to do what they want with images, without coding. Bricks doesn’t integrate with anything that makes it easy to present images without code, beyond what Bricks has hard coded. Which can only be over ridden with the use of code. I can point out a few examples of where just border radius requires code. But I digress. I feel like I’m speaking to the wind in these cases.

I’m thankful for the fact that there are a couple of plugin developers who created plugins that will do a little with images, but not what I really need, yet.

My point is, it should not require code to be able to fully present images in the aspect ratio one wishes to use. The builder should actually be that flexible, when it is sold by giving that impression. I do hope this changes over time.

Now, how do I remove the padding-top: 100%? Sorry, I missed the “remove” in your response. And I didn’t see where it is set to 100% already. Is it in the settings or hardcoded?

And forgive the rant, if you will.

Well, you can build a complete site without one line of code, if you’re happy with the defaults. There needs to be limitations (and defaults), because you cannot expect a builder (regardless of whether bricks, elementor, divi, oxygen, beaver… the list is long) to cover an infinite number of different cases.

In your case it is of course annoying that you cannot achieve what you want right away - but nevertheless there is a solution. Since Bricks is community driven, you always have the option to submit feature request or a bug report (instead of ranting ;).

Which type of layout are you using in posts element? List, Grid, Masonry, Metro?

I admire your patience and calmness… :+1:

1 Like

list.

Summary

If I wanted default WordPress features, I would stick with Gutenberg. Currently, the only benifit to having Bricks is that it is faster than Divi and it provides a way to have a template I can assign. That’s not what is promised in the bricksbuilder.io page. If there wasn’t such a broad sales pitch on that page, there would be much less expectation. It isn’t me who put those words on that page. That is my point.

If there needs to be limitations, then don’t create an unrealistic expecation on pie-in-the-sky presentations. Over promising and under delivering is a bad thing. And it creates the need for having very patient, calm support people. :wink:

I’ve found out that the person in control of feature requests actually filters them, so I’m not impressed with that process.

Summary

And then there’s the occaisional troll.

Hi Karen,

here is a code example that only works under the following conditions:

Posts Element Settings
Everything not mentioned is in it’s default state

  1. Layout » Layout: “List”
  2. Layout » Direction: “vertical”
  3. Image » Image Size: set to something not square (e.g. Medium Large)

Example for Landscape Images / Direction: vertical

Let’s say you prepare / crop all of your images to 1200x900 (4:3 Aspect Ratio) and upload them to your posts.

The default background-size of the posts element images is set to “cover”, which ensures that the image fills up the available space on both axis. As we want the image to keep its aspect ratio, we’ll have to set the background size to “contain”, so the image will only fill up the available space on the horizontal axis.

root .bricks-layout-type-list .image {
  background-size: contain;
  /* background-size:cover; */
  /* background-size: 100%; */
}

Doing so, all images (regardless if they’re square, portrait or landscape) will keep their original aspect ratio, but won’t fill up the available space, which looks kind of messy.

So far, so good. Now comes the tricky part (might be interesting for you too @alanj) that depends on your image size / aspect ratio. This is important, because of how css background images work.

To “calculate” the height of the wrapper (the .image-wrapper needs a height, because the background image cannot have a height), you have to do some math:

root .bricks-layout-type-list .image-wrapper {
  /* Image Height divided by Image Width * 100 = padding-top */
  /* 900/1200 * 100 = 75 */
  padding-top: 75%;
}

That’s it. All of your (landscape) images will now have a correct aspect ratio. If you set the background-size to 100% or cover (like default) instead of contain, even square and portrait images will look like as they are landscape images (they will be “soft cropped” like the default ones). This ensures a consistent, not messy look if your post images will vary. So if most of your post images have the same aspect ratio, this seems to be a good compromise. If they are all even, it doesn’t make a difference anyway.

Here are some more examples for different image sizes (square, portrait, landscape), but the principle is always the same.

root .bricks-layout-type-list .image {
  background-size: contain;
  /* background-size:cover; */
  /* background-size: 100%; */
}

/* Square Images 768x768 */
/* 768/768 * 100 */

/*
root .bricks-layout-type-list .image-wrapper {
  padding-top: 100%;
}
*/

/* Portrait Images 768x1152px */
/* 1152/768 * 100 */

/*
root .bricks-layout-type-list .image-wrapper {
  padding-top: 150%;
}
*/

/* Landscape Images 768x512px */
/* 512/768 * 100 */

/*
root .bricks-layout-type-list .image-wrapper {
  padding-top: 66.666%;
}
*/

Default / Horizontal Layout

With the Layout » Direction: “horizontal” (which is default), the code is a little bit different, but also depends on the image size / aspect ratio (in this case our demo size is 1200x900 (4:3 Aspect Ratio) too).

root .bricks-layout-type-list .image {
  background-size: cover; /*which is the default, so you can leave it out */
}

/* Larger Screens starting from 768px */
@media (min-width: 768px) {
  root .bricks-layout-type-list .image-wrapper {
    /* Image Height divided by Image Width * 100 divided by 2 = padding-top */
    padding-top: 37.5%;
  }
}

/* Mobile screens up to 767px */
@media (max-width: 767px) {
  root .bricks-layout-type-list .image-wrapper {
    /* Image Height divided by Image Width * 100 = padding-top */
    padding-top: 75%;
  }
}

I’m on vacation now … so it could take a while until I answer if there are any questions.
Btw., I’m not an official support guy :sweat_smile:

1 Like

Yes, I know you aren’t an official support guy. I’ve seen some of your other posts and figured that out (believe it or not, all on my own :rofl: ).

Thank you for the very long and kind response w/explanation. I have been out all day but will have a good read and let it sink in for a while, then try it for myself.

Thanks,
this helped me on single product page on product gallery slider images.

Spot On!

1 Like