Quotes & Testimonials

Using the Quote component or the Quote component in combination with the List component allows you to insert styled Testimonial Galleries to a page.

The following instructions provide information on how to create and insert styled Quotes, Testimonials, and Testimonial Galleries into your page via Tridion.

Table of Contents

Creating Quote Components

The first step in adding Quotes & Testimonials is to create a Quote component:

Open

In the Building Blocks folder of your respective website, click New Component (highlighted in blue above) in the Create tab (highlighted in yellow above) of the navigation bar.

You will be taken to a new page for creating the component (shown below):

Open

There are a few required steps to creating an individual Quote component:

1. Name the Quote component

2. Choose Quote from the Schema drop down menu (highlighted in yellow above).

3. Insert a Quote and Source for each testimonial.

   • The rest of the fields are optional.

The optional information can help provide context or additional information for the quote or source, but the most important (especially in a Testimonial and Testimonial Gallery) is an image.

To attach an image to the quote, click the magnifying glass icon to the right of the Image field, highlighted in green above).

• You will be taken to a pop up window, showing your Building Blocks folder (shown below):

In order for images to appear in this window, you must add them to Tridion as Multimedia Components (see https://ysmweb.atlassian.net/wiki/spaces/HELP/pages/1772880021/Components#Multimedia-Components for more information).

Select the desired image, and click Insert to attach the image to your Quote component.

When you are satisfied with the information in the Quote component, click Save and Close.

Inserting a Quote Component Into a Page

To put a Quote onto a web page, you must navigate to the desired page in the root folder and open it.

• Click Insert in the Component Presentations tab of the page, which will open up the pop up with the Building Blocks folder in it (shown below):

Select the Quote component you created, then choose one of the following options from the Component Template drop down menu (highlighted in yellow above).

• Quote: Just the text of the quote and the source, without any of the additional information.

• Quote Banner: The text of the quote, the source, and the additional information (like a title) displayed over the image.

• Testimonial Blue: The source, additional information, and text of the quote in a large blue box, with the image next to it.

• Testimonial Gray: The source, additional information, and text of the quote in a large gray box, with the image next to it.

• Testimonial Small Blue: The source, additional information, text of the quote, and image inside a smaller blue box.

• Testimonial Small Gray: The source, additional information, text of the quote, and image inside a smaller gray box.

Once you’ve chosen the type of component you want, click Insert to add it to your page.

Back in the window for your page, click Save and Close and you are ready to Publish.

Individual Quote Examples

The screenshots below are examples of the different Component Templates you can choose from when adding your Quote component to a page, as they look on a website:

Quote and Quote Banner:

Testimonial Blue and Gray:

Testimonial Small Blue and Gray:

Creating a List Component for a Testimonial Gallery

You can create a Gallery of Testimonials (example above) by using a List component made up of several Quote components.

To start, create several Quote components (information about this can be found above in these instructions).

Once all of your Quote components have been completed, you must create a List component.

• This component will house all of your Quote components.

• Then, you can add the List to a page, where the quote components will make up the slides in a Gallery.

In the Building Blocks folder of your respective website, click New Component in the Create tab of the navigation bar.

You will be taken to a new page for creating the component (shown below):

At this stage, you must label the component a List component before you can add your Quotes to it.

1. Choose List from the Schema drop down menu (highlighted in yellow above).

2. Do not enter any text in the Display title field.

3. In the List element field, click on the folder/magnifying glass button (highlighted in blue above).

A window will pop up that shows you the Building Blocks folder:

To add your individual Quote components to the List component:

1. Select a Quote component you've created.

2. Click Insert (highlighted in yellow above).

3. Back in the window for your List component, click on the green + icon (highlighted in yellow below).

The pop up for the Building Blocks folder will appear again, and you can enter your remaining Quote components by selecting them and using the Insert button, like you did before.

When you have multiple Quote components in the list, you can sort them by dragging the sort icons (highlighted in yellow above) or delete them using the trashcan icons (highlighted in red above).

Once your list is complete, click Save & Close in the Home tab (highlighted in blue above).

Inserting Your List Component Onto a Page as a Testimonial Gallery

To actually put the Testimonial Gallery onto a web page, you must navigate to the desired page in the root folder and open it.

• Click Insert in the Component Presentations tab, which will open up the pop up with the Building Blocks folder in it (shown below):

Select the List component you created, then choose Tetimonial Gallery Blue or Testimonial Gallery Gray from the Component Template drop down menu (highlighted in yellow above).

Once you have chosen, click Insert to add the component to your page.

Back in the window for your page, you’ll see that your Testimonial Gallery component is there.

When you are happy with your page, click Save and Close and you are ready to Publish (see https://ysmweb.atlassian.net/wiki/spaces/HELP/pages/1772912817 for more information).

Example of a Testimonial Gallery on a Page

Below is an example of the Testimonial Gallery List Component we created in the above instructions, as it lives on a web page: