Rotating banners

The Rotating Banner module allows you to easily create multiple, slide-show-style banners and blocks for your site and:

• add multiple images to the banner(s)
• add various transition effects between the banner images
• add customized texts and links to one or more banner images

Configuration

Rotating banners are displayed in blocks on your Drupal Gardens site. This means that all the configuration options for your banner(s) can be found via the blocks page.

1. Go to the Blocks page at Structure > Blocks.
2. Click "configure" for the "Rotating banner: Main banner", listed under "Banner".
3. Delete the dummy images used in the default banner.
4. Banner images - Click "Add a new slide to this banner" to add your own image. Add and configure as many images as you wish for the banner.
   • Click "Choose banner image" - You may select images from your site's Media library, upload a new image, or provide the URL of an online image you wish to use. The image you select will be shown in the "Preview" field.

     Note: image sizes - If you are leaving your banner in the "Banner" region, 934 or 960 pixels are good widths to try for your banner images. The banner will look better if all the images it contains are the same height. See also "Banner Settings" below.

     

   • Layout - This sets the position of the text on your image.
     • Standard layouts (top/bottom, left/right) - move the banner headline and text to that position.
     • Custom layout - This option adds more controls and options, allowing you to add as many headlines and text areas as you need and position them anywhere on the banner image.
   • Edit banner headlines and text areas by double-clicking them on the banner image.

     

   • Link - Clicking on the banner will link to the address you enter here. You may use:
     • absolute URLs (http://example.com)
     • relative URLs (node/12)
     • paths on your site (contact)
     • "<front>" links to the default front page of your site.
   • Click "Save" to save the image and settings.

   

   

5. Banner settings - Once you have your images in place, move on to the following settings.
   • Banner size
     • Option: The banner will shrink to fit the page - If your images are wider than the display area of the banner's block, they will be shrunk to fit. If your images are smaller than the display area of the banner's block, the banner will be resized to match them. Banner images will never be stretched, only shrunk.
     • Option: The banner will not shrink to fit the page - You may specify a maximum width and/or height for your banner. Larger images will be cropped to fit these dimensions.
   • Transition type - Choose from a variety of transition effects.
   • Automatically change slides - If you uncheck this option, banner slides will only change when your users click on the banner controls (see below).
   • Delay between slides in milliseconds - Define how long each image is displayed. 1000 milliseconds = 1 second.
   • Type of control to switch between slides
     • None - your users cannot skip to another slide manually.
     • Buttons - a row of small "buttons" is displayed below the banner, one for each slide. Your users can click on these to advance to that slide in the banner.
     • Numbers - a row of small numbers is displayed below the banner, one for each slide. Your users can click on these to advance to that slide in the banner.
6. Region & Visibility settings - Set the display region for your main site theme (listed above) and administration theme ("Seven" by default - under normal circumstances, you want this set to "none".) You may also set this region on the Blocks page at Structure > Blocks. For more information on blocks, block regions and visibility settings, see the Blocks help page.

How to add one or more rotating banners later

You may create new rotating banners at any time and put them in any block region and page(s) on your site.

1. Click "Add a rotating banner" on the Blocks page at Structure > Blocks.

   

2. Banner title - This title is to help you identify the banner. It isn't displayed to your site users.
3. Configure as above adding new images as needed.

Rotating Banner demo video

Watch this Rotating Banner demo by Drupal Gardens engineer Jacob Singh.

Creative Commons attributions

Creative Commons attributions for images used making this page can be found here.