Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 4 additions & 198 deletions Documentation/ExtensionConfiguration/Index.rst
Original file line number Diff line number Diff line change
@@ -1,203 +1,9 @@
:orphan:
.. include:: /Includes.rst.txt
.. highlight:: php

.. _extension-configuration:

=======================
Extension Configuration
Extension configuration
=======================

.. contents::

.. _extension-configuration-composer:

Composer configuration :file:`composer.json`
============================================

In this tutorial we assumed, you
:ref:`installed TYPO3 with Composer <extension-installation>`.
Therefore the extension needs to contain its own :file:`composer.json`.

.. include:: /CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt

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 :file:`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 extra section - :file:`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.

.. hint::
Make sure you don't mix up your underscores and dashes otherwise Composer
will not find your site-package extension.

.. _extension-icon:

Extension icon
==============

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

It is recommended that you use an SVG file called :file:`Extension.svg`. The
icon is displayed in the extension manager
(:ref:`see Public directory <t3coreapi:extension-Resources-Public>`).

.. _make-typoscript-available:
.. _site_set:

Set for providing TypoScript
============================

.. versionchanged:: 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:
:ref:`Make TypoScript available (TYPO3 v12.4) <t3sitepackage-12:make-typoscript-available>`.

In order to make the TypoScript files available, we have created in section
:ref:`TypoScript configuration <t3sitepackage:typoscript-configuration>` we
create a site set that can be included by the site configuration later-on.

Create a folder: :path:`Configuration/Sets/MySitePackage/` and put a file
called :file:`config.yaml` into it:

.. include:: /CodeSnippets/ExtensionConfiguration/SitePackage-config.rst.txt

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
:ref:`composer name <extension-configuration-composer>`.

In line 4 and 5 dependencies are defined. In this example the site package
depends on :composer:`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 :file:`settings.yaml` that we use
to override some default settings of :composer:`typo3/cms-fluid-styled-content`:

.. include:: /CodeSnippets/ExtensionConfiguration/SitePackage-settings.rst.txt

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 :file:`setup.typoscript` into this folder. We use
this file to include all TypoScript needed from the folder
:path:`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.

.. include:: /CodeSnippets/ExtensionConfiguration/SitePackage-setup.rst.txt

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



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

.. include:: /CodeSnippets/ExtensionConfiguration/SitePackage-page-tsconfig.rst.txt

.. _ec-directory-structure:

Directory and file structure
============================

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

.. todo: replace TwoColumns with Subpage (tsconfig, html, svg)
.. todo: replace files in TypoScript/Setup

.. directory-tree::
:level: 2
:show-file-icons: true

* site_package

* Configuration

* Sets

* SitePackage

* config.yaml
* page.tsconfig
* settings.definitions.yaml
* settings.yaml
* setup.typoscript

* TsConfig

* Page

* PageLayout

* Default.tsconfig
* TwoColumns.tsconfig

* TypoScript

* Setup

* Page.typoscript
* Part1PageViewSection.typoscript
* Part2CssFileInclusion.typoscript
* Part4GlobalConfiguration.typoscript
.. * Part5MenuProcessor.typoscript
.. * Part6ProcessedContent.typoscript

* Resources

* Private

* Layouts

* Default.html

* Partials

* Jumbotron.html

* Templates

* Pages

* Default.html
* TwoColumns.html

* Public

* Css

* website.css

* Icons

* BackendLayouts

* default.svg
* twoColumns.svg

* Extension.svg

* Images

* logo.svg

* 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.
Content was moved, see :ref:`Composer configuration composer.json <t3sitepackage:extension-configuration-composer>`,
:ref:`Site sets: Further configuration options <t3sitepackage:site-sets-configuration>`.
1 change: 0 additions & 1 deletion Documentation/Index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,6 @@ https://github.com/TYPO3-Documentation/site_package
TypoScript/Index
MainMenuCreation/Index
SiteSets/Index
ExtensionConfiguration/Index
Faq/Index
Summary/Index

