How to use a custom page-editor app

Here we showcase a fragment use case provided by the Page-editor Apps extension feature. The sections below leverage the banner-lm light module definitions, which are described in more detail on How to provision a custom page-editor app.

The Banners app

The banner-lm light module creates a pages app called Banners, which is intended to create and store page fragments. The fragments can be re-used on other pages as page components.

An image as a page fragment

In this specific case, we intend to turn the following Lone Cyclist image into a reusable fragment:

A banner showing a lone cyclist in a city

Create a fragment

  • In the Banners app, under the banners root node, create a new banner called cycling1-2024.

  • Edit the banner.

    • Add a Text and image component to it.

    • Edit the component.

      • On its Image tab, in the Image field, browse to and select the Lone Cyclist image.

The Pages app

Use the fragment

  • Go to the Magnolia Pages app.

  • Create a new page there. Call it Cycling Fans Page 2024, for example.

  • Add a Banner component from the available components.

  • Choose the cycling1-2024 banner that you just created in the Banners app.

  • Your page now shows the contents of your banner.

A banner fragment used in a page

Updating the banner fragment

See how the page is auto-updated when the banner changes:

  • Go to the Banners app.

  • Edit the contents of the banner.

  • Go to the Pages app and edit the Cycling Fans Page 2024 page.

  • Note that the content on the page reflects the changes in the banner.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Page-editor Apps extension docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules