Extension Configuration
Composer configuration composer.json
In this tutorial we assumed, you
installed TYPO3 with Composer.
Therefore the extension needs to contain its own composer.
.
{
"name": "t3docs/site-package",
"type": "typo3-cms-extension",
"description": "Example site package from the site package tutorial",
"require": {
"typo3/cms-core": "^13.4.0|dev-main",
"typo3/cms-fluid-styled-content": "^13.4.0|dev-main"
},
"homepage": "https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code",
"license": "MIT",
"support": {
"issues": "https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code/issues"
},
"extra": {
"typo3/cms": {
"extension-key": "site_package"
},
"branch-alias": {
"dev-master": "13.0.x-dev"
}
}
}
For historic reasons TYPO3 extension names are written in lower case words and separated by underscores if there are more than one. This is known as the extension key. The directory containing the extension should have the same name as the extension key. Composer package names are written in lower-case words but are by convention separated with dashes if there is more than one word.
At the top of the composer.
file we see the Composer package name
t3docs/
(with a dash) and at the bottom we see the TYPO3
extension key in the extra section - site_
(with an underscore).
The Composer "name" consists of a vendor name followed by a forward slash and the
lowercase extension name with dashes.
Hint
Make sure you don't mix up your underscores and dashes otherwise Composer will not find your site-package extension.
Extension icon
Every extension can feature an icon using an SVG, PNG or GIF file.
The image should be stored in Resources/
.
It is recommended that you use an SVG file called Extension.
. The
icon is displayed in the extension manager
(see Public directory).
Set for providing TypoScript
Changed in version 13.1
In TYPO3 v13.1 and above the TypoScript files are made available as sets and included in the site. For TYPO3 v12 read the section in the tutorial for TYPO3 v12.4: Make TypoScript available (TYPO3 v12.4).
In order to make the TypoScript files available, we have created in section TypoScript configuration we create a site set that can be included by the site configuration later-on.
Create a folder: Configuration/
and put a file
called config.
into it:
name: t3docs/site-package
label: Example site package set
dependencies:
- typo3/fluid-styled-content
- typo3/fluid-styled-content-css
Line 1 defines the name of the set. As the example site-package extension only provides one set, the name of the set should be the same as the composer name.
In line 4 and 5 dependencies are defined. In this example the site package depends on typo3/cms-fluid-styled-content , therefore the sets provided by this system extension are included as dependency. By doing so all settings and TypoScript definitions provided by the extension are automatically included.
In the same folder we can place a file called settings.
that we use
to override some default settings of
typo3/cms-fluid-styled-content
:
styles:
templates:
layoutRootPath: EXT:site_package/Resources/Private/Layouts/ContentElements
partialRootPath: EXT:site_package/Resources/Private/Partials/ContentElements
templateRootPath: EXT:site_package/Resources/Private/Templates/ContentElements
content:
textmedia:
maxW: 1200
maxWInText: 600
linkWrap:
lightboxEnabled: true
lightboxCssClass: lightbox
Here we override some values for maximal image width in text-media content elements, we enable a lightbox for images and set paths for overriding the templates of that extension.
Then we put a file called setup.
into this folder. We use
this file to include all TypoScript needed from the folder
Configuration/
. It would also be possible to place the
TypoScript directly into this file. But we want to split our TypoScript into
different files.
@import 'EXT:site_package/Configuration/TypoScript/Setup/*.typoscript'
@import 'EXT:site_package/Configuration/TypoScript/Setup/Navigation/*.typoscript'
As we only have a few lines of TypoScript constants we define them directly in
a file called constants.
in this folder:
Last we add a file called page.
which includes the backend page
layouts we create in Create a default page layout with page TSconfig:
@import 'EXT:site_package/Configuration/TsConfig/Page/PageLayout/*.tsconfig'
Directory and file structure
Let's review the directory and file structure of the sitepackage extension as it stands now.
-
-
-
-
-
config.yaml
-
page.tsconfig
-
settings.definitions.yaml
-
settings.yaml
-
setup.typoscript
-
-
-
-
-
-
Default.tsconfig
-
TwoColumns.tsconfig
-
-
-
-
-
-
Page.typoscript
-
Part1PageViewSection.typoscript
-
Part2CssFileInclusion.typoscript
-
Part4GlobalConfiguration.typoscript
-
-
-
-
-
-
-
Default.html
-
-
-
Jumbotron.html
-
-
-
-
Default.html
-
TwoColumns.html
-
-
-
-
-
-
website.css
-
-
-
-
default.svg
-
twoColumns.svg
-
-
Extension.svg
-
-
-
logo.svg
-
-
-
website.js
-
-
-
-
composer.json
-
At this point we can install the sitepackage extension in an TYPO3 instance, which we will do in the next step.