This blog post is written for Sitecore 8.2 update 5 (rev 170728) with SXA 1.4

This week we started building a new SXA site and design wise, we had a pretty simple case. Create a Partial which will have cover image as a background within a header with some navigation content and logo. Sounds simple, right? Hmmm, not really.

Required steps:

  • Create a Header Home Page partial
  • Assign it to Home Page design
  • Open Header Home Page partial in Experience editor
  • Add Container rendering within the header placeholder and assign background to it <-PROBLEM
  • Split the rows
  • Add content

Problem 1: There is no Background selection

When you open Experience Editor, select Container and click on edit the styles, you will see the Grid section and the Styles section. So where is the Background?
container without the background

Solution

Go back to the Sitecore CMS, select your Partial, click on Presentation Details, Final layout end select your Container. Voila, the background is there. Thanks Adam!

Problem 2: scLayout errors

Once I had image in place, I wanted to add Cover Background css style to it. Sometimes it would work, sometimes not, but most annoyingly, the changes couldn’t be saved due to the Experience Editor scLayout errors. And this saving error was completely random. I couldn’t point into a particular example when it would happen.

Exception: Newtonsoft.Json.JsonReaderException Message: After parsing a value an unexpected character was encountered: {. Path 'scLayout', line 1, position 1522.
Source: Newtonsoft.Json
at Newtonsoft.Json.JsonTextReader.ParsePostValue() at Newtonsoft.Json.JsonTextReader.ReadInternal() at Newtonsoft.Json.JsonTextReader.Read() at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.PopulateObject(Object newObject, JsonReader reader, JsonObjectContract contract, JsonProperty member, String id) at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.CreateObject(JsonReader reader, Type objectType, JsonContract contract, JsonProperty member, JsonContainerContract containerContract, JsonProperty containerMember, Object existingValue) at Newtonsoft.Json.Serialization.JsonSerializerInternalReader.Deserialize(JsonReader reader, Type objectType, Boolean checkAdditionalContent) at Newtonsoft.Json.JsonSerializer.DeserializeInternal(JsonReader reader, Type objectType) at Newtonsoft.Json.JsonConvert.DeserializeObject(String value, Type type, JsonSerializerSettings settings) at Newtonsoft.Json.JsonConvert.DeserializeObject[T](String value, JsonSerializerSettings settings) at Sitecore.ExperienceEditor.Speak.Server.Requests.PipelineProcessorRequest1.Process(RequestArgs requestArgs)

Solution:

Long live Sitecore community I would say!

Naveed Ahmad pointed me to a blog post http://jockstothecore.com/experience-editor-error/ and told me to apply last fix from the blog, '3rd time's a charm'. Keep in mind that the above article was written in March before 8.2 update 5 came out so I was a bit skeptical. So, I followed everything what was written, and boom! Magic, it works!

magic

Problem 3: Image background is rendered on the wrong place in the View

The background image by default is not rendered on the container div, but on one level bellow.

Original

<div @Html.Sxa().Component("container", Model.Attributes)> <div class="component-content"@Html.Raw(backgroundStyle)> @Html.Sitecore().Placeholder(key) </div> </div>

The change was done directly on the View: \Website\Views\Container\Container.cshtml

Changed version

<div @Html.Sxa().Component("container", Model.Attributes) @Html.Raw(backgroundStyle)> <div class="component-content"> @Html.Sitecore().Placeholder(key) </div> </div>

Note: SxaLayout was also changed: the extra row in the Header got removed cause it didn’t fit the bootstrap HTML way.

Conclusion

Now, with these fixes, I can’t say that the background image works perfectly. If I would add a class from the style, sometimes the image would disappear from the field itself. Not ideal but you can work around it. Also, keep in mind that the change for the image is not available from the Experience Editor. Now with some css magic, we are able to get a proper Cover background image in the <header>.

Investigation of Problem 1:

I was curious to know why from the Sitecore CMS I can see the Background property and not from the Experience Editor itself.
So let’s compare both cases. (Since the HTML code is very long, I will post only the event calls.)

CMS HTML:

onclick="javascript:return scForm.postEvent(this,event,'contentimage:properties(id=FIELD78400034)')"> <a href="#" class="scContentButton" onclick="javascript:return scForm.postEvent(this,event,'contentimage:clear(id=FIELD78400034)')"></a>
<a href="#" class="scContentButton" onclick="javascript:return scForm.postEvent(this,event,'contentimage:refresh(id=FIELD78400034)')"></a>
onclick="javascript:return scForm.postEvent(this,event,'contentmultilist:selectall(id=FIELD78400035)')"></a><a href="#" class="scContentButton" onclick="javascript:return scForm.postEvent(this,event,'contentmultilist:unselectall(id=FIELD78400035)')">

Experience Editor HTML

scForm.postEvent(this,event,'contentimage:clear(id=FIELD78400034)')"></a> <a href="#" class="scContentButton" onclick="javascript:return scForm.postEvent(this,event,'contentimage:refresh(id=FIELD78400034)')"></a>
onclick="javascript:return scForm.postEvent(this,event,'contentmultilist:selectall(id=FIELD78400035)')"></a><a href="#" class="scContentButton" onclick="javascript:return scForm.postEvent(this,event,'contentmultilist:unselectall(id=FIELD78400035)')">

Idea number 1

My original idea was to create additional button in the Core database which will load the BackgroundImage field. I looked into the examples how Grid and Styles were loaded:

For the Grid:

DLL: Sitecore.XA.Foundation.Grid
Class: GridDefinition
Config: Sitecore.XA.Foundation.Grid.config

For the Styles:

DLL: Sitecore.XA.Foundation.Presentation
Class: RenderingStyles in Sitecore.XA.Foundation.Presentation.CodeDataSource
This particular class checks the available and allowed styles.

The Container uses DynamicPlaceholdersRenderingModel model.

Now the question is, where is the Background Image code? I can see it in the Model of the DynamicPlaceholdersRenderingModel but not in the code which gets triggered on a window dialog. Since that particular field is on Rendering Parameters (/sitecore/templates/Feature/Experience Accelerator/Page Structure/Rendering Parameters/Container), I can’t access it via field as you would do for OpenGraph or Twitter template fields. So that idea got scraped off.

Idea number 2

The second idea was again with the custom button but this time to access it via webedit action. The Grid is triggered by ShowGridPropertiesDialog within Sitecore.XA.Foundation.Grid.Commands. If we compare the HTML outputs above, the key difference is in contentimage click command. This command comes from Sitecore.Kernel.dll, Sitecore.Shell.Framework.Commands.ContentEditor.ContentImage class. This also explains why the field is available in CMS and not in the Experience Editor. Next step was to see what kind of webedit commands exist by default. These ones are available in many files under \Websites\App_Config\Include\Foundation. By checking each and one of them, I was not able to find anything which would be suitable for outputting this field.

Conclusion

As you can see, both ideas have failed in my case. I am curious to know if someone has the solution for this particular problem. Creating a custom Container in this case would have saved us time since we have the experience for building custom renderings, but by being so close to solution in this case, I would be more than happy to hear from anyone who knows how to solve this in order to use OOTB rendering.

And last but not least, if you have managed to read this far into a post, kudos to you and I hope that these steps will save you some time in case you bump into something similar.