Add a photo

Once you've added your text, you'll start adding and adjusting media to bring your story to life. 

The first image you see in the example story will serves as a banner image.

1. Open the block palette. Choose Image.

2. In the Add an image window, on the Upload tab, click Browse your files. Choose a photo, Click Open and click Add.

The image is added to the story in the smallest form. Because this is a panorama, it's meant to be shown as a large image.

3. Hover over the image. In the toolbar, click Large. (your photo must have almost 1920px large)

4. Hover over the image again and click the Options button.The Image options window appears.

You'll add alternative text, or alt text, that describes the image so that anyone consuming your story with a screen reader (typically used by the visually impaired) can still experience your work in its entirety. You can specify alt text in the properties menu for each media item using the Options button. Unlike captions, which appear below an image, the alt text associated with an image can be viewed by hovering over it.

5. For Alternative text, type "Children of Sera Grande, Alagoas" and click Save.

The Attribution field allows you to give credit, essential for any extern content in a public storymap!

The Alternative text is important to reference the image for search engines. The text will be also shown if the image can't be loaded.

Unlike captions, which appear below an image, the alt text associated with an image can be viewed by hovering over it.

6. Add text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

7. Add a new photo above the text.

8. Now we decide to comment the photo in the caption field. Paste :

Little girl and a baby

Your photo is now integreted into the storymap with its commentary, congratulations!

Now, let's have a look on an another option: the layout. Just hover over the image with your mouse pointer and the layout panel appears.

9. Select the first icon as in the image above.

Now we can see that the photo was automatically sized and placed on the left side of the page. The right part contains an add content block allowing us to add content. Let's do it!

10. Click  on the Add content block  and select Text. Copy this text in the right of the photo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Before moving on, let's discover a new text option: the quote.

11. Click  on the Add content block  and select Text.

Choose quote.

Paste in the Quote: 

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."

Important notes:

• Don't forget that your photos will be integrated into the web. They must therefore be processed before adding them to the storymap so as not to exceed 500Ko!
• Don't forget to source your photos and check the copyrights conditions!