Magnolia 5.5 reached end of life on November 15, 2019. This branch is no longer supported, see End-of-life policy.
This page explains how to create a component that renders an image together with some text.
Create a component definition:
templateScript: /one-pager-module/templates/components/textImage.ftl renderType: freemarker title: Text with image dialog: one-pager-module:components/textImage
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.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>
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
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