Creating a site to match spec of client and stumbled on a few problems.
Here, when an editor needs to replace an image in a rounded div (background image), the “edit pic” button is off of the pic, and therefore unclickable.
Moving your mouse cursor off of the image in order to click the button is impossible.
Solutions:
Make rounded pics square in Photoshop instead of using CSS to round images?
Won’t work, Client doesn’t have Photoshop.
?
This is not a deal breaker. There are workarounds for this situation, and perhaps it’s a fringe case.
Thanks for posting about this. This is a limitation of the Editor our team is aware of.
We have looked into fixes but there’s no quick, simple one we can implement at this time. I’m happy to provide a couple of workarounds though:
Option 1:
You can create a collection for these rounded images so that each image has it’s own collection item. From here you and / or your collaborators can update the image by using the Editor UI rather than the on canvas editing option
This second option has more steps but may work better:
First you’ll need to make sure the round image is build in a specific way. Namely two divs - one with the background image and one acting as a mask (GIF Showing the settings). Then:
Create a static page
Add a plain div block to the page
Give that div the same class name as the element with the background image on your other page
Add in a title to that page to reflect the page name and section which they’d be updating
Publish the site so that the draft page is present and accessible within the Editor
From here the client can use the editor to access this drafted page and swap out the image on the div there. This should also update the rounded div on the live production page.
Thanks, @Brando!
Yeah, I went with Option 1. It worked out well and made rendering them on various pages easier, actually.
That Draft page feature is pretty impressive.
Thanks for your time!
