Reusable Content Blocks in Contao: Building an Author Bio Frontend Module

Problem: Repeating the same block in every blog post

Blog authors often need elements such as an author biography, a related‑posts list, or a call‑to‑action box that share a common layout but contain different data per article. Manually copying HTML into each article leads to duplication and inconsistency.

Thesis: A Frontend Module solves this

By defining a Frontend Module in Contao’s backend you can encapsulate the block’s structure once, expose simple input fields for the variable data, and drop the module into any article or layout slot. The module’s output is rendered by a custom template, keeping presentation separate from logic.

Section 1 – Creating the module

1. Log into the Contao backend and go to Module Manager.
2. Click New and choose the HTML Frontend Module type.
3. Give it a name, e.g. Author Bio.
4. In the module’s settings dialog add the fields you need:
   • name (text)
   • avatar (file)
   • bio (textarea)
5. Save the module.

Section 2 – Coupling a custom template

Create a template file in /templates/ named mod_authorbio.html5. Contao’s template syntax lets you output the module’s fields:

<div class="author-bio">
    <?php if ($this->avatar): ?>
        <img src="avatar ?>" alt="name ?>" class="author-avatar">
    <?php endif; ?>
    <h3 class="author-name">name ?></h3>
    <p class="author-bio-text">bio ?></p>
</div>

Assign this template to the module in the Template field of the module settings.

Worked example: Adding the bio to a blog entry

1. Open the blog article in the backend or use the front‑end edit mode.
2. In the page structure locate the After article slot (or any slot you prefer).
3. Click the + button, choose Module, and select the Author Bio module you just created.
4. Fill in the fields: name, upload an avatar image, and paste the biography.
5. Save the article and view it in the front‑end. The markup from the template appears exactly as defined, without extra Contao wrappers unless you have added them.

Trade‑off and limitations

• Each Frontend Module adds a small rendering overhead because Contao instantiates the module object and loads its template.
• Custom templates must stay compatible with Contao’s template engine; a major Contao release can change template helpers or syntax, requiring you to update the file.
• If you create many modules for minor variations, the backend configuration can become fragmented, making it harder to track where each module is used.

Actionable closing

1. Start by cloning an existing similar module (e.g., the built‑in HTML module) to inherit its basic settings.
2. Adjust the field definitions and assign your custom template.
3. Test the module in a sandbox or development backend: verify that the input fields appear, enter sample data, and preview the output.
4. Once satisfied, use Contao’s Export/Import feature (System → Maintenance → Export/Import) to move the module and template to your live site.
5. After import, clear the production cache and check a few articles to ensure the module renders correctly.

By following these steps you gain a reusable, configurable content block that keeps your blog layout consistent while reducing duplication.