Skip to main content Skip to navigation

H5P Collage

Once you have logged into the H5P website find the Create New Content button (it is usually on the Content tab of your account).

Add the name of your content to the Title field and then choose Collage from the Select content type dropdown menu by clicking on the appropriate Use button.

H5P Collage screen shot

Choose the layout you want to use from the Layout section; this will appear below in the Preview section. Once you are happy with the layout start adding your images. Click on the appropriate + icon to choose your image and add it to your collage. Be aware that the frame that you are inserting your pictures into will crop them; in this example if you add an image to one of the top frames they will be cropped around the centre of the image to fit into the rectangle frame. Likewise if you add an image to the longer bottom frame it will be wider but probably not as deep as you expected.

H5P Collage screen shot

Once you have added some images you will get some tool buttons which will allow you to change the image (the spanner button); zoom in or out (the + and - buttons) and the i button allows you to set the ALT and Hover text for each image.

H5P Collage screen shot

Moving the Spacing slider will change the white space between the pictures. You can choose to keep the Frame the Same as spacing or use No frame and you can adjust the height of the collage using the Height slider.

H5P Collage screen shot

Add any tags to the Tags section and choose whether you want to display the buttons listed above with your collage. Personally I would leave all of the buttons checked as per the default settings as it gives both you and your users more flexibility. Then click on the Save button.

If you click on the Embed button at the bottom of the collage once it has been generated, you can copy the HTML code and embed it into a web page just like this: