Cookies on this website
We use cookies to ensure that we give you the best experience on our website. If you click 'Continue' we'll assume that you are happy to receive all cookies and you won't see this message again. Click 'Find out more' for information on how to change your cookie settings.

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

Videos are ideally hosted on Vimeo or YouTube

How to add an image to the website

  • From the homepage, select ‘Contents’, ‘Images library’, select a folder
    to create a new folder: click on ‘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

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', click ‘Show option’s, select ‘Fixed size’ and un-tick ‘Show text link’
    Note: Haiku handles the fixed size; click ‘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
  • Click on 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: Click on '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 Google map

Go to Google maps - map maker, click 'get started' and 'create a new map'

  • Click on 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 (click 'share' and 'change' to public)

The code is under the three dots by the title