Create Rotators

Create a headline and introduction for the page

The first thing to build is a General Content component with the headline and introductory text for the page. Below are the steps for creating this component:

1. In the 020 section, navigate to the folder where your content for this page will reside.
2. Create a new component and complete the following fields:
   1. Name: enter a name for the component here
   2. Schema: select General Content
   3. Title: enter the headline for your page here. 
   4. Content: enter the introductory text that will go at the top of your page. This is a rich-text field, so you can add other elements like images, links, etc.
3. Save and Close your component

Gather, prepare, and upload the rotator images

Before you can build your rotator components, you'll need to gather, resize, and upload the images you plan to use in your rotator.

Figure out which rotator template you'll use

Spend some time looking at the examples of rotators available for your website, and pick which one you'd like to use. Knowing with rotator you'll use will help guide which images you select for your slides, because you may need to focus on certain image shapes, such as long and narrow.

Selecting images to use in the rotator

As a general rule of thumb, when picking the images for your rotator, images that are 1200 pixels wide will work fine for most rotators. The only exception is if you intend to create Jumbo Feature Rotators, in which case you'll want to look for images that are at least 2000 pixels wide.

The height of the image is flexible, you can choose what works best (rectangle, square, etc.) for the rotator you plan to create.

Resize all images to matching measurements

Once you've gathered all the images you want to use in your rotator, resize all the images so that they share the exact same height and width measurements in pixels. If you don't do this, your rotator (and webpage) will "bounce" as each rotator slide loads.

Upload the images into Tridion

In Tridion, navigate to the 020 folder where you wish to store the images, and upload them. Get instructions for uploading multimedia components, if you need them.

Create the rotators

You will need to make a separate component for each slide in your rotator. Follow the directions below to create the components.

Tip: You cannot have more than one rotating carousel on a page. Even if you try inserting the rotators at separate spots in the page, and give them different styles via component templates, the system will still mash all your rotators into one carousel. Some page layouts also restrict rotators to certain parts of the page, and will ignore where you place your components within the page. 

1. In the 020 section, navigate to the folder where the content for this page will reside.
2. Create a new component and complete the following fields:
   1. Name: enter a name for the component here
   2. Schema: select either General Content or Flex Spotlight
      1. If you selected General Content, follow these instructions:
         1. Title: enter anything in this field. (This field is required, but will not display on the rotator.)
         2. Feature Title: enter a brief headline for the rotating slide. 
         3. Feature Description: enter a brief description here, this will display on the rotating slide.
         4. Feature image: select an image to display on this rotating slide.
         5. Feature image description: enter a description of the feature image. This will act as the alt-text for the slide.   
      2. If you selected Flex Spotlight, follow these instructions:
         1. Headline: (optional) enter a brief headline for the rotating slide.
         2. Image: select an image to display on this rotating slide. 
         3. Rich Text Copy: (optional) enter a brief description here, this will display on the rotating slide.
         4. Component link...: if linking to another page on your website, browse to a component used in the published page you want to link to and select that component.
         5. If not.. destination URL: if linking to another website, enter the URL in this field.   
3. Save and Close your component.
4. Repeat these steps for each slide you wish to create for your rotator.

Create additional components

Since rotators can only be used in Flex Layout pages, you will need to create Flex Row Configuration components for your page. Please refer to the page on Flex Row Configuration components, to learn more about options for laying out your page.

You will also need to create additional components for your page to complete your flex rows. Create the additional components at this time. Here is more information on possible component types you may want to include in your page:

• General Content
• Flex Spotlights
• Article List Spotlights
• Code Block

Create the page

1. In the 050 section, navigate to (or create) the structure group where the 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, select either:
   • Flex Layout - Internal Page: this will create a page with a left navigation
   • Flex Layout - Main Landing Page: this will create a page without a left navigation
5. Click the Design tab.
6. Click the Add button:
   1. Navigate to the General Content component you created in step 1, select it, apply the Page Introduction component template, and insert it into the page.
   2. Navigate to the rotators you created in step 3, select them, apply one of the following component templates, and insert them into the page:
      • Feature Rotator - Default Dark: this creates a rotator with a dark gray bar along the bottom.
      • Feature Rotator - Default Light: this creates a rotator with a light gray bar along the bottom.
      • Feature Rotator - Overlay Dark: this creates a rotator with a semi-opaque dark gray bar across the slide.
      • Feature Rotator - Overlay Light: this creates a rotator with a semi-opaque light gray bar across the slide.
      • Feature Rotator - Side Dark: this creates a rotator with a dark gray text box to the right of the image.
      • Feature Rotator - Side Light: this creates a rotator with a light gray text box to the right of the image.
      • Jumbo Feature Rotator: this creates a rotator that sits across the entire top of the page, just under the navigation. The image is overlaid with a semi-opaque dark gray text area.
      • Jumbo Feature Rotator - Branded: this creates a rotator that sits across the entire top of the page, just under the navigation. The image is overlaid with a vertical semi-opaque branded blue text area on the left side of the image.
   3. Navigate to any additional components you created in step 4, select them, and apply the appropriate component templates.
7. Close the Insert Component Presentation pop-up window.
8. Save and Close your page.

Publish the page

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

Navigate to the page you built in step 5, right-click on it and select Publishing > Publish.

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

You will need to republish the navigation after publishing a new page.