Free TYPO3 template (sample project) for TYPO3 12 LTS

At the top left of each page you will find a logo that is always automatically linked to the start page. To replace our example logo, proceed as follows:

1. Upload your logo file via the file module under "File list" (file format JPG, PNG or SVG recommended). If necessary, create a suitable folder to organize your files.
2. Click on "TypoScript" in the Site Management module.
3. Click on the "Home" page in the page tree.
4. Select the "Constants Editor" and "jweiland.net TYPO3 Sitepackage" in the category selection.
5. Scroll down to the "Layout" section.
6. Click on the pencil icon next to the "Logo" field to activate editing.
7. Enter the path to your logo file here (for example fileadmin/logos/my_logo.png).
8. Click on the "Save" button at the top.

One of the first steps in customizing the TYPO3 template should be to change the company name. This can be seen at the bottom of every page, for example. Of course, you can also enter your personal name or any other text here instead of a company name.

Carry out the following steps:

1. Click on "TypoScript" in the Site Management module.
2. Click on the "Home" page in the page tree.
3. Select the "Constants Editor" and "jweiland.net TYPO3 Sitepackage" in the category selection.
4. Click on the pencil icon next to the "Company name" field to edit the content of the field.
5. Finally, click on the "Save" button at the top

Favicons are small images that are displayed in the browser title bar / browser tab, for example. Usually a company logo or similar is used here.

The TYPO3 template is prepared for the use of individual favicons. Touch icons (app icons) for smartphones and tablets are also created.

Both types of icons can be easily exchanged via the constants editor.

Please note:

• The image file for the favicon and the standard touch icons must be square.
• The second variant of the image, which is particularly useful for Windows phones, requires an aspect ratio of 31:15, for example: width 310 px, height 150 px
• Use an image file in PNG or JPG format. PNG is recommended. Since different variants are created dynamically in the TYPO3 template, the classic ICO files do not work here. However, these are no longer needed nowadays.

To customize the files, proceed as follows:

1. Click on "TypoScript" in the Site Management module.
2. Click on the "Home" page in the page tree.
3. Select the "Constants Editor" and "jweiland.net TYPO3 Sitepackage" in the category selection.
4. Scroll down to the "Layout" area.
5. Click on the pencil icon next to "App-/Favicon Square" or "App-/Favicon Wide" to activate the input field.
6. Enter the path to your image file in the input field. This can be located below fileadmin/ or in a separate extension:
   • Example for fileadmin: fileadmin/mydirectory/images/appicon-square.png
   • Example of an extension: EXT:myextension/Resources/Public/Icons/appicon-square.png
7. Finally, click on "Save" at the top.
8. If the change is not immediately visible, you must delete the frontend cache and also your browser cache.

We have also integrated a search function for the website into the TYPO3 template. We use the standard extension "indexed_search". (There are other, sometimes more powerful search extensions such as "ke_search" or"solr").

Carry out the following steps to hide the search function:

1. Click on "TypoScript" in the Site Management module.
2. Click on the "Home" page in the page tree.
3. Select the "Constants Editor" and "jweiland.net TYPO3 Sitepackage" in the category selection.
4. Under "Settings for navigation" deactivate the field "Show search field"
5. Finally, click on the "Save" button at the top

The TYPO3 template is output with a fixed header area. This means that it always remains visible when scrolling the website. If this is not desired, it can be deactivated.

Carry out the following steps to deactivate the fixed header:

1. Click on "TypoScript" in the Site Management module.
2. Click on the "Home" page in the page tree.
3. Select the "Constants Editor" and in the category selection "jweiland.net TYPO3 Sitepackage".
4. Under "Layout", deactivate the "Fixed header area" field
5. Finally, click on the "Save" button at the top

When scrolling a page, the content elements slowly fade in. If this is not desired, you can deactivate it.

Carry out the following steps to deactivate the fading in of content:

1. Click on "TypoScript" in the Site Management module.
2. Click on the "Home" page in the page tree.
3. Select the "Constants Editor" and in the category selection "jweiland.net TYPO3 Sitepackage".
4. Under "Layout" deactivate the field "Show content elements"
5. Finally, click on the "Save" button at the top

The TYPO3 template provides an RSS feed for news articles. Visitors can subscribe to this feed to keep up to date with new articles.

