You can use the Dynamic Banner Background enhancement to customize the banners that display behind the titles of locations in your digital workplace. When you set a banner for a top-level location, such as a page, space, or channel, all nested locations will display the same banner automatically. This allows each space or section of a site to have a distinct look and feel.
Sections in this article:
- Considerations
- Set up the enhancement
- Configure this enhancement
- Turn the enhancement on
- Turn the enhancement off
- Use the enhancement
Considerations
- Access permissions: You must be an enterprise or workplace administrator or a member of a group with the Manage Theme role to modify the parameters of this enhancement. However, you only require at least Write access to the banners folder to add new banners.
- Banner URLs: If the URL of a location that you are applying a banner to changes, you must re-upload a new banner image with a name that matches the location's new URL.
- Space naming: If the URLs of multiple locations have the same segment, they all use the same banner image. For example, if there are two spaces with a channel called 'folder,' they will both use an image called 'folder' as their banner image, even if the parent spaces have different banners set.
Set up the enhancement
To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.
Upload banner images
- Find the URL of the location where you want to add a banner. Locations nested under this location will also use the assigned banner.
- Before uploading the image, change the filename of the banner image on your device to match the last segment of the location's URL. For example, if your location's URL was
/resources/knowledge_base, the file name of the banner would beknowledge_base. - Upload your banner image to the banner folder. If you are setting up these banners for the first time, the default folder is
/theme/images/banners. Before publishing the file, ensure the file name matches the URL segment exactly, without a file extension. If necessary, edit the file name and then publish the image.
Repeat the above steps for all pages where you want a custom banner to display. Finally, upload an image titled "default" to the banner folder. This image will be used for pages with no specific banner assigned.
Be aware that you can assign nested locations a banner to override any banner inherited from a parent location. For example, if the Knowledge Base page used in the above instructions contained a Questions forum (/resources/knowledge_base/questions), you can create a banner for that specific forum by uploading an image with the filename questions to your banner folder.
Add enhancement code to the site header
Warning
Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.
Add the following code to the header of your digital workplace:
<!-- Dynamic banner backgrounds begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/css/setDynamicHeaderBackground.css" />
<script type="text/javascript" src="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/js/setDynamicHeaderBackground.js"></script>
<script>
setDynamicHeaderBackground({
imageFolderPath: "/theme/images/banners",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundGradient: "linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)",
fallbackImageName: "default",
});
</script>
<!-- Dynamic banner background ends -->Configure this enhancement
Update banner images
To update the banner on a page, repeat the steps to upload banner images above for any new banners, or a new version of any existing files.
Customize the banner settings
Once the enhancement has been enabled, the following code will be in the header of your digital workplace:
<script>
setDynamicHeaderBackground({
imageFolderPath: "/theme/images/banners",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundGradient: "linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)",
fallbackImageName: "default",
});
</script>You can modify the following parameters of the code block to customize some aspects of the banners' functionality and appearance.
| Parameter | Description |
|---|---|
| imageFolderPath |
The file path to the folder where your banner images are uploaded. This can be any folder channel in your digital workplace that all members have Read access to. If this value is blank, the default value is If you are unsure which folder has been configured as the banner folder:
|
backgroundRepeat |
This sets the repeat of the banner background image using the When giving a value to this parameter, ensure it is wrapped in quotation marks. For example, If the value is left blank, the enhancement will use the default value |
backgroundSize |
This sets the size of the banner background image using the When giving a value to this parameter, ensure it is wrapped in quotation marks. For example, If the value is left blank, the enhancement will use the default value |
backgroundGradient |
This sets the gradient overlay over the banner background image so there is sufficient contrast between the image and the banner text. See the gradient styling section for details on how to customize this. The enhancement will not apply a gradient if the value is left blank or the property is removed. |
fallbackImageName |
This sets the image that will be used if a banner image is not found for a particular page. The image should be in the banner folder, and the value you enter in this field should be the last segment of the image's URL. For example, if your default image's URL were The enhancement will not use a fallback image if the value is left blank or the property is removed. If no fallback image is used in a location, the default banner set for the digital workplace will also not have a gradient applied. |
Gradient styling
The gradient applied to the banner (backgroundGradient) can be adjusted depending on the theme of the digital workplace. See the MDN documentation on CSS gradients for details on creating a custom gradient.
Here are two example gradient options that work well for either light or dark text:
Dark header text
If the header text is dark, a light gradient should be applied to make the text readable while the banner image is still visible:
"linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)"If the banner titles are long, the 20% value can be changed 33% to extend the gradient to cover more of the image. Depending on the site design, this value can also be lower or higher.
Light header text
If the header text is light, a light gradient should be applied to make the text readable while the banner image is still visible:
"linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 5%, rgba(255,255,255,0) 100%)"If the banner titles are long, the 5% value can be changed 20% to extend the gradient to cover more of the image. Depending on the site design, this value can also be lower or higher.
Turn the enhancement on
Once the code has been placed, the enhancement is ready to be used. If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and --> after the middle lines, and save the changes to the header.
Turn the enhancement off
To turn the enhancement off, you can remove the code entirely or add <!-- before and --> after the middle lines, as shown below, and save the changes to the header.
<!-- Dynamic banner backgrounds begins -->
<link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/css/setDynamicHeaderBackground.css" />
<script type="text/javascript" src="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/js/setDynamicHeaderBackground.js"></script>
<script>
setDynamicHeaderBackground({
imageFolderPath: "/theme/images/banners",
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundGradient: "linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)",
fallbackImageName: "default",
});
</script>
<!-- Dynamic banner background ends -->Changes to:
<!-- Dynamic banner backgrounds begins -->
<!-- <link rel="stylesheet" type="text/css" href="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/css/setDynamicHeaderBackground.css" /> -->
<!-- script type="text/javascript" src="https://enhancementsprod.blob.core.windows.net/enhancements/dynamic-banner-background/js/setDynamicHeaderBackground.js"></script> -->
<!-- <script> -->
<!-- setDynamicHeaderBackground({ -->
<!-- imageFolderPath: "/theme/images/banners", -->
<!-- backgroundRepeat: "no-repeat", -->
<!-- backgroundSize: "cover", -->
<!-- backgroundGradient: "linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255,255,255,0) 100%)", -->
<!-- fallbackImageName: "default", -->
<!-- }); -->
<!-- </script> -->
<!-- Dynamic banner background ends -->Use the enhancement
Members will see the updated banner when they visit the channel, page, or space.