Contain function to Cover Block – How?

Try adding this to the Additional CSS section for the customizer or style book:

.wp-block-cover .wp-block-cover__image-background {
   object-fit: contain;
}

(changed from default “cover”)

Thx chief ….

Code does not seem to work…

In CSS I have added my own class .cover-block-contain-scale and for this block i have added same class cover-block-contain-scale. This format is portrait – high and slim….

• This reply was modified 9 months, 1 week ago by hebhansen.
• This reply was modified 9 months, 1 week ago by hebhansen.

Object-fit is an img specific attribute, so I suspect I do not get hold of the image….

Adding img like this does nothing:

.wp-block-cover .wp-block-cover__image-background .cover-block-contain-scale img {
   object-fit: contain;
}

Also object-fit needs a height and a width. Will the settings inside cover block be sufficient or do I need to set those in css?

I also have this lying around. Not working either….

/******** Cover Block - Inner Container *******/
.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container .cover-block-contain-scale {
	height: 50vh;
	width: 100%;
   object-fit: contain;

}

I was largely guessing based on the cover block’s default classes and CSS. Adding a custom class ought to help immensely, but I’d be unable to help with specifics without a live link to the page in question.

If you want the entire image to appear in the frame, there is bound to be portions of the frame that is just background color with no image. Unless the image’s aspect exactly matches the frame’s aspect — difficult to achieve with a responsive layout

You might need different rules for portrait or landscape orientation, which would mean needing a custom class indicating which it is.

site here and it’s the hero image, that is a query displaying only newest and only one in category Curator’s Choice.

I want to be able to display both horizontal and vertical formats and have them contained.. Yes I am fine with partial transparent areas, as long as the original image displays in full.

I can’t have different rules for horizontal/vertical. A product that is added to Curator’s Choice is immediately displays as hero cover block. More users such as editors may add a new to category curators choice and then query just pulls this one. It may be dayly or weekly or other. Panoramic – 3:2 – 4:3 – Portrait – 1:1. Just contain within the hero container, so that the original image shows. Text overlay I will need to sort after. Center or other…

But maybe this is a lost cause. I understand that for WP 6.5 there will be a setting for cover block that almost contains, until it doesn’t anymore.

Also I am trying to transform title to horizontal like so:

.wp-block-post-title .vertical-transform-minus90 {
    transform: rotate(-90deg);
}

where vertical class breaks the transform. Not having it flips everything on my site around. The custom class is added to the title block in settings css classes, but not working. Why?

Ah, of course, you’re the color wheel person! Sorry, I didn’t recognize your name/avatar from earlier. I’m not so good with names, but I do remember websites I’ve seen before.

I think you do want this AFAICT:

wp-block-cover .wp-block-cover__image-background {
   object-fit: contain;
   background-color: #000;
}

Set the background color as you wish. Should work for either orientation. This should work when added to Additional CSS. CSS placed there should override external CSS files. You’re using a caching plugin, so it’s difficult to predict what will work. When you make any changes to CSS rules you should flush all caches, both client and server side. When developing new CSS it’s often best to disable any caching until everything is working as intended.

About the title transform. First, the two selectors are for the same element, so there should be no space between. Second, the title is also a link, so you need to include the a selector at the end.

Correct, the color wheelie. No worries at all.

This code has no effect. I also tried to change classes to .cover-block-contain-scale, which is my custom for this cover block.

I always purge cache when saving child css, so that I see the effect.

• This reply was modified 9 months ago by hebhansen.

Did you remove it again? I don’t see it on the page anywhere. Could you please leave it in place so I can investigate?

If by chance you did not remove it, where did you place it? It’s not being applied for some reason. Even if it’s ultimately overridden, I should be able to see it somewhere.

This code is in my child css and active. I use code snipppets plugin:

/******** Cover Block - Contain & Scale *******/
.wp-block-cover .wp-block-cover__image-background .cover-block-contain-scale {
	height: 50vh;
	width: 100%;
   object-fit: contain;
}

/******** Cover Block - Inner Container *******/
.wp-block-cover-image .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover__inner-container .cover-block-contain-scale {
	height: 50vh;
	width: 100%;
   object-fit: contain;

}

.cover-block-contain-scale {
   object-fit: contain;
   background-color: #000;
}

Class .cover-block-contain-scale is added for this cover block and must be there, to not fiddle with every cover block on the site

I have changed background color to #202020 in case you wonder… Image lazy load on top of your background color.

object-fit needs to be applied to the image itself:

img.wp-block-cover__image-background.wp-post-image.entered.litespeed-loaded {
    object-fit: contain;
}

This code works like so:

.cover-block-contain-scale img.wp-block-cover__image-background.wp-post-image.entered.litespeed-loaded {
    /*object-fit: contain;*/
	background-color: #cfebee;
}

But now it breaks my border-radius….

I am going to mark this resolved and wait for WP 6.5 where cover block supposedly fixes this issue….

• This reply was modified 8 months, 2 weeks ago by hebhansen.