How tell a Block to keep an image ratio?

  1. I created this layout using an Element >Content Template for my Archive page.

  2. Attached is the structure I used for my GenerateBlocks / containers so you can see.

How do I tell my GenerateBlocks to display 100% of the image and make it responsive?

In other words, I don’t want the image to be cropped. Also, it does not look good at all on a smartphone since the image is “zoomed” and cropped.

Also, I set:

  • 300 for bottom padding
  • 100 for minimum height
    in a trial and error process to display the image but I’m quite confused with how I should set those settings.

Is there not an “auto” setting to tell the blocks to keep the original image ratio?

Thank you

PS: Here is the link of that page Archives des Marketing - meilleurslivres.org

@Dek:

Are you planning to overlay text on the book images?

If not, the easiest fix would be to just use a GenerateBlocks Image block to display the image, instead of setting the image as a background image on the container.

Another option would be to add a custom class name to the container block, and then apply a custom CSS rule to set aspect-ratio on the inner container — for example:

.your-custom-class-name .gb-inside-container {
    aspect-ratio: 3 / 2;
}

(^ Note that setting the aspect ratio like this means you will need to crop all the affected images to that same ratio using image editing software or the Wordpress Media Library — otherwise the image will get stretched to fit that ratio. You can also use different CSS object-fit settings to set the image crop automatically, if you are ok with the image being cropped when not the exact ratio.)

Hello and thanks for helping out.

I actually tried the option 1 and added an Image block.
Please see my screenshot below: How can I then get the Heading being displayed as an overlay text on the image? In other words, how do I move it up and over the image while not “breaking” anything?

Hi Dek,

With this structure, we can do it through custom CSS.

Give the Grid Block of a class of cu-query-block

Give the title a class of cu-query-title

Then, add this in Appearance > Customize > Additional CSS:

.cu-query-block.gb-query-loop-wrapper>.gb-query-loop-item>.gb-container >.gb-inside-container{
    position:relative;
}

.cu-query-block.gb-query-loop-wrapper>.gb-query-loop-item>.gb-container >.gb-inside-container>.cu-query-title{
    position:absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    z-index:100;
}

Helloi @fernandoazarcon2,

I followed your instructions:

Look at what my blog look like:

1 - the titles do not appear as overlays

2 - the layout is all screwed. Not sure what I have done wrong.

Let’s continue on the other topic you started. Let’s try the other method first so it isn’t confusing.

If you prefer this method, let’s continue here instead. Let us know what you would like.

Well, I have no preference on my side. I just want the easiest way to be able to display my post like this for both desktop:

And smartphones / mobiles devices. :slight_smile:

Thank you.

Alright, let’s continue on the other thread instead. :slight_smile: