How to make featured items easy to manage

KenticoWeb development

A common function of content managed websites is the ability to add featured content at an editorial level. For this to behave at it's best, it needs to be simple to use for the content editors and provide a quick view of the currently featured items.

Let's suppose we're working on some change requests for the Dancing Goat website (one of the Kentico demo sites if you didn't know). Now, lets add to that a requirement that we want to add four featured cafes to the home page. What approaches can we use to achieve that?

One approach we see quite often is to add a yes/no field to the Cafe (Dancing Goat)page type called 'IsFeatured'. A repeater is then added to the home page that looks for the top four cafes that have this flag set and present them to the page.

OK, that's great and it works. For the content editors though, it can be difficult to find out which cafes are set to be featured and what order they should be shown in. What would be great is the ability to see and manage those featured items.

How can we do this?

To create a manageable list of featured content we have two options:

1. Create a Relationship name to allow us to associate our cafes to the home page.
2. If our home page has it own Page type, we can add a new Pages field to store the featured cafes.

Using either of these approaches ends up having a very similar implementation as far as the home page's template is concerned; we add a Repeater that takes it's source data from the Relationship in referent to either the current document or the document with a specified NodeGUID. The only difference really is the name of the relationship itself, and this is because the Pages field really is nothing more than an ad-hoc relationship under the hood.

I've used the Dancing Goat site to build my demo, so the steps below will be what I used to get everything ship shape. To aid that, I've also created a new Text/XML transformation for the Cafe (dancing Goat) page type called listFeatured as follows:

Using relationship names

Using relationship gives you an advantage in that the relationship can be added from either side (so I can either link news articles from the home page or from the news article itself). It also means that by looking at the Related pages tab on either the news articles or the home page, we can see where that content is used. What we can't do however is order the content manually. The steps to get this up and running are:

1. Open the Relationship names application and create a new item named is featured cafe that is limited to Pages and make sure it is assigned to the current site.
2. Open the Pages application and navigate to the Home page. Select the Related pages tab. Got to town adding cafes using the is featured cafe relationship name.
3. In the Pages application, navigate to the Home page and click on the Design tab.
4. Add a new Repeater web part to the ZoneContinents web part zone and configure it as follows:
   1. Path: /%
   2. Page types: DancingGoat.Cafe
   3. Select top N pages: 4
   4. Columns: CafeCity, CafeStreet, CafeZipCode, CafeCountry, Cafename, CafePhoto
   5. Transformation: DancingGoat.Cafe.ListfFeatured
   6. Relationships > Main page: Display pages related to the current page
   7. Relationships > Relationship name: is featured cafe
5. Position the Repeater above the continent map.

Using the pages field

Pages fields have a number of benefits as they allow you to limit the number of items, manually order the items, and specify a starting location in the content tree. Where there a little less elegant is showing up in the Related pages tab.

The steps to setting this up are a bit longer, as we need to create the field too. Also, as this is Dancing Goat, the home page is a Page (menu item), so I'm adding my Pages field to that; I would recommend a dedicated page type for the home page, as they're typically different to any other page anyway.

1. Open the Page types application and edit the Page (menu item) page type by adding the following field:
   1. Field name: FeaturedCafes
   2. Date type: Pages
   3. Field caption: Featured cafes
   4. (advanced control settings) Starting path: /Cafes
   5. (advanced control settings) Limit of related pages: 4
2. Open the Pages application and navigate to the Home page. Select the Formtab. Add four cafes using the Featured cafes field. Drag and drop to get the cafes in the order that you want.
3. In the Pages application, navigate to the Home page and click on the Designtab.
4. Add a new Repeater web part to the ZoneContinents web part zone and configure it as follows:
   1. Path: /%
   2. Page types: DancingGoat.Cafe
   3. Select top N pages: 4
   4. Columns: CafeCity, CafeStreet, CafeZipCode, CafeCountry, Cafename, CafePhoto
   5. Transformation: DancingGoat.Cafe.ListfFeatured
   6. Relationships > Main page: Display pages related to the current page
   7. Relationships > Relationship name: Page (menu item) (featured cafes)
5. Position the Repeater above the continent map.

The end result

As you can see, configuring the repeater is near identical and both methods will give you a result similar to this:

So why do it?

Putting everything like this in one place makes it easier to manage for the content editors. The happier the people are who manage your site, the more successful the project can become. As your site grows, using methods similar to this make the overall maintenance of content simpler and clearer leaving more time to create great content instead of spending your time managing how and when it is displayed.