Custom Fields in Amplify Layouts

Social Amplify
1

Use custom article metadata in your Amplify layouts and post templates. When you configure Custom Fields to sync to Amplify, extracted values become available for rendering on social media images and for personalizing post text.

Custom Fields in Layout Templates

Custom fields synced to Amplify are delivered inside each article’s data under the customProperties key. Access them in your HTML and CSS templates with dot notation:

{{customProperties.yourFieldName}}

Custom properties are available alongside the standard article properties (title, description, img, url, sections, authors).

Example: Add a Subtitle to the Social Image

Many articles include a subtitle or subheadline in their HTML that Marfeel doesn’t extract by default. Extract it and render it below the headline on your social image:

Custom Field configuration:

Setting Value
Expression //h2[contains(@class,"subtitle")]
Extract Text Content
Save as Custom field: subtitle
Sync to Amplify

HTML template:

<article data-mrf-amplify-id="subtitle-layout" class="amplify-wrapper">
    {{#each content.posts}}
    <div class="mrf-amplify-image-container">
        <img class="mrf-amplify-image"
            data-mrf-amplify="image"
            src="{{img}}" alt="{{title}}" />
        <div class="mrf-amplify-backdrop"></div>
    </div>
    <div class="mrf-amplify-title-container">
        <h2 class="mrf-amplify-title"
            data-mrf-amplify="title"
            contenteditable="plaintext-only">{{title}}</h2>
        {{#customProperties.subtitle}}
          <p class="mrf-amplify-subtitle">{{customProperties.subtitle}}</p>
        {{/customProperties.subtitle}}
    </div>
    {{/each}}
</article>

The subtitle renders below the title when it exists. Articles without one display the headline only.

Example: Display the Author’s Photo

Extract the author’s profile image from your article’s structured data and overlay it on the social image:

Custom Field configuration:

Setting Value
Expression $.@graph[?(@.@type=="Person")].image.url
Extract —
Save as Custom field: authorImage
Sync to Amplify

HTML template:

<article data-mrf-amplify-id="author-layout" class="amplify-wrapper">
    {{#each content.posts}}
    <div class="mrf-amplify-image-container">
        <img class="mrf-amplify-image"
            data-mrf-amplify="image"
            src="{{img}}" alt="{{title}}" />
        <div class="mrf-amplify-backdrop"></div>
        {{#customProperties.authorImage}}
          <img class="mrf-amplify-author-photo"
              src="{{customProperties.authorImage}}" alt="{{authors.[0]}}" />
        {{/customProperties.authorImage}}
    </div>
    <div class="mrf-amplify-title-container">
        <h2 class="mrf-amplify-title"
            data-mrf-amplify="title"
            contenteditable="plaintext-only">{{title}}</h2>
    </div>
    {{/each}}
</article>

The {{#customProperties.authorImage}} block only renders when an author image exists, so articles without one display cleanly.

Going Deeper

  • Custom Fields — Configure extraction rules and sync destinations
  • Amplify Layouts — Full layout structure, templating, and interactive elements