Page tree

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:

/one-pager-module/templates/components/textImage.yaml
 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 corners
  • sectionName to display in the navigation menu.

dialogs/components/textImage.yaml
 form:
  label: Text with image
  tabs:
    - name: tabText
      label: Texts
      fields:
        - name: title
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
          label: Title
        - name: sectionName
          class: info.magnolia.ui.form.field.definition.TextFieldDefinition
          label: Section nav label
          required: true
          requiredErrorMessage: Enter label for section navigation.
        - name: subText
          class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition
          label: Sub title
    - name: imageTab
      label: Image
      fields:
        - name: imagePosition
          label: Position
          class: info.magnolia.ui.form.field.definition.SelectFieldDefinition
          options:
            - name: left
              label: left
              value: left
              selected: true
            - name: right
              label: right
              value: right
        - name: imageStyle
          label: Style
          class: info.magnolia.ui.form.field.definition.SelectFieldDefinition
          options:
            - name: roundedEdges
              label: Rounded edges
              value: roundedEdges
              selected: true
            - name: circle
              label: Circle
              value: circle
            - name: rectangular
              label: Rectangular
              value: rectangular
        - name: image
          class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
          targetWorkspace: dam
          appName: assets
          identifierToPathConverter:
            class: info.magnolia.dam.app.assets.field.translator.AssetCompositeIdKeyTranslator
          contentPreviewDefinition:
            contentPreviewClass: info.magnolia.dam.app.ui.field.DamFilePreviewComponent
          label: Image


actions: !include /one-pager-module/includes/default-dialog-actions.yaml

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.

templates/components/textImage.ftl
 [#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).

/light-modules/one-pager-module/templates/pages/main.yaml (snippet)
 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