Campus Map Instructions

The ‘Campus Map 1 (Galleries)’ Best Practice Asset displays a large interactive map of your school campus with markers and a supporting legend to highlight important locations. 

When the visitor clicks on a map marker or legend label, a panel slides out from the right of the map showing a gallery with one or more images of the chosen location. Each image can optionally display with a supporting title and/or description.

Important: This Best Practice Asset can only be applied once in your website and must be added to a full-width page layout without left or right banners.

The following pixel dimensions are recommended for images in the Campus Map. These will help you to achieve an ideal balance of visual quality and loading speed:

*The height of the Campus Map is dictated by the height of the map image uploaded to it. As such, there are no fixed requirements for the height for the map image, but we recommend a minimum of 653px to provide plenty of space for the location galleries.

There are two ways of preparing your images to match these sizes:

• Use photo editing software such as Adobe Photoshop to scale and/or crop your file before uploading it to Composer.
• If you only need to crop the image, upload it to the Resources module, select it and click on the ‘Crop’ icon button towards the top of the Resource details panel. This will open Composer’s inbuilt image editor where you can crop the file.

Important: The main image or your campus is required prior to the buildout of the Campus Map, during the deployment phase of your website. Once the buildout process has started the campus image cannot be changed.

Tip: We recommend preparing all popup images to the same width and height based on the pixel dimensions recommended above. This will ensure they look uniform and consistent as the visitor explores the different markers.

When the visitor clicks on a map marker or legend label in the Campus Map, a panel slides out from the right of the map showing a gallery with one or more images of the chosen location. 

These galleries are powered by the Resources module with a specific Resources Gallery setup for each location. You can update the images on show for a specific location by updating its corresponding gallery in the Resources module.

Each location gallery must display at least one image and each image may optionally include a supporting title and/or description of the location.

Note: Whilst you can update the content inside each Resources Gallery, the structure of galleries themselves cannot be changed for this Best Practice Asset because each one has been coded to display based on the specific locations in your map.

Upload a New Image

Begin by uploading the image to the Resources module:

1. Click on Resources in Composer’s left navigation. 
2. Click on the ‘Resources’ tab.
3. Create or select an existing folder for your image in the ‘Public’ directory. 
4. Click on the ‘Add Public Resource’ button at the top right of the Resources interface.
5. Choose from the upload options available to upload a new image.
6. Once the upload is complete, update the properties for the image in the ‘Edit Resource Details’ window:
   • Optionally click into the ‘Title’ field and add a short title for your image. This will display along the bottom of the image in the location gallery. If this field is left empty, no title will display.
   • Optionally click into the ‘Description’ content editor and add one or more paragraphs of text describing the image (there is no maximum length). This will display below the image in the location gallery. 
   • Click into the ‘Alt Text’ field and add a short description explaining the contents of the image for visitors who are unable to see it.
7. Click on the ‘Save’ button at the bottom of the ‘Edit Resource Details’ window.

Image Size: The recommended size for images in the location gallery is 800px (wide) by 533px (high).

Note: If the height of an image description exceeds the height of the space available for it on the page, the gallery panel will scroll automatically so that the visitor can read it in full.

Add the Image to the Chosen Location Gallery

With the file uploaded, add the image to the chosen location gallery:

1. Click on Resources in Composer’s left navigation.
2. Click on the ‘Galleries’ tab.
3. Select the ‘Campus Map Gallery’ folder in the ‘Public Galleries’ directory. This folder contains a specific gallery for each marker on your map.
4. Select the gallery for the location you want to update.
5. Click on the ‘Add Public Resource' button at the top-right of the gallery interface.
6. Select the image you uploaded previously and add it to the gallery.
7. Drag and drop the image into the desired position within the gallery.
8. Click the ‘Update’ button at the bottom-right of the gallery interface.

Once the Resources Gallery has been updated, the new image will display automatically in the corresponding slide-out gallery on the map.

Note: The galleries in this Best Practice Asset are only compatible with image files. Video files and other media types are not supported.

The markers on the campus map are configured during the buildout of the campus map and cannot be updated once this process has started. 

If you require updates to the map markers whilst your website is still in deployment, please contact your Project Manager.

If you require updates to the map markers once your website is live, please contact the Finalsite Support team with your request.

Important: If marker updates requested after the buildout of your Campus Map are too extensive, this could exceed the available scope for updates and may have a cost implication. In this situation, you will be advised by Finalsite with how best to proceed.