If you want to use this feed for your news articles, you must configure it via the constant editor. You can also switch the feed off or on via a constant.

The following must be adjusted:

• The title of the RSS feed
• The description
• The domain name of the website, including protocol (http or https)

If the RSS icon with the social media icons is to be displayed as a content element (menu of the subpages with layout "Social media links of pages"), then activate "RSS icon in social media icons content element" in the constant editor.

In TYPO3 12 LTS, you no longer need an additional extension for basic SEO functions. The manual adjustment of the page title, the control of indexing by search engines and the generation of the canonical tag are among the standard functions.

You will find an "SEO" tab in the page properties

• Title for search engines: here you can manually overwrite the automatically generated page title (<title> tag in HTML)
• Robot instructions:
  • Index this page: controls whether search engines index the current page or not (meta tag robots="noindex" or "index" in HTML)
  • Follow this page: controls whether search engine bots follow the links on the current page or not (meta tag robots="follow" or "nofollow" in HTML)

We have added the extension "yoast_seo" to the TYPO3 template to help with "on page" search engine optimization. "On page" means: measures that you can carry out yourself on your site. The editor can immediately see what needs to be done to optimize the website for search engines.

For example, the extension analyzes the text of a page for readability and also provides tips for improvement. It also checks whether the "Description" field is used in the page properties, as this is used to generate the important description meta tag, or whether the title of the page is correct. The extension has other functions, we recommend that you read the documentation carefully.

Search engine optimization and accessibility also include filling in the meta data for every file that is integrated on the website.
This metadata can be managed for every file that is used in the backend. Meta data can be, for example, an "alternative text" for images or copyright information. In some cases, this metadata is also automatically displayed in the frontend if it is available.

There are two ways to maintain this metadata:

1. per content element on the files used there
2. globally via the file list backend module

The global way has the advantage that you only have to maintain this data once per file. If you then use the file in a content element (even several times on different pages), the globally maintained metadata is automatically used.

Nevertheless, you still have the option of overwriting the global metadata locally for each content element if required.

News articles, blog articles or similar can be maintained with the "News" extension supplied.

A news article consists of at least a headline, usually a teaser text and the actual news text. In addition, images, files, relevant links and more can be added to articles.

News articles differ from normal content elements in that they are usually collected centrally in a directory. The output of the articles on the website is controlled by the news content element with various types.

Different list views for news articles

The news extension provides a list view for news articles by default. In addition, we have configured two further display types in the TYPO3 template:

• a reduced list view that can be used, for example, on the homepage of the website for the latest news items
• a card view, which can be used as an alternative to the standard view.

In each news plugin, the desired display type can be selected under the "Plug-in" tab under "Extension options" "Template" "Template layout".

Note on the news_administration extension: We do not integrate any paid extensions into our SitePackage. This function is therefore not available.

Although TYPO3 does not set any cookies in the frontend in the standard configuration, we have integrated a tool that displays a so-called "cookie banner" to visitors to the website. If cookies are to be set by the site, visitors have the option of agreeing to the use of individual or all cookies, or generally rejecting cookies.

In a newly installed TYPO3 template, the consent to cookies from Youtube or Vimeo is requested, as we also include a Vimeo video on a demo page.

You can control the behavior of the cookie banner via the constants editor. You can also deactivate it completely if your website does not set any third-party cookies.

Note: Cookies for logging in to the backend or frontend are technically necessary cookies that do not need to be pointed out separately.

We have also preconfigured the Cookie Manager for common tools. You only need to add the relevant information to the constants in order to use the following tools:

• Matomo
• Google Analytics
• Facebook Pixel
• Twitter
• Youtube / Vimeo

Translate the Cookie Consent Manager

Of course you can add any other languages. However, the texts in the Consent Manager must then also be translated if necessary. To do this, you must use SSH or FTP to download the file

typo3conf/ext/jwsitepackage12/Resources/Private/Page/Partials/Klaro.html

edit.

To speed up the delivery of a website, TYPO3 uses various cache mechanisms. The cache is a type of temporary storage so that TYPO3 does not have to regenerate the requested page every time the frontend is called up.

The cache of a page is automatically deleted when an editor saves a new content element on a page.

In the backend, editors can delete the page cache by clicking on the lightning bolt icon.

