README

PixelCoda Headless extends friendsoftypo3/headless with frontend-friendly responsive layout metadata. TYPO3 stays the leading data source; this extension only adds metadata fields and JSON API enrichment.

Made with love by Casian Blanaru (PixelCoda).

A special thanks goes to macopedia.com company, which is sponsoring development of this solution.

Responsive Column Manager

Editors get a new Headless Responsive Layout tab on tt_content records with fields for:

• Desktop, tablet and mobile grid
• Per-breakpoint column order
• Container width
• Container gap
• Optional container identifier
• Optional columns JSON override

The Headless API output is enriched on every content element:

{
  "container": {
    "identifier": "three-column",
    "columns": [
      { "name": "left", "colPos": 200 },
      { "name": "center", "colPos": 201 },
      { "name": "right", "colPos": 202 }
    ]
  },
  "responsive": {
    "desktop": { "grid": "4-4-4" },
    "tablet": { "grid": "6-6" },
    "mobile": { "grid": "12" }
  },
  "order": {
    "desktop": ["left", "center", "right"],
    "tablet": ["left", "center", "right"],
    "mobile": ["center", "left", "right"]
  },
  "spacing": {
    "gap": "large"
  },
  "width": "contained"
}

b13/container

If b13/container is installed, PixelCoda Headless tries to read the registered container grid for the current CType. It does not modify or fork b13/container. If no registry metadata can be read, columns are inferred from the selected desktop grid.

TYPO3 Compatibility

The package targets TYPO3 13 LTS and is prepared for TYPO3 14/15 through public TYPO3 APIs: TCA, TypoScript data processing and Composer extension registration.

Integration

Load the TypoScript after friendsoftypo3/headless.

TYPO3 13+ site set:

dependencies:
  - pixelcoda/headless

Classic static include:

PixelCoda Headless

Package

Extension key: pixelcoda_headless

Composer package:

composer require pixelcoda/pixelcoda-headless

TYPO3 Extension Repository:

https://extensions.typo3.org/my-extensions