Expand Down
27 changes: 27 additions & 0 deletions Documentation/MinimalExample/Index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ On saving, the site package is added to your site configuration file, which chan
.. literalinclude:: _config.yaml.diff

.. _minimal-extension-typoscript:
.. _make-typoscript-available:

The TypoScript-only version
===========================
Expand Down Expand Up @@ -195,3 +196,29 @@ Create a file named :file:`Default.html` in folder
Clear all caches and preview the web page.

Learn more about using Fluid Templates in chapter :ref:`fluid-templates`.

.. _extension-configuration-composer:

Composer configuration :file:`composer.json`
============================================

In step :ref:`Create a minimal TYPO3 extension <t3sitepackage:minimal-extension>`
a file called :file:`composer.json` was created for you:

.. include:: /CodeSnippets/ExtensionConfiguration/ComposerJson.rst.txt

At the top of the :file:`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 extra section - :file:`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.

When you reference files in your extension, the extension key is used, for
example when setting your favicon in TypoScript:

.. code-block:: typoscript
:caption: package/site_package/Configuration/Sets/SitePackage/setup.typoscript

page {
shortcutIcon = EXT:site_package/Ressources/Public/Icons/favicon.ico
}
75 changes: 68 additions & 7 deletions Documentation/SiteSets/Index.rst
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
:navigation-title: Site sets
:navigation-title: Settings
.. include:: /Includes.rst.txt

.. _extension-configuration:
.. _ec-directory-structure:
.. _site-sets-configuration:

========================================
Site sets: Further configuration options
========================================
============================================
Site settings: Further configuration options
============================================

.. versionadded:: 13.1
Site sets have been introduced with TYPO3 13.1.
Site sets and settings therein have been introduced with TYPO3 13.1.

In step :ref:`Minimal site package - Create a basic site
set <t3sitepackage:minimal-extension-siteset>` we created a basic site set for
Expand All @@ -18,6 +20,67 @@ In step :ref:`content-mapping-site-set` we added dependencies to our site set.

.. contents::

.. _site_set:

The site set
============

.. versionchanged:: 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:
:ref:`Make TypoScript available (TYPO3 v12.4) <t3sitepackage-12:make-typoscript-available>`.

In step :ref:`Create a basic site set <t3sitepackage:minimal-extension-siteset>`
we already created a basic site set for your site package.

In step :ref:`Include the site sets of fluid-styled-content as
dependency <t3sitepackage:content-mapping-site-set>` we included the dependencies
to the site sets of :composer:`typo3/cms-fluid-styled-content`.

Your site set configuration should now look like this:

.. include:: /CodeSnippets/ExtensionConfiguration/SitePackage-config.rst.txt

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
:ref:`composer name <extension-configuration-composer>`.

In line 4 and 5 dependencies are defined. In this example the site package
depends on :composer:`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.

Your site set folder now contains the following files:

.. directory-tree::
:level: 2
:show-file-icons: true

* site_package/Configuration/Sets/SitePackage

* config.yaml
* page.tsconfig
* setup.typoscript

.. _site_settings:

Introduce site settings to configure fluid-styled-content
=========================================================

Place a file called :file:`settings.yaml` in the folder
:path:`Configuration/Sets/SitePackage`.

We override some default settings of the site set
:ref:`Site set "Fluid Styled
Content" <typo3/cms-fluid-styled-content:site-set-fluid-styled-content>`:

.. include:: /CodeSnippets/ExtensionConfiguration/SitePackage-settings.rst.txt

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.

.. _settings-definitions-yaml-constants:

Setting definition
Expand All @@ -32,5 +95,3 @@ setup through out the project. Before they were kept in the file
It is best practise to use them for values that might
want to be changed later on like paths, ids of important pages (contact,
imprint, a system folder that contains certain records, ...).

.. todo: Add more content here