Jump to main content Jump to doc navigation

Fred Elements are made of HTML with specific attributes. The markup can be enhanced using Twig and Element Settings.

Custom Tags

themplate.theme_dir

To make themes more portable {{template.theme_dir}} can be used in an element as a dynamic placeholder reference to the template's theme directory (e.g. '/assets/theme/default/'.)

Markup Examples

<!-- Simple Element -->
<div class="panel">
    <p data-fred-name="header_text">Default Value</p>
    <img
        src="http://via.placeholder.com/450x150"
        data-fred-name="header_image"
    />
</div>

<!-- Enhanced Element -->
<div class="panel {{ panel_class }}">
    <p data-fred-name="panel_text">Default Value</p>

    {% if cta_link %}
    <a class="btn {{ cta_class }}" href="{{ cta_link }}">{{ cta_text }}</a>
    {% endif %}
</div>

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • modmore
  • Jens Wittmann – Gestaltung & Entwicklung
  • Raffy
  • eydolan
  • Digital Penguin
  • Fabian Christen
  • Dannevang Digital
  • deJaya
  • Sepia River Studios
  • Following Sea
  • Anton Tarasov
  • Lefthandmedia
  • Nick Clark
  • Chris Fickling
  • Murray Wood
  • YJ
  • CrewMark
  • Richard

Budget

$305 per month—let's make that $500!

Learn more