Background image overlay error Mixed Content

I don’t know if anyone has come across this issue. I did see something similar in this topic
My issue is if I use a dynamic image such as a Wordpress featured image as a background image or a static image I can’t add an overlay. I receive the error 'This block encountered an error and cannot be previewed.

I believe this is something to do with mixed content ie http to https. I just installed a cert for this local dev project. I have regenerated blocks & CSS and on the frontend there is no mixed content, but in the editor there is. All the mixed content are my local fonts. Yet I look in Cwicly settings and the path is correct https://


Screenshot 2023-03-14 at 14.40.50

Environment info

Hello @hopscotch,

Thanks for the report.
I’m sorry to hear you’ve been having trouble with the background image and an overlay.

Is this happening on all blocks or more specifically a section only?
Has 1.2.9.5.4 helped in any way?


As for the fonts and mixed content, might I suggest using the new Font Manager?
The Font Collection in the Cwicly Settings will be deprecated quite soon in the coming versions.

Sorry for the delay @Louis. It happens on any element (Section, Div etc.) that I apply a background image. I have created multiple pages but the issue persists. I have another local dev site that I added an SSL cert to for https:// and rebuilding Blocks and CSS remedied any issues including the fonts loading http:// insecurely both on the front and back end.

For some reason in the backend the fonts display the issue ‘was loaded over HTTPS, but requested an insecure font’, the usual http instead of https.

This site had no issues. It had been a few weeks since I had worked on it and I came back to it today and updated Cwicly, and added a SSL cert that is when the issue appeared.

I had added my local fonts in Cwicly Settings > Font sets. Now i see you can add them on the page in the Cwicly UI. I open the fonts manager on the page but it shows no fonts installed even though I have configured them in Cwicly settings. Where am I supposed to configure them?


Also tried deleting one of the my local fonts and re-adding it (Cwicly Settings). Then regenerated Blocks & CSS but still within the editor it is loading the fonts over http://

Hello @hopscotch,

Sorry for the misunderstanding here.

Unfortunately, given the different logic behind the Font Manager, you will have to set your local fonts up again using the new interface in the Editor.
Thus, we recommend setting all your fonts from the Font Manager from now on.

As for the background issue, I’d be grateful if you could possibly take a screenshot of your browser console when the crash happens and share it here or at support@cwicly.com.

Thanks in advance!

@Louis I deleted the font files in the Cwicly settings page and added them within the Cwicly UI on a page. With the new version of the font I could not use the same font name. So I used a variation. I made certain on the elements I didn’t have a global class on, to select the new font. The insecure error for SSL http:// was then fixed. But the background image adding an overlay issue persists.

@Louis I was able to isolate the cause to the background overlay issue. I only receive the error if I use my global background colour as the overlay colour. Any other global colour it works as it should. When I use the global background colour I receive the following error in the screenshot. I hope that helps. I have also sent these details to your support email.



You can see the space at the start the hex code of the Global Background Colour. If I try to edit it as I found out late last night I receive an immediate error; ‘Failed to parse color’ (in previous screenshot)

Screenshot 2023-03-16 at 08.58.58

Hello @hopscotch,

Thanks for your patience on this one and sorry for the inconvenience.
Indeed, I can reproduce this on my side and it should definitely be caught before crashing the block.

We’ll get this fixed in the next update!

Sorry once again.

Cheers,

1 Like

Nothing to apologise for @Louis it is only a wee problem that I can easily work around. I am just happy it wasn’t me this time :joy:

1 Like

Hey @hopscotch,

Thanks for your patience on this one!

1.2.9.5.5 should fix the issue with the background colour crashing the block if it contains a space at the start.

If you experience any trouble at all relating to this, I’d be grateful if you could let me know :slight_smile:

Cheers,

1 Like

Hi @Louis I can indeed confirm that issue is fixed for me. Thank you!