# Quotes

## What is Quotes

Quotes is a web part that allows you to **spread tips and values** on your SharePoint intranet. Thanks to this feature, you can create **personalized banners** to make the intranet a **source of daily inspiration** and a powerful **means to convey corporate values**. You can feature quotes from iconic figures, the CEO, company leaders, or any colleague, thereby involving them in the company's culture and growth. The component can be configured so as a new quote is automatically published every day, which allows you to have a dyamic home page. 

{% hint style="info" %}
Explore the **advantages** of Intranet.ai **Quotes** by [**clicking here**](https://intranet.ai/features/quotes/) to learn more.
{% endhint %}

***

## Add the Quotes web part to a SharePoint page

* If your page is not already in edit mode, click on **Edit** at the top right of the page.
* For this web part, it is recommended to use a full-width column. So, click on the **Plus** <img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FBLIbO1HsOK9GWPOpwpUR%2F%2B%20button%20(column).png?alt=media&#x26;token=afb496fb-c886-4295-a623-eb6394860574" alt="Web part edit button" data-size="line"> button to add a new full-width column.&#x20;
* You will see a number of web parts that can be added to this type of section. Choose **Quotes**.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FEAstS7wbD3D7hH5uTGjZ%2FQuotes-1.png?alt=media&#x26;token=24e64151-30fe-4cd1-b433-03ccc45e6543" alt=""><figcaption></figcaption></figure></div>

* Click on the **Edit** **properties** <img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FYrT9lOXIMNawTkMSbfXZ%2Fimage.png?alt=media&#x26;token=e24ee13a-df0f-41e1-943b-f48979c74110" alt="" data-size="line"> button on the left of the web part to open the property pane and configure the List settings and the Customization settings. See below for more information on each of these sections.

***

## Configuration&#x20;

1. [List settings](#list-settings)
2. [Customization settings](#customization-settings)

### List settings&#x20;

In this section, you need to indicate the **list** from which the web part will retrieve information.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FHzveItG47U9NH74iy9YV%2FQuotes-2.png?alt=media&#x26;token=3fb088ec-0e19-4d4e-9d26-a7c853afcd5d" alt=""><figcaption></figcaption></figure></div>

* Enter the **URL of the Quotes list**.
* If the list contains more than one item, and you flag the **Get latest quotes** box, the web part will show the latest quote you have created. If you do not flag this box, the web part will show quotes according to their publication date (See [Create a new quote](#create-a-new-quote) for further details about the publication of quotes).&#x20;

### Customization settings

In addition to the text of quote, the banner can feature a picture. In this section, you can customize the settings related to the **picture** and the **colors** of the banner.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FYgRbVxyZTO8lhAr1OIsk%2FQuotes-3.png?alt=media&#x26;token=d2cde5e4-2eba-4cc3-9c1c-aebe3c1388fa" alt=""><figcaption></figcaption></figure></div>

* You can change the focal point of the image by **moving it horizontally** (x position) and **vertically** (y position). You can also **zoom** the photo.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FqTOYo1t3gdIgyPcMo6HU%2FQuotes-4.png?alt=media&#x26;token=a4afddfd-1816-4430-80ba-e1cc36d1cdef" alt="" width="257"><figcaption></figcaption></figure></div>

* Here you can change the **text color** and the **background color**, either by entering a specific hex code or by choosing a color from the panel.

***

## Create a new quote&#x20;

To create a new quote, take the following steps:&#x20;

* Click on the **Settings** icon on the top right of the page, then click on **Site contents**.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FAgBMUaBmBGgTjxhJSO8N%2FSite-contents.png?alt=media&#x26;token=53610af3-76ff-4c67-8afb-fc091f99a271" alt=""><figcaption></figcaption></figure></div>

* Select the **Quotes** list.&#x20;

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F6XUwh2qTIqAK7k8KOZn4%2FQuotes-6.png?alt=media&#x26;token=6546e50c-f1bd-4fb0-9d35-382ecced4400" alt=""><figcaption></figcaption></figure></div>

* Click on **New** to add a new item. The following panel will appear:&#x20;

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FPhjjNQD8El4RZXIEibg6%2FQuotes-7.png?alt=media&#x26;token=7f79ce2e-90af-4684-aaa0-91bdcfbf3a29" alt="" width="563"><figcaption></figcaption></figure></div>

* **Author**: write the author of the quote, or, alternatively, a short sentence that offers a tip or conveys an important value (see picture below). This text will be in bold.
* **Quote text**: write the text of the quote. &#x20;
* **Order**: the number you enter in this field corresponds to the day on which you want to publish the banner. This feature allows you to plan the publication of quotes.&#x20;

> For example, if you want to publish a quote on January 1st, you need to enter 1 in this field.&#x20;

* If you leave the Order field empty, the same banner will be displayed every day. Alternatively, if you have more than one quote, you can set a specific publication date for each of them. &#x20;
* **Image Url**: enter the URL of the picture featured in the banner. This should be a picture you previously uploaded to the SharePoint intranet (see below).
* Once you have completed the panel, click on Save.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FEukfqRxvnC4qip66TFzd%2FQuotes-9.png?alt=media&#x26;token=03a01008-2f2e-4e51-b16c-51d05ec855fe" alt="" width="563"><figcaption></figcaption></figure></div>

**To create the image URL, follow these steps:**

* Upload the picture to the Site Assets folder in the Site contents (or any other folder on your intranet).
* In the **Sites Assets** document library, select the picture.&#x20;
* Click on the **Info icon** at the top right of the screen.
* Click on the **Path icon** to copy the icon URL.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F7m8Kfm1XVgnJLTHb9aSX%2FQuotes-8.png?alt=media&#x26;token=5a786e7a-18b8-45a6-a767-02335987e63d" alt=""><figcaption></figcaption></figure></div>

* Finally, paste the icon URL into the required field.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fl2TH0Otu04QJDTM8sxqP%2FQuotes-10.png?alt=media&#x26;token=ea4911c9-1f8b-4667-a94e-e4fc950e340e" alt="" width="512"><figcaption></figcaption></figure></div>

The final result will look like this:&#x20;

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FKGSXFGXVvH4Mw6LQAFv1%2Fimage.png?alt=media&#x26;token=5aaeb51f-2ca0-49d6-9824-aff510404e68" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Intranet.ai has created over 100 ready-to-use quotes on different topics, including quotes designed for specific times of the year. [Click here](https://intranet.ai/features/quotes/) to learn more and receive support in the publication of quotes.&#x20;
{% endhint %}

{% embed url="<https://intranet.ai/>" %}