.. include:: /Includes.rst.txt .. _empty-columns: ============== Column Targets ============== The extension can display "Create new content" buttons for columns directly in the frontend — both for empty columns and at the end of columns that already contain content. This allows editors to add content without switching to the TYPO3 backend. .. figure:: /Images/empty-column.jpg :alt: Empty column marker showing a "Create new content" button in the frontend :class: with-shadow A "Create new content" button appears in empty columns and at the end of filled columns when frontend editing is enabled It works in two steps: 1. The integrator places a lightweight marker in their Fluid templates 2. The extension detects empty columns via AJAX and injects the buttons client-side ColumnTargetViewHelper ====================== The :php:`ColumnTargetViewHelper` renders a hidden :html:`
` element as a DOM marker. No content, no styling, no logic — just a marker that the JavaScript picks up after the page loads. Register the namespace in your Fluid template: .. code-block:: html {namespace xfe=Xima\XimaTypo3FrontendEdit\ViewHelpers} Or use the XML namespace syntax: .. code-block:: html Arguments --------- .. list-table:: :header-rows: 1 :widths: 20 10 10 60 * - Name - Type - Required - Description * - ``colPos`` - int - yes - The column position from the backend layout * - ``containerUid`` - int - no - The UID of the parent container element (for b13/container columns) Page columns ------------ Place the marker after the content rendering for each column: .. code-block:: html :caption: Page template (e.g. Default.html) {namespace xfe=Xima\XimaTypo3FrontendEdit\ViewHelpers} A "+" button always appears at the marker position — whether the column is empty or already contains content. Clicking it opens TYPO3's native **New Content Element Wizard** to choose a content type, then creates the new element in that column. .. note:: This feature requires contextual editing to be enabled (``frontendEdit.enableContextualEditing: true`` in the site settings) — the wizard is hosted inside the slide-in iframe modal that this setting activates. On both **TYPO3 v13 and v14** the wizard opens in the slide-in iframe modal: the page module is loaded inside the modal and the matching wizard button is auto-clicked, so the editor sees TYPO3's real wizard. On v14 the contextual editing sidebar continues to handle editing of existing elements; creating new content uses the modal. Container columns ----------------- For container elements (e.g. two-column layouts, tabs, accordions using `b13/container `__), add the ``containerUid`` argument: .. code-block:: html :caption: Container template (e.g. TwoColumn.html) {namespace xfe=Xima\XimaTypo3FrontendEdit\ViewHelpers}
{record.renderedContent}
{record.renderedContent}
.. important:: The marker must always be rendered, even when the column is empty. Do not wrap it in a condition like ```` — otherwise the marker is missing from the DOM when the column is empty and the button cannot appear. How it works ============ 1. The ViewHelper renders :html:`` (invisible, no layout impact) 2. The extension's JavaScript scans the page for these markers after loading 3. A "+" button is injected at each marker position, regardless of whether the column already contains content 4. Clicking the button opens the page module inside the iframe modal and auto-clicks the matching wizard button, so TYPO3's native New Content Element Wizard appears with the correct colPos pre-filled 5. The wizard lets the editor choose a content type before the record editor opens — inside the iframe modal on both v13 and v14 Container support requires the `b13/container `__ extension. The service automatically detects whether it is installed. Without it, only page columns are supported and container markers are silently ignored. .. note:: The marker is only rendered when a backend user is logged in and frontend editing is enabled. For regular frontend visitors, nothing is output. .. seealso:: View the sources on GitHub: - `ColumnTargetViewHelper `__ - `EmptyColumnService `__