H5P Guides

Collage Tutorial

Use the Collage tool to put together images in a nice composition. There are several layouts to pick from.

Not using H5P yet?
Click the "Get started" button to explore all of the possible ways to use H5P!
Get started with H5P

Example

Here's the Collage we'll create in this tutorial:

Step 1: Topic

We are going to create a collage out of four mountain photos. You can use the photos provided below or you can choose some of your own photos. If you are using the photos below, save each of them on your computer before proceeding with the next step.

Step 2: Creating a Collage

Select the New content option and choose Collage from the list of Content types:

Step 3: Collage editor

The Collage editor should now appear. The editor looks like this:

Step 4: Creating Content


Selecting a layout

By default, a three-image layout is selected. Since we want to use four images in this collage, we are going to select another layout. Select the layout shown in the screenshot below:

 Adding an image

To add an image click on the "+" sign and select an image file from your computer. 

To reposition the image you can click and drag until you are happy with the part of the image that shows, like so:

Once you are done with the 1st image, proceed with the rest in the same way.. at the end, your editor should look like this:

Spacing options

At the bottom of the editor, you'll find options to adjust the spacing between photos and the height of the content. You can adjust some of them to see how it will affect your content.

Step 5: Finishing up 

Once you are happy with the spacing options go ahead and save the node/article to view your finished Collage. 
You should now have the same result as the example at the top of this page. 
Feel free to leave any comments or suggestions on how to improve this tutorial.