Adding Article Spotlights to your Flex Layout pages is quick and easy! Now you have even more ways to display your article spotlights, which we've highlighted in one of our Development Updates articles.  You can also check out sample article spotlights page to give you an idea of what they look like in their default state.  Both of the templates labeled "Article Spotlight List" can be used in any Flex Row column — in any column configuration along side other columns or even all by itself.  However, both of the Article Spotlight List Row templates require their own row.  Later on in this article I'll cover this in more detail.  But first, let's cover what you need to do to get started.

Setting up your Article List configuration file

If you already have an article list out there, you're almost set!  If not, check out our user guide on creating an Article List. It's more likely that you won't have to do this if you already have articles out there and will only have to do this when creating a new article list.

In the Article List component there are two fields in particular that I want to draw your attention to:  Spotlight Headline and Spotlight Number.  The Spotlight Headline field gives you the option to precede your list of articles with a headline (defaults to an H2 heading).  By no means are you required to use the Spotlight Headline, but sometimes it's useful to give context for your non-sighted users for that list of article items.

The other field is Spotlight Number — this is the number of article items that will be listed out on your Article Spotlights.  Typically people list out between three to five articles in their spotlights — any more than that and you're starting to take up valuable real estate.

You also have additional options, including the Default Sort Field and Default Sort Direction fields which define by what and how you wish to display your article list.  Most article lists will sort by Date and in Descending order.

IMPORTANT: You can only have one Article List component for your article list/detail page and wherever you want your article spotlights to appear.  You cannot share multiple Article List components between the same list and expect the links to resolve in the same location.  Simply put:  if you want your article links to work, only one Article List component per Article List.  

Article spotlights rows

There are two Article Spotlight templates that require their own row (i.e. they cannot share a row with another component) — those two templates are Article Spotlight List Row (with thumbnails) and Article Spotlight List Row (feature image and list).  You still should include a Flex Row Configuration component for each Article Spotlight List Row component that you include on the page, which allows you to set a contextual headline along with your preferred background color.

You also will need to select the following layout configuration:  [ - - - - ] — a single column layout that spans all four columns.  After you've set that value, along with the aforementioned items, you'll be good to go.  Make sure that your Flex Row Configuration component precedes your Article Spotlight List Row component.

Use cases and tips

Here are a few use cases and some tips for each of the four Article Spotlight templates, ideas to help trigger ways in which you might use these templates to display your article lists.

• Article Spotlight List — Use these to display a short list of your most recent articles with no thumbnail images. It's best used in a row that follows a more image-heavy row, like one that has Feature Rotators or larger images.  Having a text-only row before or after an image-heavy row offers balance and better content flow.
  
  
• Article Spotlight List (with thumbnails) — This template is about the same as the aforementioned template save for the fact that it also includes thumbnails.  We suggest that you consider using square thumbnail images (a 1:1 height/width ratio) for best visual results.  Additionally, take the mobile view into consideration — use images that have a width of 900 pixels and compressed for web usage. Having a 900 pixel wide image will ensure that it spans the width of the viewport when condensed down to tablet sizes. For photo-heavy images, we recommend the JPG format and a 60-80% quality level in Photoshop, depending upon the image; for more text and graphic-oriented images, we recommend the PNG format (PNG-24).   
  
  
• Article Spotlight List Row (with thumbnails) — This template behaves differently from the other Article Spotlight List (with thumbnails) template and presents them horizontally, each article item in its own column and the thumbnail presented above each headline. You might find this template a great way to draw more attention to your most recent news items with a little more visual pizzazz. Similar to the previous template, we recommend the use of 900 pixel-wide images as the columns collapse when the browser reaches that 899 pixel threshold.  This spotlight, however, looks great with either square thumbnails or more horizontally oriented thumbnails.
  
  
• Article Spotlight List Row (feature image and list) — This last template is quite different from the previous three.  It places special attention to the most recent item in your list, displaying it on the left with the main feature image in your article item, followed by the headlines and short description.  To its right, it displays the remaining list of article items as configured in your Article List component.  For example:  if you set the Spotlight Number to 5 and set your sort to Date and Descending, your most recent article would be featured on the left, and the following four most recent articles would be listed out on the right (with no thumbnails or feature images).  This template is great for when you want to draw the most attention to your most recent article item and subsequent article items carry less weight or importance than the most recent item.  You might use this template if your article list is highlighting upcoming events and want the newest event or highlight to have the most attention drawn to it.

For more ideas, consider coming to our User Group meetings to brainstorm with your fellow users or ask any of our SDL Web (Tridion) developers for some more ideas on how you might use these templates.

None of my links are resolving right! Help!

We've found a scenario where links in your article spotlight list do not resolve to the article detail page, and instead point to the current page.  This bug is a bi-product of the changes made to the Component Templates that are used by the Article Spotlights. Fortunately the fix is simple — republish all of your pages that are using the Article Spotlight List component template and then republish the page using the new Article Spotlight templates.  Re-publishing those pages will force them to be updated with the right code and will also set their linking priority to the correct value. That's all you need do.

Questions?

If you have any questions about the new templates or how you might best use them, reach out to us and we will gladly lend you a hand.  If you need help implementing a new article list or implementing these templates, please submit a Work Order Request detailing what you need done along with your requirements and other details necessary to complete the work.  If something isn't working right, submit an Incident and we'll see what we can do to resolve the issue.