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.json.

{
	"name": "t3docs/site-package",
	"type": "typo3-cms-extension",
	"description": "Example site package from the site package tutorial",
	"authors": [
		{
			"name": "TYPO3 CMS Documentation Team",
			"role": "Developer",
			"homepage": "https://typo3.org/community/teams/documentation"
		},
		{
			"name": "The TYPO3 Community",
			"role": "Contributor",
			"homepage": "https://typo3.org/community/"
		}
	],
	"require": {
		"typo3/cms-core": "^13.1.0|dev-main",
		"typo3/cms-fluid-styled-content": "^13.1.0|dev-main"
	},
	"homepage": "https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code",
	"license": "MIT",
	"keywords": [
		"typo3",
		"site package",
		"documentation"
	],
	"support": {
		"issues": "https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code/issues"
	},
	"autoload": {
		"psr-4": {
			"T3docs\\SitePackage\\": "Classes/"
		}
	},
	"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.json file we see the Composer package name t3docs/site-package (with a dash) and at the bottom we see the TYPO3 extension key in the extras section - site_package (with an underscore). The Composer "name" consists of a vendor name followed by a forward slash and the lowercase extension name with dashes.

Extension icon¶

Every extension can feature an icon using an SVG, PNG or GIF file. The image should be stored in Resources/Public/Icons/.

It is recommended that you use an SVG file called Extension.svg.

Set for providing TypoScript¶

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/Sets/MySitePackage/ and put a file called config.yaml 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.yaml 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.typoscript into this folder. We use this file to include all TypoScript needed from the folder Configuration/TypoScript. 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'

As we only have a few lines of TypoScript constants we define them directly in a file called constants.typoscript in this folder:

page {
  fluidtemplate {
    layoutRootPath = EXT:site_package/Resources/Private/Layouts/Page/
    partialRootPath = EXT:site_package/Resources/Private/Partials/Page/
    templateRootPath = EXT:site_package/Resources/Private/Templates/Page/
  }
}

Last we add a file called page.tsconfig which includes the backend page layouts we create in Create the backend page layouts:

@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.

At this point we can install the sitepackage extension in an TYPO3 instance, which we will do in the next step.