Page History

...

Create a component definition:

Dialog definition

Before you copy the dialog definition, think what properties you need for a text and image component. In the HTML prototype we had a circular image of Eric but the car images just had rounded corners. How can the editor choose the style of the image? Can they choose the image position as well – left or right?

...

• title for the "About Eric" section.
• subText for a description of Eric's hobbies and interests.
• image for selecting an image from the Magnolia DAM to represent Eric.
• imagePosition: left or right of the text.
• imageStyle: circle, rectangular or rounded corners
• sectionName to display in the navigation menu.

Template script

To avoid code duplication, create two macros: one to render the text and another to render the image. Then, depending on the imagePosition property, call the macros in the order that makes sense.

Making the component available

You need to make new components available in an area, otherwise editors can't add them on the page. We made make the textImage component available again in the content-sections area already (lines 11-12-13 below), so this step is done.

Added files overview

For this component you added the following files to the module:

 one-pager-module/
├── dialogs/
│   └── components/
│       └── textImage.yaml
└── templates/
    └── components/
        ├── textImage.ftl
        └── textImage.yaml

...

Next: Using a site definition