Hi,
I’m using the template for an Image Gallery Slider, with the slide images set to cover. When working in the builder, it does exactly that. Looks perfect:
However, when hitting the preview button, or viewing the live page, the images are being cropped instead of covering, although the CSS dictates ‘cover’. What’s wrong here?
Hello @dhunink,
Thanks for writing in! When setting a background image as Cover, please make sure that the width of the Slide is set to 100% to cover the area. I would recommend adding a temporary border color to the slide so you can see the bounds of each slides. We would be happy to double check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
I’ve added the secure note!
I don’t recall changing anything regarding the width/image size compared to the supplied template, so I’m very curious to learn from your findings. The secure note links to a staging site, so if you do find the problem, I will have te replicate the solution to the live site, so the more details your could share on your findings, the better.
Thanks in advance for looking into this!
Hey @dhunink,
I have logged in and check the background image of the Slider. It seems that it covers the whole column.
I added a red border to the Column so that you can see that the image just covers the whole column.
Thanks.
Hi @ruenel, it does, when viewed in the builder. But as soon as you click on the preview button, the image is no longer in the original ratio, as it should be when set to cover, but horizontal compressed. Almost like it’s set to ‘fit’. See the screenshot below.
Hey @dhunink,
Check out the video in the secure note below. This is what I am seeing on the live view of the page.
I am guessing that your issue might be coming from Imagify plugin where it removes the background image and replaces it with .webp image.
Cheers.
Hi @ruenel,
I’ve contacted Imagify and got an interesting reply. I think this might a battle between ThemeCo and Imagify: how’s going to be the first to really support the next-gen techniques. The ‘cover’ method seems to be tricky setting that works in traditional CSS with <img> attributes but not always with <picture> attributes. Is this something that has come up for discussion in the dev team?
I know the theme.co team is always trying to embrace new standards. Usage of <picture> might be something to take into consideration?
To address the issue where the 'cover' CSS attribute is not applied when WebP images are enabled through Imagify, you might need to adjust the method used for displaying WebP images on your site. Imagify provides two main methods for displaying WebP images:
1. **Using `<picture>` Tags**
2. **Using Rewrite Rules**
If you are currently using the `<picture>` tag method, it might be causing compatibility issues with your theme's CSS, particularly with properties like 'cover'. Switching to the **rewrite rules** method could resolve this issue as it doesn't alter the HTML structure as much as the `<picture>` tag method does.
Here’s how you can switch to using rewrite rules:
1. Go to your Imagify settings in your WordPress dashboard.
2. Locate the option for **“Display images in Next-Gen format on the site”** and select the **rewrite rules** option.
3. Save your changes and clear all caches (browser cache, site cache, etc.).Hi @ruenel,
any update on this? I’m really curious to the thoughts of the team regarding usage of the tag, before I apply a quick-fix. I’d rather have a solution that really makes the modern html structure work!