---
title: "Layouts"
version: "14.6"
permalink: "https://docs.typo3.org/permalink/wapplersystems/ws-slider:layouts@14.6"
source: "Layouts/Index.rst"
rendered: "2026-11-01T01:46:43+00:00"
---

# Layouts {#layouts}

A layout selects which Fluid section is used to render a single slide. The
**Frontend layout** selector on the content element lists the layouts
that are available for the chosen renderer.

## How rendering works {#layouts-how-it-works}

Two partials are involved per renderer, and only one of them is layout aware:

-   `Resources/Private/Partials/<Renderer>.html` renders the slider frame
    (container, assets, inline JavaScript). It is **always** rendered with the
    section `Default`. Adding further sections here has no effect.
-   `Resources/Private/Partials/Item/<Renderer>.html` renders a single
    slide. It is rendered with the **layout name as the section name**.

So a layout is a section in the *item* partial:

**Resources/Private/Partials/Item/Tinyslider.html**

```html
<f:section name="Default">
    ...
</f:section>

<f:section name="Cards">
    ...
</f:section>
```

If the selected layout has no matching section in the item partial of the
current renderer, Fluid aborts with
`InvalidSectionException: Section "..." does not exist`.

## Registering a layout {#layouts-register}

Layouts are registered in page TSconfig under `tx_wsslider.templateLayouts`.
The key is the section name, the value is the label:

```typoscript
tx_wsslider.templateLayouts.Cards = Cards
```

> [!IMPORTANT]
> There is no `addItems` here. `tx_wsslider.templateLayouts.addItems.Cards`
> has no effect - the values are read from `templateLayouts` directly.
> (`addItems` only exists for `TCEFORM`, which is a different mechanism.)

Because a section only exists in the item partials you provide, restrict the
layout to the renderers that actually implement it:

```typoscript
tx_wsslider.templateLayouts.Cards = Cards
tx_wsslider.templateLayouts.Cards.renderers = tinyslider
```

Without `renderers` the layout is offered for every renderer. Selecting it on
a renderer whose item partial lacks the section breaks the frontend.

A layout can also be limited to certain columns:

```typoscript
tx_wsslider.templateLayouts.Cards.allowedColPos = 0,1
```

## Adding your own layout {#layouts-own}

1.  Add the partial root path of your site package to
    `plugin.tx_wsslider.view.partialRootPath` (or to
    `tt_content.ws_slider.partialRootPaths`) so your files win over the ones
    shipped with the extension.
1.  Copy `Item/<Renderer>.html` of the renderer you use into your own
    partial root path and add a section named after your layout.
1.  Register the layout in page TSconfig as shown above and restrict it with
    `renderers` to the renderer you implemented it for.

## Layouts shipped with the extension {#layouts-shipped}

| Layout | Renderer | Page TSconfig file |
| --- | --- | --- |
| Default | all | built in, always available |
| Cards | tinyslider | `EXT:ws_slider/Configuration/TsConfig/Page/Layout/Cards.tsconfig` |

The shipped file can be selected in the page properties under
**Include static Page TSconfig**.