CCS Drupal Guide
  • Introduction
  • Drupal Platform Introduction
  • Drupal User Roles & Responsibilities
  • Workbench Moderation
  • Drupal Websites: Getting Started
    • Drupal Text (WYSIWYG) Editor
    • Taxonomies
  • Managing Menus
    • Sidebar Menus
  • Best Practice Tips
  • UG Drupal Content Types
    • Banners
    • Book
    • Course Outlines
    • Events
    • FAQ
    • Featured Item
    • News
    • Page
    • People Profiles
    • Service
    • Social Media Account
      • Live Feeds
    • Webform
  • Accessible Content Guide
    • Accessibility Basics
      • Accessibility First Content Development
      • HALT: Accessibility with the Drupal Text Editor
      • Accessible Design Intro
    • Content Titles & Headings
    • Links
    • Colour
    • Documents
    • Images
    • Tables
    • Lists
    • Audio & Video
    • Other Accessible Content
  • Advanced Topics on Drupal Websites
    • Blocks
    • Collapsible Sections / Accordions
    • Categorizing and Displaying Profiles
    • Headings that Expand and Collapse
    • Tabs
    • Customizing Content Layout
    • Mini Panel
    • Google Maps
    • Google reCAPTCHA
    • Bootstrap: Typography
  • SiteImprove
  • Google Analytics
  • Style Guide Code Snippets
  • Home Page Layout Options
  • Home Page Layout Tutorials
  • Content Type View Panes
    • Course Outline Panes
    • Event Panes
    • FAQ Panes
    • Feature Panes
    • News Panes
    • Social Media/Feeds
    • Service Panes
    • People profiles
  • Customizing Site Search
  • Client FAQ
Powered by GitBook
On this page
  • Creating a Banner Image
  • Editing a Banner Image
  • Removing a Banner Image
  • Displaying a Banner
  • To Display The Banner On The Front/Home Page Only
  • Filtering Banner Images by Category on Specific Pages
  • Banner Block Spacing Issue

Was this helpful?

  1. UG Drupal Content Types

Banners

PreviousUG Drupal Content TypesNextBook

Last updated 4 years ago

Was this helpful?

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.

Creating a Banner Image

  1. On the Administration bar, navigate to Add Content > Banner.

  2. Once selected, the folowing page will appear.

  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.

  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.

  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.

  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.

  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 <front>.

  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. 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 <Front> and select Only the listed pages. 6. Select Save Blocks.

Banner Block Spacing Issue

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 section.

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. 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.

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 <div> tag (if it isn't already). 5. An example of a image wrapped in a <div> tag is: Note: Don't forget the final </div> tag. 6. Scroll to the bottom and click Save blocks.

Editing a Banner Image
Creating a Banner Image
Editing a Banner Image
Removing a Banner Image
Displaying a Banner
Filtering Banner Images by Category on Specific Pages
Banner Block Spacing Issue
An Example of a Banner
Banner Creation Page
Banner Sort
Banner Sort
Configure Banner Block Page
Configure Banner Block Page
Demo block being created