Advanced Page Editor

This tutorial applies to Glass.Mapper.Sc v3.0.5 or Glass.Mapper.Sc.Razor v3.0.4 or later.

Previous tutorials have discussed how to use the Page Editor but this tutorial will cover all the Page Editor functions available including support for images and links.

The list below summaries the list of functions available where the model is passed into the method:

Editable<T>(T model, Expression<Func<T, object>> field)
Editable<T>(T model, Expression<Func<T, object>> field, AbstractParameters parameters)
Editable<T>(T model, Expression<Func<T, object>> field, string parameters)
Editable<T>(T model, Expression<Func<T, object>> field, Expression<Func<T, string>> standardOutput)
Editable<T>(T model, Expression<Func<T, object>> field, Expression<Func<T, string>> standardOutput, AbstractParameters parameters)
RenderImage<T>(T model, Expression<Func<T, object>> field, ImageParameters parameters = null, bool isEditable = false)
BeginRenderLink<T>(T model, Expression<Func<T, object>> field, NameValueCollection attributes =null, bool isEditable = false )
RenderLink<T>(T model, Expression<Func<T, object>> field, NameValueCollection attributes = null, bool isEditable = false, string contents = null)

These methods have been shortened on controls that have a model property, for example the GlassUserControl (for WebForms), GlassView (for MVC) and TypedTemplate (for Glass.Mapper.Sc.Razor):

Editable(Expression<Func<T, object>> field)
Editable(Expression<Func<T, object>> field, AbstractParameters parameters)
Editable(Expression<Func<T, object>> field, string parameters)
Editable(Expression<Func<T, object>> field, Expression<Func<T, string>> standardOutput)
Editable(Expression<Func<T, object>> field, Expression<Func<T, string>> standardOutput, AbstractParameters parameters)
RenderImage(Expression<Func<T, object>> field, ImageParameters parameters = null, bool isEditable = false)
RenderingResult BeginRenderLink(Expression<Func<T, object>> field, NameValueCollection attributes =null, bool isEditable = false )
RenderLink<T>(T model, Expression<Func<T, object>> field, NameValueCollection attributes = null, bool isEditable = false, string contents = null)

Editable

The Editable method is the most basic method to use to make a field editable and should be used with most fields that are page editable. For example lets assume I have a template with a Title field and the following class:

public class DemoClass{
    public virtual string Title { get; set; }   
}

We can make it Editable using the following code:

    //Webforms
    <%= Editable(Model, x => x.Title) %>  //explicitly stating the model
    <%= Editable(x => x.Title) %> //using the Model property 
       
    //MVC or Glass.Mapper.Sc.Razor
    @Editable(Model, x => x.Title) //explicitly stating the model
    @Editable(x => x.Title) //using the Model property   

Sometimes you might want to make a field editable but have different output when the page is rendered. For example perhaps we have a search page with the text "Result 1 to 10 of 1232" and want to give the editor the ability to control how this text is rendered. We know that the start, end and total numbers will come from the search provider and we need to combine this with the content from Sitecore, we can achieve this by using the Editable method that allows you to assign a standard output as the second parameter:

    //Webforms
    <%= Editable(x=>x.SearchString, x=> string.Format(x.SearchString, startResult, endResult, totalResult)) %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @Editable(x=>x.SearchString, x=> string.Format(x.SearchString, startResult, endResult, totalResult))

In Page Edit mode the first parameters will be used: x=>x.SearchString. When the page is rendered to the user the second part is used x=> string.Format(x.SearchString, startResult, endResult, totalResult).

The final overrides allow for parameters to be passed to the underlying Sitecore field renderer.

RenderImage

The RenderImage method can be used to render the correct HTML to put an image on the page and it can be used to make the image editable in the Page Editor. The image property must be of type Glass.Mapper.Sc.Fields.Image. Assuming I have the following model:

public class DemoClass{
    public virtual Glass.Mapper.Sc.Fields.Image Image { get; set; }
}

I can render the image to the page using the following:

    //WebForms
    <%= RenderImage(x => x.Image) %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @RenderImage(x=>x.Image)

Making an image editable is very simple and can be achieved by adding the isEditable named parameter:

    //WebForms
    <%= RenderImage(x => x.Image, isEditable: true) %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @RenderImage(x=>x.Image, isEditable: true)

The final parameter allows you control how the image is rendered using Sitecore's inbuilt image processor, for example we can change the size of the image:

    //WebForms
    <%= RenderImage(x => x.Image, new {W = 120, Width = 100, Height = 50}, true) %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @RenderImage(x=>x.Image, new {W = 120, Width = 100, Height = 50}, true)

The parameters you specify are passed in the media request URL to the Sitecore image processor.

RenderLink

The RenderLink method allows you to render links  of  type Glass.Mapper.Sc.Fields.Link. Lets assume I have the following class:

public class DemoClass{
    public virtual Glass.Mapper.Sc.Fields.Link Link { get; set; }   
}

To render the correct HTML link elements to the page we just need to call the RenderLink method:

    //WebForms
    <%= RenderLink(x => x.Link) %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @RenderLink(x => x.Link)

To make the link editable we can added the isEditable named parameter:

    //WebForms
    <%= RenderLink(x => x.Link, isEditable: true) %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @RenderLink(x => x.Link, isEditable: true)

By default the text displayed to the user in the link is either the value from the Description field for external links or the name of the target Sitecore item. However sometimes you might want to have more control over the link text presented to the user. To achieve this we can use the contents parameter:

    //WebForms
    <%= RenderLink(x => x.Link, isEditable: true, contents: "Read More >>") %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @RenderLink(x => x.Link, isEditable: true, contents: "Read More >>")

BeginRenderLink

The BeginRenderLink can be used to render a link that should contain multiple HTML elements rather than the simple text elements show in the RenderLink method. This is useful for when you might want to make images or other HTML elements links that still work within the Page Editor. Assuming we have the following model:

public class DemoClass{
    public virtual Glass.Mapper.Sc.Fields.Link Link { get; set; }   
}

We can make an image a link and still support the Page Editor using the following:

    //WebForms
    <% using (BeginRenderLink(x => x.GeneralLink, isEditable:true))
       { %>
        <%=RenderImage(x=>x.Image) %>
    <% } %>
    
    //MVC or Glass.Mapper.Sc.Razor
    @using (BeginRenderLink(x => x.GeneralLink, isEditable: true))
    {
        @RenderImage(x => x.Image)
    }

The important thing to notice is the use of the Using statement to control where the opening and closing tags should be rendered.