Web Development Documentation

Getting the OpenStreetMap Image

1. On the frontend of the website, look for the 'Contact Us' page, which can be accessed through the main menu bar, to find the address of the department 
2. Alternatively, you can scroll down to the page footer to find the address on the right-hand side
   
3. Type the address into the search bar on OpenStreetMap
4. Take a screenshot of the map, including the red pin

Cropping the image on Birme

1. Open Birme
2.  Upload your screenshot using the 'BROWSE FROM YOUR COMPUTER' button
3. On the right side of the screen under the 'RESIZE/CROP' tab, adjust the dimensions accordingly: width: 1300px, height: 400px
4. Drag the rectangle on your uploaded image so that the red pin is in the center of the cropped image
5. Download the cropped image using the "DOWNLOAD FILES" button and rename the file as '[department name]-map-cropped' e.g. 'biology-map-cropped' 

Setting Up the Module

1. Log onto the backend of the department's website by appending '/administrator' to the URL
2. Go to Content > Site Modules OR Extensions > Site Modules and search for 'Google Map' or 'Contact Us' to find the module.
3. If the module does not exist, press the '+ New' button to create a new module
4. Select 'Custom' module type
5. Under the 'Module' tab, set the title of the module to 'Contact Us - Map'
6. Set Position to 'bottom-b'
7. Under the 'Menu Assignment' tab, set Module Assignment to 'Only on the pages selected'
8. Under 'Menu Selection', set 'Assign to Menu Items' to None
9. Scroll down to the 'Contact Us' option and select it. (This will ensure the module only applies on the Contact Us page)
10. Save the module

Editing the Module (Backend)

1. Log onto the backend of the department's website by appending '/administrator' to the URL
2. Go to Content > Site Modules OR Extensions > Site Modules and search for 'Google Map' or 'Contact Us' to find the module.
3. In the main body of the Module Tab, type in the address of the department office
4. Open and search for the address in Google Maps
5. Copy the Google Maps link to the address 
6. Link the text to the Google Maps address by highlighting the text and selecting the 'Insert Link' button
7. Paste the Google Maps link into the 'URL' box
8. Set 'Target' to 'Open in new window'
   For more instructions on linking text, see our How To Guide for Creating Links in Articles.
9. Upload the new OpenStreetMap image and insert it below the address (using the 'insert image' button to the left of the 'insert link' button)
10. Alternate Text should be the listed building address.
11. When in the Image Editor popup, set the 'Width' to 100% and delete any contents from the 'Height' box.
12. Also in the Image Editor popup, uncheck the 'Equalize' box and set 'Bottom Margin' to 20.
13. Click 'Update'.
    For more instructions on uploading images, see our How To Guide for Adding an Image to an Article.
14. Link the image to the Google Maps address by clicking the image, then clicking the 'Insert Link' button (Steps 7 to 10)
15.  Add a line below the map image. Type 'View in Google Maps'. Highlight this text and add a link to the same Google Maps link, setting Target to 'Open in new window'
16. In the Image Editor popup, navigate to the 'Advanced' tab. Type 'button' into the 'Classes' field, and select it from the dropdown. 
    
17. Click 'Insert'.
18. Save and Close the module.