---
title: "Content element example"
manual: "TYPO3 EXT:thuecat"
version: "main"
permalink: "https://docs.typo3.org/permalink/werkraummedia/thuecat:content-element-example@main"
source: "Integration/FrontendOutput/ContentElementExample.rst"
rendered: "2026-10-09T11:47:03+00:00"
---

# Content element example {#content-element-example}

A complete, ready-to-use content element built with [TYPO3 Content Blocks](https://docs.typo3.org/p/friendsoftypo3/content-blocks/main/en-us/Index.html#start). This example is the
*selected list*: an editor picks a fixed set of attractions, rendered in the chosen order. Replace
`myvendor` with your own vendor name.

**EXT:myextension/ContentBlocks/ContentElements/attraction-list-selected/config.yaml**

```yaml
name: myvendor/attraction-list-selected
group: Thuecat Attraction
prefixFields: true
prefixType: vendor
fields:
  - identifier: TYPO3/Header
    type: Basic
  - identifier: 'pi_flexform'
    type: 'FlexForm'
    useExistingField: true
    fields:
      - identifier: 'settings.selectedRecords'
        type: 'Select'
        renderType: 'selectMultipleSideBySide'
        foreign_table: 'tx_thuecat_tourist_attraction'
        foreign_table_where: 'AND {#tx_thuecat_tourist_attraction}.{#sys_language_uid} IN (0, -1)'
```

Define one Extbase plugin object carrying the `ThueCat` extension name, once, in your site set.
Each content element copies it and names its plugin. A dedicated object keeps other extensions that
wire their own plugins into content elements on the same site from overwriting the extension name:

**EXT:myextension/Configuration/Sets/MySet/setup.typoscript**

```typoscript
lib.myvendorThuecatPlugin = EXTBASEPLUGIN
lib.myvendorThuecatPlugin {
    extensionName = ThueCat
}
```

**EXT:myextension/ContentBlocks/ContentElements/attraction-list-selected/setup.typoscript**

```typoscript
tt_content.myvendor_attractionlistselected =< lib.contentBlock
tt_content.myvendor_attractionlistselected {
    20 =< lib.myvendorThuecatPlugin
    20 {
        pluginName = TouristAttractionListSelected
    }
}
```

The `settings.selectedRecords` FlexForm field lets the editor choose the attractions;
the `TouristAttractionListSelected` plugin renders them via the `SelectedList` template in the
picked order.

A selected list of trails is the same content element with `tx_thuecat_trail` as
`foreign_table` and `TrailListSelected` as plugin name.

The other content elements follow the same shape, wired to their plugin name, with these fields:

| Content element | Plugin name | Fields | Flexform Fields |
| --- | --- | --- | --- |
| List | `TouristAttractionList` | `pages`, `recursive` | `settings.itemsPerPage`, `settings.page.pid.thuecat_attraction_show` |
| Filtered list | `TouristAttractionList` | same as the list | same as the list, plus `settings.towns`, `settings.categories`, `settings.keywords` |
| Search and filter | `TouristAttractionSearch` | none | none |
| Attraction detail | `TouristAttractionShow` | none | `settings.selectedRecord` (makes the plugin show the selected record, don't use as a link target for list pages) |
| Trail detail | `TrailShow` | none | `settings.selectedRecord` (makes the plugin show the selected record, don't use as a link target for list pages) |

What each field does, and how to start the category and keyword trees at the right parent category,
is described in [Plugin settings](https://docs.typo3.org/permalink/werkraummedia/thuecat:frontend-output-plugin-settings@main).