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).

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:

Your browser does not support the video tag.

</video>

(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

In Photoshop

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>

Cookies on this website