Image background not being rewritten

Question

Image background not being rewritten

lipsquid2022 opened this issue 2 years ago · comments

lipsquid2022 commented 2 years ago

Hi,
Using the CF image resizing the images used as a background (Kadence row block) are being missed in the resize rewrite.
look at my home page here: Libra Photographic
Is there a way I can implement them in the code?

Thanks in advance

Norbert Boros · Answer 1 · Wed Mar 23 2022 22:59:52 GMT+0800 (China Standard Time)

Hello,

Unfortunately at the moment there is no way to re-write CSS properly, but you can overwrite it manually very easily.

Add the CSS as "additional css" inside your WP theme:

#kt-layout-id_e7e4c5-a1 {
    background-image: url('https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg') !important;
}

The "!important;" will overwrite the pre-existing value.

Explanation:

"Slideshow-08_22_Oliver-Kelly96991-scaled.jpg" is the cropped image by WP. The crop function inside WP messes up the image clarity compared to CF Image Resizing.
"/width=2560,height=1703/" - These sizes are the resized image sizes from WP cropping (Slideshow-08_22_Oliver-Kelly96991-scaled.jpg)
The original image is Slideshow-08_22_Oliver-Kelly96991-scaled.jpg which is bigger (3307x2200)
As a result we point the original image to CF Image Resizing with the desired sizes (2560x1703)

We obtain the following CF URL: https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg - great success.

You can repeat this process for any other CSS images.

Point of interest:

You can compare the cropped image by WP vs the cropped image from CF and see the clarify difference:

lipsquid2022 · Answer 2 · Thu Mar 24 2022 17:41:36 GMT+0800 (China Standard Time)

Thanks for the reply, super quick. I’ve done the css changes you’ve mentioned and they’ve worked for me thank you. One thing, every time I update the page the damn layout ID changes! Is there a way for the images to be served responsively? Thanks for your help Nathan

…

Norbert Boros · Answer 3 · Mon Apr 25 2022 14:03:02 GMT+0800 (China Standard Time)

Thanks for the reply, super quick. I’ve done the css changes you’ve mentioned and they’ve worked for me thank you. One thing, every time I update the page the damn layout ID changes! Is there a way for the images to be served responsively? Thanks for your help Nathan
…
On 23 Mar 2022, at 15:00, Norbert Boros @.***> wrote: Hello, Unfortunately at the moment there is no way to re-write CSS properly, but you can overwrite it manually very easily. Add the CSS as "additional css" inside your WP theme: #kt-layout-id_e7e4c5-a1 { background-image: url('https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg') !important; } The "!important;" will overwrite the pre-existing value. Explanation: "Slideshow-08_22_Oliver-Kelly96991-scaled.jpg" is the cropped image by WP. The crop function inside WP messes up the image clarity compared to CF Image Resizing. "/width=2560,height=1703/" - These sizes are the resized image sizes from WP cropping (Slideshow-08_22_Oliver-Kelly96991-scaled.jpg) The original image is Slideshow-08_22_Oliver-Kelly96991-scaled.jpg which is bigger (3307x2200) As a result we point the original image to CF Image Resizing with the desired sizes (2560x1703) We obtain the following CF URL: https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg - great success. You can repeat this process for any other CSS images. Point of interest: You can compare the cropped image by WP vs the cropped image from CF and see the clarify difference: https://libraphotographic.co.uk/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991-scaled.jpg https://libraphotographic.co.uk/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991-scaled.jpg https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg https://libraphotographic.co.uk/cdn-cgi/image/width=2560,height=1703,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/11/Slideshow-08_22_Oliver-Kelly96991.jpg — Reply to this email directly, view it on GitHub <#9 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYMAV3ZXLQNKBMFQ2DKDMV3VBMWXJANCNFSM5ROH4MFA. You are receiving this because you authored the thread.

Sorry for the late reply regarding this. Unfortunately the "id" will change because that's how awesome WordPress and it's plugins are. Regarding serving images responsively, that's entirely up to your theme.