Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.
This page explains how to create a component that renders an image together with some text.
Component defintition
Create a component definition:
templateScript: /one-pager-module/templates/components/textImage.ftl renderType: freemarker title: Text with image dialog: one-pager-module:components/textImage
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?
Create a dialog with the following fields:
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 cornerssectionName
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.
[#macro renderText content] <div class="col-lg-5 col-sm-6"> <hr class="section-heading-spacer"> <div class="clearfix"></div> [#if content.title?has_content] <h2 class="section-heading">${content.title!""}</h2>[/#if] [#if content.subText?has_content] <p class="lead"> ${cmsfn.decode(content).subText!""}</p>[/#if] </div> [/#macro] [#macro renderImage content] <div class="col-lg-6 col-sm-6"> <div class="big-box"> [#if content.image?has_content] [#assign asset=damfn.getAsset(content.image!"")/] [#if asset?has_content] [#if "roundedEdges"==content.imageStyle!] <img class="img-responsive img-rounded" src="${damfn.getRendition(asset, "large").getLink()!}"/> [#elseif "circle"==content.imageStyle!] <img class="img-responsive img-circle" src="${damfn.getRendition(asset, "large-square").getLink()!}"/> [#else] <img class="img-responsive" src="${damfn.getRendition(asset, "large").getLink()!}"/> [/#if] [/#if] [/#if] </div> </div> [/#macro] <div class="component-section" id="${content.@uuid}"> <div class="container"> <div class="row"> [#if "right"==content.imagePosition!] [@renderText content=content/] [@renderImage content=content/] [#else] [@renderImage content=content/] [@renderText content=content/] [/#if] </div> </div> </div>
Making the component available
You need to make new components available in an area, otherwise editors can't add them on the page. We make the textImage
component available again in the content-sections
area (lines 11-12).
templateScript: /one-pager-module/templates/pages/main.ftl renderType: freemarker visible: true title: One pager template dialog: one-pager-module:pages/main areas: content-sections: availableComponents: content-items-list: id: one-pager-module:components/content-items-list textImage: id: one-pager-module:components/textImage
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