Images, Videos and Maps
Images are best added in Contents before creating the corresponding page
- Full-size images for Haiku: 1140 pixels wide
- Portrait images: 300 pixels wide
- Logos: 240 pixels wide
- Logos on Research Group page:s 60 pixels wide
- Social Media logos on Research Group pages (glyphicon): 40x40 pixels
Videos are ideally hosted on Vimeo or YouTube
University branding toolkit
University guidelines provide the tools to create a necessary visual uniformity among the rich diversity that is contained within the University. Visit the page Branding Toolkit Donload
How to add an image to the website
- From the homepage, select ‘Contents’, ‘Images library’, select a folder
to create a new folder: select ‘Add new…’ ‘Section’
- Select ‘Add new…’, ‘Image’ – full-size images should be 1140px wide
- Give the image a title and alternative text, browse and save - copyright can be added on the tab 'Metadata'
- Adjust the different ratios
An image gallery can be created in a table, see instructions how to add an image gallery in the Haiku guide
Note: there might be instances (particularly on cover pages) where images tagges as 'not in use' are in fact in use; take care when deleting images from the image library.
How to add an image to a page
In the tab 'Media', select the Lead image, with the appropriate image ratio and possibly a caption.
If a video is selected as 'Primary media', it will replace the 'Lead image' at the top of the page; it is recommended, for News and Podcasts and some pages in Research Groups, to add a 'Listing image'
How to add a video to a page
A video can be added as 'Primary media' in the tab 'Media'
To add a video to the body of a page, use ‘Smart embed’ (last icon) and add the embed code (Vimeo or YouTube).
- For Vimeo videos: in Vimeo, select 'Share', select ‘Show option’s, select ‘Fixed size’ and un-tick ‘Show text link’
Note: Haiku handles the fixed size; select ‘View profile’ and it sorts itself out
- For YouTube: add ?rel=0 at the end of the URL to stop the video suggesting other videos to watch at the end, for example: https://www.youtube.com/embed/lkpIwzHv2v0?rel=0
How to select which video to suggest at the end of a Vimeo video
In Vimeo, navigate to Settings > Interaction tools
- End screen = More videos
- From = Showcase videos
- Showcase: select the category
If you cannot view the category (for example Global Health)
- In Chrome, open DOM view (Cmd + shift + C) > Element tab
- Select the Showcase box, go to the bottom of the Element tab and open all Div until you get the <ul
- Drag the #10 <li> item (Global Health) further down the list to become visible
Note: Select 'Save changes' each time you navigate to a different tab in the settings, otherwise the changes will not be saved
How to host a video on the TropMed site
Upload the video in Contents > Files library > Video files
On the page, use the embed code:
<video width="100%" height="100%" controls>
<source src="/files/video-files/coming-soon.mp4" type="video/mp4">
Your browser does not support the video tag.
(replace coming-soon with the name of the video)
See for example, video on the Intranet internal video test page
How to add a border to an image
- Layer > Flatten image
- Layer > New Layer from Background, name the layer 'Border'
- Adjust the canvas size (5px more on each side: 10px vertical & 10px horizontal)
- Use the magic wand to select the border
- Use the bucket to fill the border
How to add a University Visitor Map
Estates Services has worked with digital mapping consultant SmartNE to bring visitors, students, and staff an improved interactive online map, follow instructions on the IT Help page.
When setting up the iframe, change width to 100% for the map to fill the width of the page.
See How to find us page as an example.
How to add a Google map
Go to Google maps - map maker, select 'get started' and 'create a new map'
- Select the title to edit name and description
- Expand 'Base map' to select map style
- Search (or zoom in) for the exact point on the map, add marker (editable)
To get the embed code, the map must be publicly shared (select 'share' and 'change' to public)
Suggestion: do not 'Let others see your name and photo on this map'
The code is under the three dots by the title
How to make the map responsive so that it fills the column width
If the map doesn't fill the width of the column: under media, add the iframe within a DIV: <div class="iframe-container"></div>