Different Banner Image Per Page

The below article will explain how to implement and manage a design which allows for different banner images per page.

How To Manage The Banner Images

Follow these steps to setup banner images for a page:

  1. Navigate to the pages screen of the admin panel (located in the left side bar of the admin panel, under Content).
  2. Click the page you would like to add a banner image to. This will open the page editor.
  3. Click the "Attached Media" sidebar, located on the right-hand side of the screen.
  4. Create a new folder, it must be called header-images.
  5. After clicking the "Create Folder" button, click on the newly created folder to enter it.
  6. Upload your banner images, if more than one image is uploaded they will appear in a slideshow.

Child pages inherit their parent page's banner images. This means that if the below page structure existed, the "Our-Staff" and "Our-Mission" pages would use the "About-Us" banner image if they  did not have banner images in their attached media. If the "About-Us" page did not have banner images  either, they would use the banner images from the Home page.

  • Home
    • About-Us
      • Our-Staff
      • Our-Mission
    • Contact

Coding The Design

Open the source view of the relevant website design and add the following code to the area where the banner will appear:

<div class="banner"> <logic:variable as="headerimages" value="[? determineHeaderImages() ?]" /> <logic:if test="count($headerimages)"> <layout:rotator id="header_rotator" startatrandom="false"> <ul> <data:repeater as="file" datasource="$headerimages"> <li> <standard:image alt="" src="[? $file['media_url'] ?]" width="980px" height="200px" class="bannerImage" maintainaspect="crop" /> </li> </data:repeater> </ul> </layout:rotator> </logic:if> <logic:else> <standard:image alt="" src="/media/website_designs/2/banner-image.png" width="980px" height="200px" class="bannerImage" maintainaspect="crop" /> </logic:else> </div>

Explaining The Magic:

  • Line 2: This code creates a new variable, which can be referenced by $headerimages. The value of this variable will be an array of images, retrieved by the server code below.
  • Line 4: If there were any images assigned to the variable $headerimages.
  • Line 5 - 13: An image rotator made up of all the images in $headerimages.
  • Line 16 - 18: If there weren't any images assigned to the variable $headerimages, use a default image instead.

Click the "Server Code" tab at the top of the editor window and add the following PHP code:

<?php function determineHeaderImages() { $strPage = \Components\Website\Pages::currentPageId(); while($strPage) { if(file_exists('media/website_pages' . $strPage . 'header-images/')) { $arrFiles = \Components\Website\Media::getChildren('/media/website_pages' . $strPage . 'header-images/'); if(count($arrFiles)) { return $arrFiles; } } $strPage = \Framework\Components\TextualIds::getParent($strPage); } return []; } ?>