01 - Add a header image to the homepage

[luca-rath]

Add a header image to the homepage

Goal

Our homepage looks quite naked right now. To stir our users emotions, we would like to add a nice header image on
the homepage.

Steps

• Add a new property headerImage with the type single_media_selection to the
  config/templates/pages/homepage.xml file
• Log into the admin UI with user "admin" and password "admin"
• Switch to "Assets" and create a new asset collection with the name "Header Images"
• Upload a beautiful image to the newly created collection
• Modify the "Homepage", select your uploaded image as header image and save the page
• Add a new image format with the key x400 to the config/image-formats.xml file
• Output the image in your templates/pages/homepage.html.twig in the right dimension

Hints

• Use {{ dump(content) }} in the Twig template to find out how to output the header image URL.

More Information

To solve this assignment we need to understand a few different concepts in Sulu:

Each page in Sulu has a template. The template consists of two parts:

• an XML file with the structure of the page
• an HTML (Twig) file with the HTML of the page

A template is made up of properties. Each property has a name (for example "title") and a (content) type (for
example text_line). The supported content types can be found in the documentation:
http://docs.sulu.io/en/latest/reference/content-types/index.html

Furthermore, Sulu uses image formats to transparently create thumbnails in the respective sizes for uploaded images.
A thumbnail is generated when it is accessed for the first time. That means that only thumbnails that are really used
are stored on your disk.

When defining image formats, you can apply different actions to your source images. The most used action is scale,
which resizes an image into the desired dimensions while keeping its original aspect ratio
(http://docs.sulu.io/en/latest/book/image-formats.html).

Links

• Next assignment pull request: 02 - Add a content block to the homepage
• Source file of this assignment: assignments/01.md

[ericpugh]

Note: I think the docs in this description have moved.

• Configure image formats: https://docs.sulu.io/en/latest/book/image-formats.html
• Content type reference: https://docs.sulu.io/en/latest/reference/content-types/index.html