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.

EXT:site_package/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": "^12.4.0",
		"typo3/cms-fluid-styled-content": "^12.4.0"
	},
	"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": "12.0.x-dev"
		}
	}
}
Copied!

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.

Make TypoScript available

In order to automatically load the TypoScript files we have created in the previous step, a new PHP file sys_template.php needs to be created and stored in directory Configuration/TCA/Overrides/. The content of this file should look like the following code:

EXT:site_package/Configuration/TCA/Overrides/sys_template.php
<?php
defined('TYPO3') || die();

call_user_func(function () {
    /**
     * Extension key
     */
    $extensionKey = 'site_package';

    /**
     * Add default TypoScript (constants and setup)
     */
    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
        $extensionKey,
        'Configuration/TypoScript',
        'Site Package'
    );
});
Copied!

Directory and file structure

Let's review the directory and file structure of the sitepackage extension as it stands now.

  • site_package/

    • Configuration/

      • TCA/

        • Overrides/

          • sys_template.php
      • TypoScript/

        • constants.typoscript
        • setup.typoscript
    • Resources/

      • Private/

        • Layouts/

          • Page/

            • Default.html
        • Partials/

          • Page/

            • Jumbotron.html
        • Templates/

          • Page/

            • Default.html
      • Public/

        • Css/

          • website.css
        • Icons

          • Extension.svg
        • Images/

          • logo.png
        • JavaScript/

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