If you have previously used the sample project 11, you can of course upgrade to TYPO3 version 12.

After the successful upgrade, there are two options:

1. you continue to use the sample project extension, version 11 (jwmusterprojekt11), in TYPO3 V12

Advantages:

• You have a current TYPO3 version
• If you have made your own customizations to the files of sample project 11 (CSS, TypoScript, fluid templates, etc.), these customizations are still available and the website simply continues to work in the frontend as before

Disadvantages:

• You cannot use the new functions of the sitepackage for version12 (jwsitepackage12).

2. you exchange the sitepackage extension version 11 (jwmusterprojekt11) for version 12 (jwsitepackage12).

Advantages:

• You also have a current TYPO3 version
• You have all the new functions of Sitepackage V12

Disadvantages:

• If you have made your own adjustments to files in the V11 sample project (CSS, TypoScript, Fluidtemplates, etc.), you must manually transfer these adjustments to the corresponding files in Sitepackage V12. Automatic migration is not possible.

So both variants have advantages and disadvantages, and you have to decide for yourself which variant you choose. Of course we can help you with this!

Since our SitePackage is located on a non-public server, the SitePackage cannot currently be downloaded via packagist.org or an individual repository. You can use the following steps to create a Composer-compatible version of the SitePackage:

1.) Download the SitePackage tar.gz or use the tar.gz that is already on your server.

2) Since TYPO3 12 requires at least PHP 8.1, adjust the PHP version for the console accordingly.

3) Install TYPO3 12.4

composer create-project typo3/cms-base-distribution:"^12" site-package

4) Change to the site-package directory:

cd site-package

5) Add the package indexed-search:

composer req typo3/cms-indexed-search:^12.4

6) Create the directory structure for non-composer-based extensions:

mkdir -p source/extensions

7) Unpack the SitePackage:

tar -xzf sitepackage-12.4.8.tar.gz

8) Copy the sitepackage-12lts/typo3conf/ext/jwsitepackage12 directory from the unpacked SitePackage into the Source/Extensions directory you have just created.

9) Copy the directory sitepackage-12lts/typo3conf/sites from the unpacked SitePackage into the directory typo3cms/site-package/config

10) Edit the file typo3cms/site-package/config/sites/main/config.yaml and adapt the first line to your domain name.

11) Copy the sitepackage-12lts/typo3conf/system directory from the unpacked SitePackage into the typo3cms/site-package/config directory.

12) Edit the file typo3cms/site-package/config/system/settings.php and adjust the database parameters.

13) Copy the directory sitepackage-12lts/fileadmin from the unpacked SitePackage into the directory typo3cms/site-package/public

14) Copy the directory sitepackage-12lts/uploads from the unpacked SitePackage to the directory typo3cms/site-package/public

15) Add the Source/Extensions directory as a repository to typo3cms/site-package/composer.json:

"repositories": {
	"0": {
		"type": "path",
		"url": "./Source/Extensions/*",
		"options": {
			"reference": "none",
			"versions": {
				"jweiland/sitepackage": "1.0.6"
			}
		}
	}
},

16.) Now install the SitePackage with Composer in the typo3cms/site-package directory:

composer req jweiland/sitepackage:^1.0

17) The unpacked SitePackage contains an sql file in sitepackage-12-lts/typo3conf, which you can import into your database using the shell or PhpMyAdmin.

18) Adjust the domain path in the customer menu to the directory. Make sure that you refer to the subfolder typo3cms/site-package/public.

19) Now open the URL [domain]/typo3/install.php and log in to the TYPO3 InstallTool

19a.) If you do not know the password, simply enter any password. After logging in, a hash value beginning with "$" will appear. Please copy this

19b.) Create the file additional.php in the directory typo3cms/site-package/config/system

19c.) Insert the following into additional.php:

<?php

$GLOBALS['TYPO3_CONF_VARS']['BE']['installToolPassword'] = 'HierKommtDerHashWertRein';

19d.) Now you can log in to the InstallTool with the password you just entered

20) Click on Environment

21) Click on "Check directory status"

22) Scroll down and click the "Fix" button.

23) In the Maintenance area, click on Flush Cache

The SitePackage is now installed as a Composer package. You can now load your website and work with the SitePackage.