Several times a year the home page banners on the sites may need to be updated. This is one of the more complex procedures Trust staff may need to carry out, so a procedure checklist has been prepared so you can ensure consistent results when changing banners.
Updating the Photoshop file
The banner photo must be prepared before upload using this photoshop file: CBT-banner-master-cropped.psd
Each banner is prepared in Photoshop as a layered image with the desired photograph and the banner graphic elements on separate layers. When the banner is to be updated, the procedure below should be followed.
- Select your new photograph, keeping in mind the horizontal crop and the ‘cutout’ required for the logo. Often photos will work best if they are shot with the banner usage in mind. A generally well-composed photo may – or may not – be appropriate for the banner, depending on whether the story the photo tells will remain strong when the strongly horizontal crop required for the banner is done.
- Open the “CBT-banner-master.psd” file and paste the new image onto the banner.
- In the layers panel drag the new image into the “banner-pic.png” folder directly under the “read-more-screen” layer.
- Resize and position the new image as it is to appear on the website.
- If there is to be a text message on the banner, move the “read-more-screen” layer image to where the text will look best on the new image (the “read-more-screen’ purpose is to darken the background so the white text is easier to read). If no text message is to be on the banner, turn the “read-more-screen” layer off. (Note that in general there will not be a text message, but instead live text can be added to the Visual widget, as noted under ‘Installing the Banner’ below.)
- The banner should now be ready for the website. To save the image, first go under ‘File’, the ‘Generate’ and select “Image Assets” (it may already be selected). Save the file.
- The new image titled “banner-pic.png” will be in an assets folder “CBT-banner-master.psd-assets” in the same folder as the psd file.
The new banner image is now ready to install.
Installing the New Banner
The new banner photo is uploaded to the Header Right widget area at https://ourtrust.org/wp-admin/widgets.php. Here are the steps required to upload a new photo.
- The header image may be replaced through editing the ‘Visual Editor’ widget placed in the Header Right Widget Area.
- The image (.png) is uploaded to the body of the widget using the ‘Add Media’ button.
- The CSS Class ‘banner-pic’ must also be included in the widget settings (at very bottom).
- Leave the widget title empty.
- This has already been done on all three sites, so you should should just need to upload/replace the image to the existing widget in the future. Select the current image | Choose the pencil icon (Edit) from the list of options | Choose Replace from the Image Details window
- Using the Media uploader, make sure the alignment is set to none and the image size is original/full size (no resizing, cropping).
- Image dimensions need to match PSD provided by Gord Draibye and be .png format.
- The new photo will automatically appear in the correct size and location in the home page banner.