# Banners * [Creating a Banner Image](/ugcontenttypes/howto-banner.md#creating-a-banner-image) * [Editing a Banner Image](/ugcontenttypes/howto-banner.md#editing-a-banner-image) * [Removing a Banner Image](/ugcontenttypes/howto-banner.md#removing-a-banner-image) * [Displaying a Banner](/ugcontenttypes/howto-banner.md#displaying-a-banner) * [Filtering Banner Images by Category on Specific Pages](/ugcontenttypes/howto-banner.md#filtering-banner-images-by-category-on-specific-pages) * [Banner Block Spacing Issue](/ugcontenttypes/howto-banner.md#banner-block-spacing-issue) **Content Creators** can create a site Banner with captions and a link. There can be multiple static banners that change every time the page is refreshed or they can be displayed as a slide show of up to 5 images. For properly displayed banner, the recommended image dimensions are **1140 x 292**. ![An Example of a Banner](/files/-Ldu9Am2Rk4vXcGwaVwa) ## Creating a Banner Image 1. On the Administration bar, navigate to `Add Content` > `Banner`. 2. Once selected, the folowing page will appear. ![Banner Creation Page](/files/-Ldu9Am9YxK1BXi_eDi3) 3. Enter the required information: 1. **Title** 2. **Category** 3. **Headline:** The main text attached to the image of the banner. 4. **Headline Link:** Used to hyperlink the headline text. The headline link can link to any URL. If the link is internal, please use a relative path. The headline link is mandatory. 5. **Image**: Choose the image that you would like to upload as the banner. Then select `Upload`. 6. **Alt Text**: You must enter Alt text describing the image if it is non-decorative. 7. **Summary (Optional)**: Appears below the headline of the banner image. 8. **Keywords (Optional)**: Like tags, keywords are a filtering mechanism. 4. Select the order in which you would like this banner image to appear (random order by default, 0 = first, 1 = second). 5. Once the above steps are completed, select `Save`. ## Editing a Banner Image 1. On the Administration bar, select `Find Content`. 2. Filter the content by "Banner" using the "type" dropdown menu. ![Banner Sort](/files/-Ldu9AmEqds3paditHKj) 3. On the desired banner, select `edit`. 4. Make the required changes. 5. Once the above steps are completed, select `Save`. ## Removing a Banner Image 1. On the Administration bar, select `Find Content`. 2. Filter the content by "Banner" using the "type" dropdown menu. ![Banner Sort](/files/-Ldu9AmQPPm8xybbJoDg) 3. On the desired banner, select `delete`. **!IMPORTANT!**: Ensure that you are removing the correct banner image. ## Displaying a Banner **/! Note**: Only Web Managers/Site Owners can configure & display banners. 1. On the Administration bar, select `Structure`. 2. Select `Blocks`. 3. Locate the "View: B1 - Image slider (Banner): Block - Autoplay" display. 4. Select `configure`. 5. After selecting `configure`, the banner block configure page will open. ![Configure Banner Block Page](/files/-Ldu9Am_lOTTadMANrG4) 6. Select "Top Bar" in the drop-down menu under "Region Settings". 7. Under "Show block on specific pages" in the "Visibility Settings" section, you can choose the following display options: * **all pages except those listed**: The block will be displayed on all pages of the website **EXCEPT** for those listed in the field below. * **only the listed pages"**: The block will **ONLY** be displayed on the pages of the website listed in the field below. 8. Once the above steps are complete, select `Save Block`. ### To Display The Banner On The Front/Home Page Only 1. On the Administration bar, select `Structure`. 2. Select `Blocks`. 3. Locate the "View: B1 - Image slider (Banner): Block - Autoplay" display. 4. Select `configure`. 5. After selecting `configure`, the banner block configure page will open. ![Configure Banner Block Page](/files/-Ldu9AmiKuKEGlWJk5d3) 6. Select "Top Bar" in the drop-down menu under "Region Settings". 7. Under "Show block on specific pages" select "only the listed pages". 8. In the text field below, enter ``. 9. Once the above steps are complete, select "Save Block". ## Filtering Banner Images by Category on Specific Pages By following the steps below, you can create a banner slideshow that is (a) filtered by a specific category and will (b) only show on specific pages. 1. Creating a Banner Category 1. On the Administration bar, select `Structure`. 2. Select `Taxonomy`. 3. Locate "Banner Category" and select `add terms`. 4. Add a term to identify each unique slideshow (eg. Front Page). 5. Enter a description if needed. 6. Select `Save`. 7. After selecting save, take note of the term ID associated with your new term (you can find this is the URL when you edit the term after creating one and clicking the edit button). Write it down or remember it for later. 8. Navigate to each banner that you want to show in this slideshow and set its category to match the one you just created. For steps on how to do this follow the [Editing a Banner Image](/ugcontenttypes/howto-banner.md#editing-a-banner-image) section. 2. Create a Mini Panel for you new Banner Category 1. On the Administration bar, select `Structure`. 2. Select `Mini panels`. 3. Select `Add`. 4. Enter a descriptive administrative title for your unique slideshow. 5. Enter a description if needed. ![Demo block being created](/files/-Ldu9Amo3UM84LI_OxKQ) 6. Select `Continue`. 7. Select `Continue` again. 8. Select `Continue` again. 9. Select the cog icon in the top left corner of the Top section. 10. Select `add content`. 11. Under `View panes` select `View: B1 - Image lider (Banner): Manual`. 12. Add the category name in the category box and enter the number of items to show. 13. Select `Finish`. 14. Select the cog icon in the top left corner of the Top section. 15. Under `Style` select `change`. 16. Select `Bootstrap` and `Save`. 17. Select the cog icon on the right side of `View: B1...` 18. Under `Style` select `change`. 19. Select `No markup at all` and `Next`. 20. Select `Finish`. 3. Place your Mini Panel 1. On the Administration bar, select `Structure`. 2. Select `Blocks`. 3. Locate the minipanel you just created, select `Configure`. 4. Under `UG Cornerstone Theme (default theme)` select top bar. 5. Configure which pages you would like to display your banner on by adding their paths to and selecting `Only the listed pages` or select the pages you do not want to display the banner by adding their paths and selecting `All pages except those listed`. 6. To add the banner to the front page, add `` and select `Only the listed pages`. 6. Select `Save Blocks`. ## Banner Block Spacing Issue **When you add a banner to a custom page using blocks, you will notice a small space underneath the banner, to fix that, take the following steps**. 1. Go to `Structure` > `Blocks`. 2. Find the block you have added to the top bar **Should be underneath the 'Top Bar' Section**. 3. Click **Configure** and on then click *Source* on the **WYSIWYG editor**. 4. Wrap the small code bit in a `
` tag (if it isn't already). 5. An example of a image wrapped in a `
` tag is: ![](https://github.com/ccswbs/UoGd7-Training/tree/bbc19358d0cd69c9426a38c047f024ea7007324a/sites/default/files/YOURIMG.jpg) **Note: Don't forget the final `
` tag.** 6. Scroll to the bottom and click `Save blocks`. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ccsdrupalguide.uoguelph.ca/ugcontenttypes/howto-banner.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.