Cookies on this website

We use cookies to ensure that we give you the best experience on our website. If you click 'Accept all cookies' we'll assume that you are happy to receive all cookies and you won't see this message again. If you click 'Reject all non-essential cookies' only necessary cookies providing core functionality such as security, network management, and accessibility will be enabled. Click 'Find out more' for information on how to change your cookie settings.

Accept all cookies Reject all non-essential cookies Find out more

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.

</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>

Haiku guide