CheatSheetsHero

Catalog / TYPO3 CMS Cheat Sheet

TYPO3 CMS Cheat Sheet

A quick reference guide for TYPO3 CMS, covering essential concepts, TypoScript, Fluid templating, and common tasks for developers and editors.

TYPO3 Fundamentals

Core Concepts

Page Tree:
The hierarchical structure that organizes website content. Each page in the tree represents a page on the website.

Content Elements (CEs):
Individual pieces of content (text, images, etc.) that are added to pages. Also known as ‘Elements’.

TypoScript:
The configuration language used to control how content is rendered. Allows for dynamic generation of HTML, CSS, and JavaScript.

Fluid:
The templating engine used in TYPO3. It separates the presentation layer from the logic.

Extensions:
Reusable components that extend TYPO3’s functionality. Can be installed and configured to add features like blogs, forms, or e-commerce capabilities.

Backend Layouts:
Define the structure of the content area in the TYPO3 backend, dictating where content elements can be placed.

Key Directories

/typo3conf/

Contains configuration files, including LocalConfiguration.php and AdditionalConfiguration.php.

/typo3temp/

Temporary files and cache. Clear this directory to resolve many common issues.

/fileadmin/

Default location for uploaded files (images, documents, etc.). Can be configured.

/packages/

Location for extensions installed via composer.

/public/

Default web root. Where index.php and other public files are located. (May vary depending on server setup)

Backend Navigation

Page Module: Used to manage the page tree and content elements on a specific page.

List Module: Provides a detailed view of all records in a table, allowing for filtering and editing.

Filelist Module: Manages files and folders in the file system.

Template Module: Edit TypoScript templates.

Extension Manager: Install, configure, and manage extensions.

Admin Tools: Various admin tools like clearing cache, system information, install tool etc.

TypoScript Essentials

Basic Syntax

page = PAGE

Assigns a new PAGE object. PAGE is a TypoScript object type.

page.10 = TEXT

Assigns a TEXT object to the property 10 of the page object.

page.10.value = Hello World

Sets the value property of the TEXT object to ‘Hello World’.

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/setup.typoscript">

Includes TypoScript from an external file.

[globalVar = TSFE:id = 1]

Conditional statement: Checks if the current page ID is 1.

lib.myMenu = HMENU

Creates a menu object called ‘myMenu’.

Common Objects

PAGE:
Defines the overall structure of the HTML page.

TEXT:
Outputs plain text.

IMAGE:
Renders an image. Can be configured to resize, crop, etc.

CONTENT:
Renders content elements from the database.

HMENU:
Generates a navigation menu.

USER_INT:
Allows calling a user-defined function within TypoScript (cached). USER is similar but uncached.

Example Configuration 

page = PAGE
page.10 = TEXT
page.10.value = Hello World
page.10.wrap = <h1>|</h1>

page.includeCSS {
  main = fileadmin/css/style.css
}

This TypoScript configuration creates a basic HTML page with a heading ‘Hello World’ and includes a CSS file.

Fluid Templating

Basic Syntax

<f:if condition=”{variable}”>…</f:if>

Conditional statement. Renders content only if the condition is true.

<f:for each=”{items}” as=“item”>…</f:for>

Looping construct. Iterates over an array or object.

<f:link.page pageUid=“123”>Link to Page</f:link.page>

Creates a link to a TYPO3 page with UID 123.

<f:translate key=“LLL:EXT:my_extension/Resources/Private/Language/locallang.xlf:my_label” />

Translates a label using localization files.

<f:format.date format=”%d.%m.%Y”>{date}</f:format.date>

Formats a date variable.

{variable -> f:format.html()}

Formats a variable to HTML, escaping potentially dangerous characters.

ViewHelpers

f:if: Conditional rendering.

f:for: Looping through data.

f:link.page: Creating internal links.

f:link.external: Creating external links.

f:translate: Localizing text.

f:format.*: Various formatting ViewHelpers (date, number, html, etc.).

Example Template 

<f:layout name="Default" />

<f:section name="Main">
  <h1>{page.title}</h1>
  <f:for each="{contentElements}" as="contentElement">
    <f:cObject typoscriptObjectPath="lib.contentElement" data="{contentElement}" />
  </f:for>
</f:section>

This example demonstrates a basic Fluid template with a layout, a section for the main content, and a loop that renders content elements using f:cObject.

Common Tasks

Clearing Cache

TYPO3 caches content and configuration for performance. Clearing the cache is often necessary after making changes.

Backend:
Use the ‘clear cache’ menu in the top bar of the backend.

Install Tool:
Navigate to the Install Tool and use the ‘Clear all caches’ functionality.

TypoScript:
config.disableAll = 1 (for development, disables caching)

Command-line:
Use the typo3 cache:flush command.

Working with Content Elements

Adding a CE

In the Page module, click the ‘+’ icon in the content area to add a new content element.

Editing a CE

Click on a content element in the Page module to edit its properties.

Moving a CE

Drag and drop content elements within the content area to change their order. Alternatively use the up/down arrows.

Deleting a CE

Click the delete icon (trash can) on a content element to remove it.

Hiding/Disabling a CE

Use the enable/disable icon(eye icon) to hide a CE.

Extension Management

Installing an extension:
Use the Extension Manager module to search for and install extensions from the TYPO3 Extension Repository (TER) or via composer.

Configuring an extension:
Many extensions have configuration options that can be set in the Extension Manager or via TypoScript.

Updating an extension:
The Extension Manager can be used to update extensions to the latest versions.

Uninstalling an extension:
Use the Extension Manager to uninstall extensions that are no longer needed.
Download PDF