I would like to make an image with overlapping text both editable in on-page editing.
According to this blog post and this forum thread it should be possible to do this by using the data-epi-overlay-z-index attribute.
I created this simple example but it doesn't work:
Only the image is editable on-page, not the heading.
Any suggestions to make this work?
Using EPiServer version 8.10.0
I tested this scenario on Alloy site. It looks like overlaping properties doesn't mean nesting properties. When properties are nested like in your example then the OnPage editor for nested span is not renderred.
You could use the markup like:
<div data-epi-overlay-z-index="1000" style="height: 250px;background-image: url('@Url.ContentUrl(Model.HeaderImage)');" @Html.EditAttributes(x => x.HeaderImage)>
<span data-epi-overlay-z-index="2000" @Html.EditAttributes(x => x.Heading)>@Model.Heading</span>
Then using CSS styles make those two elements overlaping and then data-epi-overlay-z-index should work.
Also you could add a condition to your markup view: PageEditing.IsInEditMode.
If true (editor view) then render markup with non-nested elements. If false (end user view) then render nested elements (even without editors) .
You are complete right about the nesting of the properties. If I take your example code and style the heading over the image it works perfectly.
Thanks a lot!!