TL;DR - Replace the default SVG logos/spinner in the Voyager assets/images folder.
The default distribution of Voyager Explorer has a logo in the upper-right corner and loading spinner that can both be customized.
These images are found in the ‘assets/images/’ folder of the Voyager package. By default, Voyager points to a CDN for the asset folder. So to customize any images, you will have to have your own copy of the asset folder and point to it using the ‘resourceRoot’ configuration attribute.
How do I change the Voyager Explorer logo?
Option 1: No logo
If you prefer to have no logo at all, see API Example: UI Configuration for information on how to customize what UI components are displayed in Voyager.
Option 2: Adding your own logo
-
Step 1: Configure Voyager for a custom resource folder
If you have deployed your own Voyager package, simply point the component to the local ‘assets’ folder using the ‘resourceRoot’ attribute. For a default installation using the provided sample pages, this could just be the relative path ‘./’. If you have changed the folder structure or your landing page is hosted elsewhere, update the path accordingly.
If you are not using a local Voyager package, you will still need to have a copy of the ‘assets’ folder. You can grab it from the [most recent GitHub distribution] (https://github.com/Smithsonian/dpo-voyager/releases/latest) or CDN. Put this folder somewhere accessible online and then point your resourceRoot path to it as described above.
-
Step 2: Get/create an appropriate logo
There are two Voyager logos, small and full. Small is displayed when the title element and logo element begin to overlap to allow as much room for the title as possible. The full logo displays at all other times.
Logos must be in the SVG format.
Small: This logo image should be square and look legible at 40px by 40px.
Full: This logo image should follow a 2:9 aspect ration (height:width) and look legible at 40px by 180px. If your logo is not long enough to fill that space, add padding to the left-hand side of the image.
-
Step 3: Replace default images
Name your new logos ‘logo-sm.svg’ and ‘logo-full.svg’ and replace the default logos in your assets/images folder by the same name. The file names must be the same for Voyager to successfully find them.
How do I change the Voyager Explorer loading spinner?
-
Follow ‘Step 1’ from the logo instructions above to configure your resource folder.
-
Create a new square spinner image in the SVG format that looks good at 120px by 120px and save it as ‘spinner.svg’. Replace the default spinner in your assets/images folder by the same name. The file name must be the same for Voyager to successfully find it.
