Optimize the Content Authoring Experience: Image Renditions and Device Channels – Part 2

In my last article, "Optimizing Content Authoring with Image Renditions and Device Channels part 1," I talked about the challenges associated with optimizing the content-authoring experience with image renditions and device channels.

I pointed out that a combination of Device Channel panels and Edit Mode panels in your page layouts is a great approach to take.  Now I’m going to show you how to implement the approach.

Using Device Channel Panels and Edit Mode Panels

To accomplish this task and provide content authors with an easy editing experience, use a combination of Device Channel panels and Edit Mode panels in your page layouts.  Edit Mode panels are used to display content/controls only when a page is in edit mode.  You can learn more about Edit Mode panels and how to create them at the MSDN site here.

The diagram in Figure 1 illustrates this pattern. 

Notice the Publishing Page field controls associated with the device channel that are not the default device channel appear twice in the page layout.

One instance of each of these controls are nested within an Edit Mode panel inside the Default Device Channel panel. 

This is how you give content authors the ability to edit these items in the default device channel.

 

Here’s what the code looks like to implement the Default Device Channel panel (and the components it contains) pictured in the diagram above.

Set Renditions

Figure 2 shows an example of what the content-editing experience looks like when you follow this pattern. 

The red box represents the Default Device Channel panel.  The black box represents the Edit Mode panel.  Notice the Publishing Image field control (named Hero Image) associated with the default device channel allows you to select an image for display in the default device channel.  Under the Publishing Image field control, there is a link called Set Hero Image Renditions.

Clicking the Set Hero Image Renditions link displays the Publishing Image field controls used to set the image renditions for the other device channels.  This is accomplished via the JavaScript you see in the code sample above.

As you can see in Figure 3 below, this enables content authors to set the image renditions for all device channels from the Default Device Channel view of the page while in Edit mode. 

The expand-and-collapse functionality makes it easy to set the image renditions, then collapse the section to continue editing page content while seeing as much of the page content as possible at the same time.  This eliminates some page scrolling, which expedites the content editing process.

Figure 4 shows a view of the page in Edit mode while appending the ?Devicechannel=iPad QueryString parameter to the URL in the web browser. 

This causes SharePoint to render the page in the iPad device channel.  This is the same approach I talked about above.

Notice the green box: It represents the iPad device channel, which only displays the Publishing Image field control associated with the iPad device channel whose RenditionID property has been set appropriately (see corresponding code below).

Returning to the Default Device Channel view of the page and specifying an image for each Publishing Image field control, the page looks like this in Edit mode (see Figure 5). 

The same image is used in all three Publishing Image field controls and the appropriate image renditions are displayed.

After saving the changes, we can see the appropriate image renditions are applied for each Device Channel view.

The page looks like this in the default device channel (see Figure 6):

The page looks like this in the iPad device channel.   It’s easy to spot the differences in the image renditions in this example (see Figure 7):

There are also additional benefits associated with this approach and image renditions.

1. Content authors have the flexibility to choose different images for each device channel.
2. Content authors may edit and tailor image renditions on a per page/image/device channel basis.  This provides ultimate flexibility.
3. Image renditions are set in the page layout for each Publishing Image field control and they cannot be changed by content authors.  This ensures consistency and optimized image delivery for mobile devices which access the site via the Ddevice channels.

Figure 8 shows an example of the second benefit described above.  First, edit the image renditions for this image by selecting the EDIT RENDITIONS option on the popup menu for the image.

Then, change the portion of the image to display for this image rendition (see Figure 9):

After saving the image rendition, the page looks like this in the iPad device channel (see Figure 10):

Here are two examples of the third benefit described above (see Figure 11, below). In this example you see the page in Edit mode (viewed in the iPad device channel). 

Notice the Pick Rendition button is disabled in the ribbon.  Setting the RenditionID property on the Publishing Image field control disables this button.

Furthermore, in the dialog that you use to add/edit an image in the Publishing Image field control, the image rendition drop-down list is preset to the appropriate image rendition, and this control is disabled. 

As you can see, this prevents content authors from choosing the wrong image rendition and also makes their lives easier because they don’t have to worry about selecting the appropriate image rendition (see Figure 12):

These examples illustrate this pattern within page layouts; however, the same pattern may be applied inside Master pages as well.

Keep in mind, Device Channel panels are also especially helpful for injecting HTML and CSS elements into your pages, which affect the overall layout of the web page.  They may be used to fine tune your web pages on a per device channel basis.  Here is such an example.

.canviz-clear-float{
    float: none;
    clear: both;
    visibility: hidden;
}