Creating a text and image component

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

Page tree