Page History

Note

If you for some reason do not have the Stories App, add this to your webapp pom:

Code Block
<dependency> <groupId>info.magnolia.editor</groupId> <artifactId>stories-app</artifactId> <version>1.1.5</version> </dependency

Expand

title	Create the module structure we will need:

Code Block

language	bash

cd my-light-_modules
mkdir -p block-examples/blocks
mkdir -p block-examples/templates/blocks
mkdir block-examples/i18n
mkdir -p block-examples/decorations/stories-app/apps/
mkdir -p block-examples/templates/pages

Alternatively, use mgnl create-light-module and add the structure you need.

Expand

title	Add the block definition:

Code Block

language	yaml
title	block-examples/blocks/quote.yaml

class: info.magnolia.editor.block.stock.FieldSetBlockDefinition
templateId: block-examples:blocks/quote
fields:
  quotation:
    class: info.magnolia.ui.form.field.definition.TextFieldDefinition
    rows: 3
  citedPerson:
    class: info.magnolia.ui.form.field.definition.TextFieldDefinition

...

Expand

title	(Optional) Add internationalized labels:

yaml

Code Block

language

title	block-examples/i18n/example-blocks_en.properties

blocks.quote.label=Quote
quote.quotation.label=Quote
quote.citedPerson.label=Cited person

Code Block

language	yaml
title	block-examples/i18n/example-blocks_de.properties

blocks.quote.label=das Zitat
quote.quotation.label=das Zitat
quote.citedPerson.label=zitierte Person

Expand

title	Decorate the Stories app to allow it to use our new block type:

Code Block

language	yaml
title	block-examples/decorations/stories-app/apps/stories.yaml

subApps:
  editor:
    contentDefinition:

      blocks:
        - text
        - image
        - video
        - externalLink
        - quote

Expand

title	Add a story:

Add a title and lead text:

Add the url:

Image Added

Add a new quote block:

Add the url:

Image Removed

Add the quote:

Click Save and Publish

Expand

title	Add page template definition and script to use the block:

Code Block

language	yaml
title	block-examples/templates/pages/block.yaml

renderType: freemarker
title: Block Page
templateScript: /block-examples/templates/pages/block.ftl

Code Block

language	yaml
title	block-examples/templates/pages/block.ftl

[#assign testContent = cmsfn.contentByPath("/test", "stories") /]
[#assign blocks = cmsfn.children(testContent, "mgnl:block") /]

<!DOCTYPE html>
<html xml:lang="en" lang="en" class="no-js">
    <head>
        [@cms.page /]
    </head>
    <body>
        [#if testContent?hasContent]
            [#if testContent.title?hasContent]
                <h2>${testContent.title}</h2>
            [/#if]
            [#if testContent.lead?hasContent]
                <h4>${testContent.lead}</h4>
            [/#if]
            [#assign blocks = cmsfn.children(testContent, "mgnl:block") /]
            [#list blocks as block]
                [@cms.block content=block /]
            [/#list]
        [/#if]
    </body>
</html>

Expand

title	Add a page using the new block type:

Image Added

Click Next and then preview the page you just added. The quote you entered earlier should be displayed:

Image Added

Expand

title	Resulting directory structure:

Code Block

language	bash

block-examples/
├── blocks
│   └── quote.yaml
├── decorations
│   └── stories-app
│       └── apps
│           └── stories.yaml
├── i18n
│   ├── example-blocks_de.properties
│   └── example-blocks_en.properties
└── templates
    ├── blocks
    │   ├── quote.ftl
    │   └── quote.yaml
    └── pages
        ├── block.ftl
        └── block.yaml

Page Turner

button-links	true

YZ

Page tree

Versions Compared

Old Version 12

New Version Current

Key