Humanitarianresponse Logo

Adding an image

If you would like to add an image or a logo to your site and/or sub-site, you can easily do so by creating a "Custom content" widget, as explained below. For this you will need to have a manager role for the space you want to edit.

Before you upload images, make sure you have prepared them for publication. Consult this page for information on managing images.

Let’s take the example of the UNHAS Logo uploaded on the Cameroon home page.

1) Log in and navigate to the space where you want to add the image (Cameroon in this example)

2) Click on the ‘Customize this page’ at the bottom of the page

3) Click on the ‘+’ sign to add the pane “Custom content”

4) Click on “Custom content” and then “Add” a “Free text” box.

5) When you are in the form, complete the following steps:

  • Image: Add the image to the Body by clicking on the image icon in the toolbar. You will be able to select an image stored in your computer and upload it.
  • Title (optional): If you like to indicate a title for the image, write it in the Title field, otherwise you can leave the field empty and only show the image/logo.

6) After uploading the image click on “Finish” at the bottom of the form.

7) To finalize the changes you made, once you are back on the space page click on “Save” at the bottom of the page.

Adding thumbnails in a row

Let's consider the example of the Mozambique operation frontpage which features the following element:

Screenshot of a content element

If we want to have four images perfectly aligned and matched to the width of the content pane, and also behaving properly on smaller screens, we need to add appropriate HTML code. Before adding HTML code, ensure that you have set the text format in your editor to "WYIWYG trusted" and switched over to "Source"

Mockup of HR.info editor

 

Next, paste the following HTML code into the editor window:

<div class="row">
<div class="col-md-3">
<p class="text-center">image 1</p>
</div>
<div class="col-md-3">
<p class="text-center">image 2</p>
</div>
<div class="col-md-3">
<p class="text-center">image 3</p>
</div>
<div class="col-md-3">
<p class="text-center">image 4</p>
</div>
</div>

You can then switch off "Source" and add your images by highlighting the word image and clicking on the media icon in the editor toolbar. You can then also link images to your documents or add text below images as in the Mozambique example above.

If your scenarios differs from the one outlined here, in particular if you have more or less thumbnails, you will need to modify the HTML code above. Let's say you have only three thumbnails: you will need to remove one of the <div class="col-md-3"> ... <div> elements and modify its class to say "col-md-4" (that is to say, your row elements need to add up to 12). If you need assistance with this, kindly reach out to the HR.info's support team at info@humanitarianresponse.info.