FGTCLB Page Backend Layout

What does it do? 

This extension provides the basic setup for Page type related Information views. It is not recommended to use this extension alone, as it only provides a basic setup. In order to perform information view, an addition in a separate extension is required. Examples can be found in the following FGTCLB extensions:

Contribution 

Contributions are essential to the success of open source projects, but are by no means limited to contributing code. Much more can be done, for example by improving documentation.

Contribution workflow 

  1. Please always create an issue on Github before starting a change. This is very helpful to understand what kind of issue the pull request will solve and if your change will be accepted.
  2. Bug fixes: Please describe the type of bug you want to fix and provide feedback on how to reproduce the problem. We will only accept bug fixes if we can reproduce the problem.
  3. Features: Not every feature is relevant to the majority of the users. In addition: We do not want to make this extension more complicated in usability for a marginal feature. It helps to have a discussion about a new feature before opening a pull request.
  4. Please always create a pull request based on the updated release branch. That ensures that necessary quality checks and tests are executed as a quality raiser.

Installation 

The extension needs to be installed as any other extension of TYPO3 CMS. Get the extension by one of the following methods:

  1. Use composer: Run

    composer require fgtclb/page-backend-layout
    Copied!

    in your TYPO3 installation.

  2. Get it from the Extension Manager: Switch to the module Admin Tools > Extensions. Switch to Get Extensions and search for the extension key page_backend_layout and import the extension from the repository.
  3. Get it from typo3.org:
    You can always get current version from TER by downloading the zip version. Upload the file afterwards in the Extension Manager.

For overriding PageLayouts, follow the instructions at the Integrators section.

Compatibility 

Page Backend Layout supports:

Page Backend Layout version TYPO3 Version PHP version
1.x 11 >=7.4
2.x 12-13 8.1, 8.2, 8.3, 8.4

Integrate Backend View 

The extension provides the possibility to generate page type-based information in the header of the web module.

For each page type, a partial can be added, which can be provided with the necessary information according to your own wishes and ideas.

The following steps are necessary to create a page type-based information block:

Add your backend partials to the system 

EXT:example/Configuration/page.tsconfig 
templates.typo3/cms-backend.1740993701933 = vendor/example:Resources/Private/Backend/Templates
Copied!

Create your partial 

EXT:example/Resources/Private/Backend/Partials/PageLayout/Doktype<YOUR-DOKTYPE>.html 
<f:if condition="{context.pageRecord.doktype} == <YOUR-DOKTYPE>">
    <div class="callout callout-notice">
        <!-- your code goes here -->
    </div>
</f:if>
Copied!

ViewHelpers 

In case you need image preview, this extension ships a ViewHelper for getting the image for you in backend context. This ViewHelper only works in Backend-Context, as you normally don't need it in frontend.

EXT:example/Resources/Private/Backend/Partials/PageLayout/Doktype<YOUR-DOKTYPE>.html 
<html
    data-namespace-typo3-fluid="true"
    lang="en"
    xmlns:f="https://typo3.org/ns/TYPO3Fluid/Fluid/ViewHelpers"
    xmlns:pbl="http://typo3.org/ns/FGTCLB/PageBackendLayout/ViewHelpers"
>
<f:if condition="{context.pageRecord.doktype} == <YOUR-DOKTYPE>">
    <div class="callout callout-notice">
        <f:if condition="{context.pageRecord.media}">
            <f:then>
                <pbl:be.imageId as="thumb" field="media" returnFirst="true" table="pages" uid="{context.pageRecord.uid}">
                    <f:if condition="{thumb}">
                        <f:image image="{thumb.originalFile}" width="200"/>
                    </f:if>
                </pbl:be.imageId>
            </f:then>
            <f:else><span>No image</span></f:else>
        </f:if>
        <!-- your code goes here -->
    </div>
</f:if>
Copied!