README

Dynamic Layouts

TYPO3 CMS Extension dynamic_layouts

This extension makes the "Layout" field dynamic for content elements and also adds a field for layout styles.

What does it do?

The EXT:fluid_styled_content and EXT:bootstrap_package extensions have consistently ignored this field up to now, and their templates are hardcoded to always use only the Default template.

This extension aims to change this situation and make this field dynamic by, on the one hand, making the references to the used layout flexible, and on the other hand, allowing flexible values to be used via PageTS and TypoScript.

How to use it?

This extension adds a minor modification to the existing templates (overwriting them), which is why you must apply the same change to your custom templates.

Old:

<f:layout name="Default" />

New:

<f:layout name="{layoutName}" />

The variable {layoutName} is populated via TypoScript (DataProcessor) with the layout name you have selected, allowing you to use custom layouts.

Additionally, the field value of “layout_style” is translated into the variable {layoutStyle} in the same way, according to your TypoScript configuration, allowing you to create further custom setups.

PageTS

In PageTS, you can now define your own elements for the “Layout” field. You can also add custom layout styles for each layout.

Something like this:

# PageTS
TCEFORM.tt_content {
  layout {
    disableNoMatchingValueElement = 1

    altLabels {
      1 = Hero
      2 = Modal
      3 = Card
    }
    addItems {
      4 = Citation
    }

    # [BUGFIX:1432] https://github.com/benjaminkott/bootstrap_package/issues/1432
    #removeItems >
    #types.uploads >
  }
}

# Use 'itemsProcFunc' if you want to add/override TCA items of the field 'layout_style' (!)
TCEFORM.tt_content.layout_style.itemsProcFunc {
  addItems {
    1 {
      1 = Style 1
    }
    1 {
      1 = Style 1
      2 = Style 2
    }
    3 {
      1 = Style 1
      2 = Style 2
      3 = Style 3
    }
    4 {
      1 = Style 1
    }
  }
  # Modify label (modify the label of the second style of layout 3)
  #altLabels.3.2 = Override Label
  # Remove items (remove all style for layout 1 and 2, but only first style of layout 3)
  #removeItems = 1, 2, 3.1
}

TypoScript Setup

You can then use TypoScript to specify which layouts to use and which names should be used to override the selected layout styles.

lib.contentElement {
  layoutRootPaths.1 = EXT:my_custom_extension/Resources/Private/Layouts/
}

plugin.tx_dynamic_content {
  layout {
    1 = Hero
    2 = Modal
    3 = Card
    4 = Citation
  }
  layout_style {
    # Hero
    1 {
      0 = frame-layout-hero
      1 = frame-layout-maxhero
    }
    # Modal
    2 {
      1 = modal fade
      2 = modal modal-btn-centered
    }
    # Card
    3 {
      1 = card card-layout1
      2 = card card-layout2
      3 = card card-layout3
    }
    # Citation
    4 {
      0 = citation
      1 = citation hero
    }
  }
}