[Resolved] Image block set image property to contain rather than cover

[Author]

Posts

[jww]

I have an image block in a view. I added a custom image field. Images appear but I want to set them to "contain" so they are contained in the block. I don't see where/how to do that?

[jww]

Also I added this to additional css in the appearance > customize settings:
.logo_img {
width: 150px;
height: 80px;
object-fit: contain;
}

And in the Toolset image block, advanced settings added this to additional css:
.logo_img

But that isn't making any difference, the logos still extend beyond the edges of the image container.
I didn't put anything in the ID box.

[Christopher Amirian]

Hi there,

This needs to be checked as I do not have access to the front end of the website to see how the code is generated.

For sure, there is no built-in option in the Toolset Image block to change the image to contain.

But it might be possible with custom CSS code. I will try to help to see if I can.

But either please provide the URL to the page that has the image or provide the login information which then I can see the page in question.

Thanks.

[Christopher Amirian]

Hi there,

The link to the dashboard goes to a not found page so I do not have access to the backend of your website.

Please set the next reply as private and provide the correct information.

I checked the page in question and I see that there is a CSS code added in most probably Appearance > Customize:

            .tb-image img {
                width: 150px;
                height: 80px;
                object-fit: contain!important;
            }

You can change it to cover. But from the context that I see it will not have any difference because your columns are not at the same height and all images have different heights, so changing the object-fit inside different heights will not do anything.

By the way, you can use the normal Gutenberg Image block if you want to as Toolset adds an option to use dynamic data to that block too.

Thanks.

[jww]

I still need help with this.
I have images set to full size in the view loop.
I have that css in additional
I see where I can set the width via css to have them display smaller, in this case 250px.
But where there are logos which are tall, the width doesn't solve the problem. Can I say max width and max height so if it's a tall on it will fit better? I want them to be somewhat uniform, like you usually see on a logo carousel.

[Christopher Amirian]

Hi there,

Thank you for the login information. There are a few ways that is possible to make the logos align on the middle line to make it better.

My preferred way is to use the Display flex int he container of the images.

I added the CSS code below:

#wpv-view-layout-2059 .tb-grid-column>* {
display: flex;
    flex-flow: column;
    justify-content: left;
    align-items: center;
    height: 100%;
}

#wpv-view-layout-2059 .tb-grid-column figure {
height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

If you click the top left hamburger menu and click on the View block and on the right side check the Cusotm CSS option you will see that I added the CSS code above there.

Thanks.

[jww]

I see that, thank you.

[Christopher Amirian]

You're welcome. Feel free to open up a new ticket if you have additional l questions.

[jww]

Is that code specific to that particular block or would it work on all Toolset image blocks on different sites?

[Christopher Amirian]

Hi there,

It is specific for the block in question, I intentionally added "#wpv-view-layout-2059 " in the code to do that.

As I do not know about the consequences of the code for other scenarios.

Thanks.