Create Article Spotlights

Create an Article List page

The first step to creating working Article Spotlights is to create an Article List page and at least one published article. If you have not already created these and need help doing so, please refer to these instructions for creating an Article List page.

Choose a Layout for the Article Spotlights

Next you'll need to pick the layout you want for your Article Spotlights. Article Spotlights can only be used on Flex Layout pages, on either the Main Landing Page or the Internal Landing Page.

Article Spotlights come with four component templates, and an example of each component template are available to view on the Article Spotlight example page. The four component templates are:

• Article Spotlight List - this displays articles in a column, just text without any images
• Article Spotlight List (with thumbnails) - this displays articles in a column with thumbnail images on the left
• Article Spotlight List Row (feature image and list) - this component template fills up an entire flex row. The most recent article is displayed prominently on the left, with a large image, and the next most recent articles are displayed in a column on the right side of the image.
• Article Spotlight List Row (with thumbnails) - this component template also fills up an entire flex row. The most recent articles are displayed from left to right, with thumbnails above each article. This template will not display more than 4 articles.

In addition to picking one of the component templates above, you will also need to select:

• which page template you'll use (the Flex Layout Main Landing Page or the Flex Layout Internal Landing Page)
• which Flex Row Configuration component layout you want to use (in the "Examples of all available layouts" section below, you can see what all your options look like)
• how many articles you want to display inside the Article Spotlight

Examples of all available layouts

Flex Layout - Main Landing Pages (has no left navigation):

• All layouts for the Article Spotlight List on a Flex Layout Main Landing Page
• All layouts for the Article Spotlight List (with thumbnails) on a Flex Layout Main Landing Page
• All layouts for the Article Spotlight List Row (feature image and list) on a Flex Layout Main Landing Page
• All layouts for the Article Spotlight List Row (with thumbnails) on a Flex Layout Main Landing Page

Internal Landing Pages (has left navigation):

• All layouts for the Article Spotlight List on a Flex Layout Internal Landing Page
• All layouts for the Article Spotlight List (with thumbnails) on a Flex Layout Internal Landing Page
• All layouts for the Article Spotlight List Row (feature image and list) on a Flex Layout Internal Landing Page
• All layouts for the Article Spotlight List Row (with thumbnails) on a Flex Layout Internal Landing Page

Once you've selected which page type and layout you wish to use, please proceed to the next step. 

Create the Flex Row Configuration Component

Now you will need to create a Flex Row Configuration component in order to display your article spotlights. 

1. In the 020 section, navigate to the folder where the components for the Flex Layout page with the article spotlights will reside.
2. Create a new component and complete the following fields:
   1. Name: enter a name for the component here
   2. Schema: select Flex Row Configuration
   3. Row Display Title (optional): if desired, you can enter a headline for your row here. It will display at the top of the row, in the center. 
   4. Column Layout: select the column layout, based off the selection you made in step 2.
      If you plan to use either the Article Spotlight List Row (feature image and list) or Article Spotlight List Row (with thumbnails) component templates, then you should select the one column layout [----]. Both of those components take up an entire row, so no other columns are needed within the row.
   5. Row background color: select the background color for your row. White is white, Dark is dark gray, Light is light gray, and Branded is the primary brand color set in your variables CSS file (the default color is the state's blue hue).

Save and Close your component.

Create Additional Components (optional)

If you selected either the Article Spotlight List or the Article Spotlight List (with thumbnails) component template, along with a Flex Row Configuration of 2 or more columns, you will need to create additional components to fill in the other columns of the Flex Row. 

Other components you could include (but aren't limited to) are: rotators, jumbo images, calendars, upcoming event highlights, blog highlights, etc. 

Please create those components at this time. 

Select the Article Spotlight Settings

In the Article List component created for the Article List page (step 1), there are two fields that control how Article Spotlights display. Those two fields are circled below in red:

Configure your article spotlights by locating the Article List component you created in Step 1, open it, and then edit the following two fields:

• Spotlight Headline (optional) - enter a headline that will appear above your article spotlights. If your article spotlights take up just one column, the headline will appear at the top of that column. If your article spotlights take up an entire row, the headline will appear centered at the top of the row.
• Spotlight Number - enter the number of articles that should appear in your spotlight section. We generally recommend 5 or less, since article spotlights are intended to highlight only your most recent content, but your business needs may vary depending on your overall page layout.

Save and Close the article list component.

Create the Flex Layout Page

1. In the 050 section, navigate to (or create) the structure group where the Flex Layout page will reside.
2. Create a new page.
3. Fill in the Name, File Name, Page Display Name, Dublin Core Title, and Dublin Core Description fields.
4. For the Page Template field, uncheck "Inherit from Parent." Then, in the drop-down menu for the field, select either:
   • Flex Layout Main Landing Page - this page template does not include a left navigation menu, and is usually used on the home page of a website.
   • Flex Layout Internal Page - this page template includes a left navigation menu. 
5. Click the Design tab.
6. Click the Add button:
   1. Navigate to the Flex Row Configuration component you created in step 3, select it, apply the Flex Row Configuration component template, and insert it into the page.
   2. Navigate to the Article List component you created in step 1, select it and apply one of the following component templates, and insert it into the page:
      • Article Spotlight List - this displays in a column without thumbnails
      • Article Spotlight List (with thumbnails) - this displays in a column with thumbnails
      • Article Spotlight List Row (feature image and list) - this displays in a row, with a the most recent article's image featured on the left 
      • Article Spotlight List Row (with thumbnails) - this displays in a row with thumbnails above each article
   3. Navigate to any additional components you created in step 4, and insert them with the appropriate component templates in the appropriate order.
7. Close the Insert Component Presentation pop-up window.
8. Save and Close your Article List page.

Publish the Flex Layout Page

When you've completed all the steps above, then all you need to do next is publish your page. 

In the 050 section, navigate to the Flex Layout page you built in step 6, right-click and select Publishing > Publish.

Select the site you wish to publish to and click Publish. This will send the Flex Layout page to the publishing queue.

Verify the page looks like you want it to, and edit/republish as needed.