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:
- Navigate to the pages screen of the admin panel (located in the left side bar of the admin panel, under Content).
- Click the page you would like to add a banner image to. This will open the page editor.
- Click the "Attached Media" sidebar, located on the right-hand side of the screen.
- Create a new folder, it must be called header-images.
- After clicking the "Create Folder" button, click on the newly created folder to enter it.
- 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
-
About-Us
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:
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: