i have code origin in layout:
<div class="pm-single-post-img-container" style="background-image:url(images/01.jpg);"> <div class="pm-single-post-title full-width"> <p> <sc:text runat="server" field="title" /> </p> </div> </div> also have image field , , want image url set div background , :
<% sitecore.data.fields.imagefield imagefield = sitecore.context.item.fields["image"]; var thumbnailurl = string.empty; if (imagefield != null && imagefield.mediaitem!=null) { thumbnailurl = sitecore.resources.media.mediamanager.getmediaurl(imagefield.mediaitem); } %> <div class="pm-single-post-img-container" style="background-image:url(<%=thumbnailurl%>);"> <div class="pm-single-post-title full-width"> <p> <sc:text runat="server" field="title" /> </p> </div> </div> but way has error when page in edit mode , because use block code. if have solution case , please share me . !
try avoid use code blocks.
your page(aspx.cs) or control(ascx.cs) can have public property.
public string backgroundurl { { sitecore.data.fields.imagefield imagefield = sitecore.context.item.fields["image"]; var thumbnailurl = string.empty; if (imagefield != null && imagefield.mediaitem != null) { thumbnailurl = sitecore.resources.media.mediamanager.getmediaurl(imagefield.mediaitem); } return thumbnailurl; } } and can use in code
<div class="pm-single-post-img-container" style="background-image:url(<%=backgroundurl%>);"> <div class="pm-single-post-title full-width"> <p> <sc:text runat="server" field="title" /> </p> </div> </div> if error "the controls collection cannot modified because control contains code blocks" follow presentation component troubleshooting
added page editor image editing after question in comments:
there no way editing of background image of div in sitecore out of box. can render tag instead of background image pe mode. example:
<sc:image field="image" id="imagepe" runat="server" visible="false"> <sc:text runat="server" field="title" id="titlepe" visible="false"/> <div runat="server" id="divnormalmode"> ... current code </div> and control visibility code behind
if (sitecore.context.pagemode.ispageeditor) { imagepe.visible = true; titlepe.visible = true; divnormalmode.visible = false; } while changing markup , styles can achieve pretty appearance in pe mode , ability edit image.
or, if have wysiwyg requirements should have sitecore edit frame image field. able edit background image field.
