The 5.7 branch of Magnolia reached End-of-Life on December 31, 2023, as specified in our End-of-life policy. This means the 5.7 branch is no longer maintained or supported. Please upgrade to the latest Magnolia release. By upgrading, you will get the latest release of Magnolia featuring significant improvements to the author and developer experience. For a successful upgrade, please consult our Magnolia 6.2 documentation. If you need help, please contact info@magnolia-cms.com.
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