Feature: #79622 - New default layout for Fluid Styled Content

See forge#79622

Description

Previously there have been three layouts you could choose from when you were defining your own custom content elements or overriding an existing template.

To provide a better maintainability and ease of use of overrides we are reducing these to a single layout that is named Default with all sections optional and fallbacks if the section is not set. Also we are introducing the "DropIn" concept.

Structure

The Default layout consists of five predefined sections that can be utilized to shape the output for your content rendering. In most cases you will not have to care about other section than Main. The sections will be rendered in that exact ordering.

  • Before
  • Header
  • Main
  • Footer
  • After
<f:spaceless>
   <f:if condition="{data.frame_class} != none">
      <f:then>
         <div id="c{data.uid}" class="frame frame-{data.frame_class} frame-type-{data.CType} frame-layout-{data.layout}{f:if(condition: data.space_before_class, then: ' frame-space-before-{data.space_before_class}')}{f:if(condition: data.space_after_class, then: ' frame-space-after-{data.space_after_class}')}">
            <f:if condition="{data._LOCALIZED_UID}">
               <a id="c{data._LOCALIZED_UID}"></a>
            </f:if>
            <f:render section="Before" optional="true">
               <f:render partial="DropIn/Before/All" arguments="{_all}" />
            </f:render>
            <f:render section="Header" optional="true">
               <f:render partial="Header/All" arguments="{_all}" />
            </f:render>
            <f:render section="Main" optional="true" />
            <f:render section="Footer" optional="true">
               <f:render partial="Footer/All" arguments="{_all}" />
            </f:render>
            <f:render section="After" optional="true">
               <f:render partial="DropIn/After/All" arguments="{_all}" />
            </f:render>
         </div>
      </f:then>
      <f:else>
         <a id="c{data.uid}"></a>
         <f:if condition="{data._LOCALIZED_UID}">
            <a id="c{data._LOCALIZED_UID}"></a>
         </f:if>
         <f:if condition="{data.space_before_class}">
            <div class="frame-space-before-{data.space_before_class}"></div>
         </f:if>
         <f:render section="Before" optional="true">
            <f:render partial="DropIn/Before/All" arguments="{_all}" />
         </f:render>
         <f:render section="Header" optional="true">
            <f:render partial="Header/All" arguments="{_all}" />
         </f:render>
         <f:render section="Main" optional="true" />
         <f:render section="Footer" optional="true">
            <f:render partial="Footer/All" arguments="{_all}" />
         </f:render>
         <f:render section="After" optional="true">
            <f:render partial="DropIn/After/All" arguments="{_all}" />
         </f:render>
         <f:if condition="{data.space_after_class}">
            <div class="frame-space-after-{data.space_after_class}"></div>
         </f:if>
      </f:else>
   </f:if>
</f:spaceless>
Copied!

DropIn

The sections Before and After are so called "DropIn" sections. DropIns have been introduced to be able to place additional functionality to all content elements without overriding layouts or templates. DropIns are basically placeholders/empty partials that are meant to be overridden if necessary.

DropIn Locations:

  • Resources/Private/Partials/DropIn/Before/All.html
  • Resources/Private/Partials/DropIn/After/All.html

Handling Optional Sections

Since all sections are optional you do not need to reference them in your templates. All sections except the Main section have a fallback to a default behaviour if they are not set in the template. This is for example used to render the content element header.

<f:render section="Header" optional="true">
   <f:render partial="Header/All" arguments="{_all}" />
</f:render>
Copied!

In some cases it can be useful to disable or override the default fallback of a section. For example if the HTML does not want to render the header at all.

<f:layout name="Default" />
<f:section name="Header" />
<f:section name="Main">
   <f:format.raw>{data.bodytext}</f:format.raw>
</f:section>
Copied! 
<f:layout name="Default" />
<f:section name="Header">
   <f:if condition="{gallery.position.noWrap} != 1">
      <f:render partial="Header/All" arguments="{_all}" />
   </f:if>
</f:section>
<f:section name="Main">
   ...
</f:section>
Copied!

Basic Usage

<f:layout name="Default" />
<f:section name="Main">
   ...
</f:section>
Copied!