width of “cover” image

Hi, do you have a link to the site/page in question where you are seeing this issue so it can be investigate further?

Jarret,

Thanks for your kind reply. Alas – I don’t have anything up that’s accessible outside my own network.

If it helps, the problem may be similar to another thing I’ve noticed.

When I use a “text and media” block, the block extends about 5% outside the body of the post both to the right and left. The two options “Wide” and “Full” both do the same – just to different degrees.

I suspect when I place an image with the “Cover” block, the photo is being positioned similarly beyond the width of the body of the post text. The “window” appears to have a “cropped” image, perhaps because the image is being placed at a similar with as with “Wide” or “Full” width of the “text and media” block.

Of course this is just a guess.

The issue should be easy to duplicate with a suitably large photo. The one I’m using is about 2,000 pixels on a side – so it was imported into the library at the “scaled” size – as well as the smaller sizes.

I’m sorry I couldn’t be more helpful – and I appreciate your efforts to try.

Hmmm I’m not quite sure at this point, I’m not able to replicate the issue you’re seeing on TwentyEleven. The Cover block doesn’t extend out past any post content at all for me.

If you click on the 3 vertical dots at the top of the right toolbar and click on Code Editor, are you able to grab the code for the cover block you’re using and add it into here?

Jarret – Thanks for your kind reply!

It’s the “text & media” block that extents past the width of the column that contains the post contents. (i.e. into the margins)

The “cover” block displays a cropped version of the image. I was thinking that perhaps the full image was placed outside the post margins – but only the portion within the margins was visible – giving the appearance of being cropped.

I just noticed that the “cover” block offers a “focal point” feature when not doing the “fixed” (parallax) option. That tells me that it’s the intention of the “cover” block to only show a portion of the image.

I’d really rather show the whole image – especially when using the “fixed” (parallax) version.

As it happens – when selecting “fixed” (parallax) even less of the original image is displayed – and the “focal point” feature goes away.

This is not ideal – I’d like to use the “cover” block and always show the fill width of the image.

Per your request – I’ve gathered three sets of HTML – all of the same image. The first is an “image” block, the second a “cover” block – not fixed, and the third is a “cover” block – with the “fixed” (parallax) option selected.

===========================================================================

“Image” block:

<figure class=”wp-block-image”></figure>

“Cover” block – without fixed background:

<div class=”wp-block-cover has-background-dim” style=”background-image:url(https://localhost/wordpress/wp-content/uploads/2020/01/ziggy-looking-through-r100rs-windshield.jpg)”><div class=”wp-block-cover__inner-container”><!– wp:paragraph {“align”:”center”,”placeholder”:”Write title…”,”fontSize”:”large”} –>
<p class=”has-text-align-center has-large-font-size”></p>
<!– /wp:paragraph –></div></div>

“Cover” block – with fixed background:

<div class=”wp-block-cover has-background-dim has-parallax” style=”background-image:url(https://localhost/wordpress/wp-content/uploads/2020/01/ziggy-looking-through-r100rs-windshield.jpg)”><div class=”wp-block-cover__inner-container”><!– wp:paragraph {“align”:”center”,”placeholder”:”Write title…”,”fontSize”:”large”} –>
<p class=”has-text-align-center has-large-font-size”></p>
<!– /wp:paragraph –></div></div>

Jarret –

I tried to pick up the HTML from the “Media & Text” block – to see if it gave you a clue as to why it presents wider than the body of the post. But the block won’t let me go into “code edit” mode.

So here’s what ends up on the browser for that block. It’s a simple two box block – text on the left, an image on the right. It has a colored background. And the width of this is wider than the width of the other blocks in the body of the post. It would be nice it it was the same width as the other blocks.

=================================================================

<div class=”wp-block-media-text alignwide has-media-on-the-right has-background is-stacked-on-mobile is-vertically-aligned-center” style=”background-color:#d5ecf5;grid-template-columns:auto 20%;”><figure class=”wp-block-media-text__media”></figure><div class=”wp-block-media-text__content”>
<p class=”has-medium-font-size”>We are moving!<br><br>This website now resides at a new address: <br>“www.iputstuffheretoo.com”<br><br>Please click here to be redirected to this article at the new website. Thank you.</p>
</div></div>