Page Editor Experience – Add a Thumbail Image to our Presentation Component

This tip, was given to me by my senior and colleague Nilesh Thakkar. He blogs about his Sitecore Journey, at http://sitecorejourney.nileshthakkar.com/

He said, some things are not compulsory to be done, but good if they are done to make it easy for the client. Like say add a thumbnail image to your presentation component. How? Lets have a look.

We already know “A Picture is worth thousand words” so yes, we got to agree upon what Nilesh Thakkar says! So, lets see, how it can be done and how helpful can it be for our clients/users.

Setting up a plot:

Lets for example say, we have a Blog to manage in Sitecore. We have already created a few presentation components for various sections of the page as below.

Header Section:

  1. Blog Header
  2. Blog Search

Left Sidebar Section:

  1. Blog Roll
  2. Recent Comments
  3. Recent Posts
  4. Featured Posts
  5. etc..

Main Content Section:

  1. Blog Article Summary
  2. Blog Article
  3. Article Share Tools
  4. Blog Comments

Why Add an image to Presentation Component?

For any Page Editor user, it might definitely be very easy if there is an image, depicting what that particular presentation component does.

Now, lets say, a user is configuring a Blog Landing page, and is confused between two presentation components — Blog Article Summary and Blog Article. So he/she can add it to a page, configure a datasource to it, and see how it looks. We developers always unit test various scenarios whenever we develop some code, to make sure it works well. So instead of, the page editor user has to configure and check, if we add an image of that component while testing, wont it be a great idea?

How to add it?

Let’s say, the Blog Article Summary component looks like as below:

Blog-Summary

while the Blog Article Component Looks as below:

Blog-Article-Complete

To configure its thumbnail lets go to the Presentation Component (sublayout in this case) in the content tree.

Make sure that Standard values checkbox is checked in View Tab of the ribbon.

Sitecore-Ribbon-View-Tab-Standard-Values

Go to the Appearance Section and find the Thumbnail field in it.

Content-Item-Appearance-Section-Thumbnail-Field

Upload an appropriate Thumbnail image, suitable to the component as well as that makes it recognizable while adding it through the page editor.

Blog-Summary-Thumbnail

Save the item, and now, lets go to the Page Editor mode and click the Components button.

Click-Components-Button-Add-to-Here

Lets click on “Add to here” so that Select a Rendering dialog opens.

Select-a-rendering

As we see above, the Blog Article Summary component is self explanatory, it becomes pretty easy for the Page Editor users to identify and select it if they want to use it.

So simple it is to make someone’s life easy, by applying a very small effort,  in a right direction. And according to me, that is what a developer is for — to make the life of normal people easy, in whatever way possible, by making great technology.

Happy Sitecoring! 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s