Webp images + WP 5.7 Cover blocks

Hi @michaelbourne

This is Ioanna from Imagify and I’ll gladly assist you here!

Thank you for pointing this!

Regarding WebP display using <picture> tags there are a few reasons why WebP will not be displayed:

– background images added via CSS
– there is no WebP generated
– page element HTML is loaded after Imagify looks for the source code to apply WebP markup
– images are external

The solution at the moment would be to choose rewrite rules unless you are using a Cloudflare/ CDN.

However, when there is an update on the matter we’ll inform you.

Best regards,
Ioanna

Hi Ioanna,

I understand the need for copy-and-paste replies to cut down on support overhead, but that wasn’t the problem I was reporting.

For now I will fix it myself, but please do note to your devs that a feature in your plugin has a conflict with core WordPress features.

Thanks,

Hi Support,

Do you have any update on this issue? The cover block is not working with the latest WordPress 5.7 version.

Thanks

@stoton1 Add this to your customizer or theme’s CSS:

.wp-block-cover-image picture.wp-block-cover__image-background,
.wp-block-cover picture.wp-block-cover__image-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
.wp-block-cover-image picture.wp-block-cover__image-background > img,
.wp-block-cover picture.wp-block-cover__image-background > img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	-o-object-fit: cover;
	object-fit: cover;
	outline: none;
	border: none;
	box-shadow: none;
}

• This reply was modified 3 years, 8 months ago by Michael Bourne. Reason: code format

@michaelbourne Thanks mate, I have added the CSS to my theme and the cover block is working now. I have noticed that the “object-position” property that is set in the block settings is not being reflected currently. Lets hope Imagify can release an update to fix all the issues.

Thanks again for your help.

Hello,

@michaelbourne Thank you for bringing this to our attention.

The issue has been reported to our developer and there will be a fix in the next Imagify release.

Thanks for your patience!
Best regards,
Ioanna

@stoton1 yeah, it’s just temporary css to stop your site from breaking. You might need to remove it once Imagify releases their next update to fix it themselves. Always test WP updates on a non-production site first to make sure things like this dont happen in the future ??

@wp_media thank you!

@wp_media Thanks, look forward to the update.

@michaelbourne No worries. Its good advice you give regarding having a staging site, this is something we have been doing with WordPress for years. Its a big advantage.

@wp_media Any ETA on that release?

Hi @michaelbourne

I quote the following GitHub issue link https://github.com/wp-media/imagify-plugin/issues/546 to follow the progress of the issue, I am sorry for the omission.

Unfortunately, we have to explore/ discuss further this issue as adding CSS on the front end for Gutenberg blocks is going to be new territory for the plugin.
Imagify does not output styles on the front end, leaving themes to do the styling.

We will definitely let you know as soon as we have an update on this.

Thank you!

Best regards,
Ioanna

Thanks @wp_media

I’ll send a PR to fix the issue for you.

I understand you guys do not want to mess with the CSS, but this is a problem and has been for a while. What about a fix by maybe when you are searching for image, just recognize that the image is in a cover block and don’t touch it at all and leave it with the standard WP format and skip the webp.

At least then it will not break things and you don’t have to touch the css

@corelevel I have already sent them a PR to fix the issue and it has been accepted, so it will be in the next plugin update. They have no ETA on that however.

Hey @corelevel

As Michael ( @michaelbourne ) said, this will be included in the next update.

Just wanted to thank you in advance for your patience on this.

Also thanks to @michaelbourne who provided the PR!

Best Regards
Marko