9

I have some overlays and some markup that seems to hide some of my placeholder in my experience editor and I would like to know how to make the areas larger and visible.

thank you for any advice.

6

One approach which we took on a previous project was to include some additional markup in Experience Editor mode and then apply some CSS to style those elements in a way that highlights them and makes placeholder and components more obvious to the authors.

There are a number of ways to achieve this, such as adding additional pipelines to wrap your component with additional markup, but my approach can be found in this blog post: https://jammykam.wordpress.com/2017/01/16/rendering-chrome/

At a high level, the premise is to add some attributes to your HTML.

<div class="row" data-container-title="Four Column Container">
    ...
</div>

But by using an HTML helper the attribute text can be looked up from Sitecore.

private static IHtmlString GetChromeAttribute(this SitecoreHelper helper, string title, string attribute)
{
    /* Earlier version of Sitecore? Use: Sitecore.Context.PageMode.IsPageEditorEditing */
    if (!Sitecore.Context.PageMode.IsExperienceEditorEditing)
        return null;

    if (string.IsNullOrWhiteSpace(title))
        title = helper.CurrentRendering.RenderingItem.DisplayName;

    if (Settings.GetBoolSetting(DisplayExtendedInfo, false))
        title += $" ({helper.CurrentRendering.Renderer})";

    string htmlString = $"data-{attribute}-title=\"{title}\"" + WrapperTitle(title);
    return new HtmlString(htmlString);
}

And then use some CSS to add a border around the placeholder/component and use the content of the attribte to add a label:

html.chromeRenderingHighlight *[data-container-title],
html.chromeRenderingHighlight *[data-widget-title] {
  border: 3px solid rgba(169, 169, 169, 0.7);
  position: relative;
  ...
}

html.chromeRenderingHighlight *[data-container-title]::before,
html.chromeRenderingHighlight *[data-widget-title]::before {
  color: #fff;
  content: attr(data-container-title);
  background-color: rgba(169, 169, 169, 0.7);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  ...
}

The general concept can be seen in this CodePen demo: https://codepen.io/jammykam/pen/ozPgZq

2

We sometimes use an approach very similar to the one Jay is suggesting, but instead of creating separate views we put an extra class on the body tag indicating editing mode. When you have this issue a lot, this might save you some views.

It does mean that the logic is in your layout (which might not be as good - I can follow Jay's argument) but you do have the benefit that it is on one place only.

Our css experts use this identifying class to handle the placeholders where needed giving them a minimal width or height (or anything you want probably), e.g. : .pageEditMode .content-block .row{ width: 100%; }

  • We do the same.. Adding a class on the body tag to indicate editing mode, and use CSS to make the user experience better when editing. – Thomas Bæk Jul 10 '17 at 6:16
1

One approach is to use alternate markup or styles for Experience Editor mode. This way you can have a more editor-friendly display which does not hide your placeholders.

For example, if you are in MVC, you can use something like this in your controller to output different Views:

if (Sitecore.Context.PageMode.IsExperienceEditor){
   return View("MyViewEdit", model);
}
else {
   return View("MyView", model);
}

Alternatively, you can put a similar test in the View itself, but my personal preference is to do the test at the controller level.

-1

To make it visible and large, please make sure

  1. A placeholder settings item exists in Sitecore with the correct Placeholder Key matching that declared in the cshtml rendering.
  2. The placeholder settings item has the Editable setting checked.
  3. The CSS in the page is not preventing the placeholder from being visible.

Follow steps described in below link for settings

https://community.sitecore.net/technical_blogs/b/maximizing_usability/posts/the-power-of-placeholder-settings

  • This post doesn't even try to answer the question. – Harsh Baid Jul 8 '17 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.