Free TYPO3 template (sample project) for TYPO3 10 LTS

In version 10 of the sample project, we have not only improved existing functions, but also added many new features. In the following video you can see an overview of a few of these new features.

For example

• the new dashboard of TYPO3 10 LTS
• a cookie management solution based on the open source script "Klaro"
• Reponsive images and different crop variants for images
• Improved and new navigation variants (e.g. a mega menu)
• Grid containers for content (not yet shown in the video, see separate video)
• Expandable/collapsible content elements (not shown in the video, see separate video)
• and much more

Of course, a lot has also happened "under the hood", as we use the new possibilities of TYPO3 10 LTS in programming, such as the new asset collectors.

For security reasons, you should change the so-called encryption key after manual installation. This is a long random combination of letters and numbers. This key is used to "salt" various encryptions in the TYPO3 system, i.e. another random value is added to the encryption.

Proceed as follows:

1. Go to the "Settings" area in the backend.
2. Click on the "Installation Wide Options" here
3. In the [SYS] area you will find the input field for the encryption key, enter a long random combination of numbers and letters here
4. To save, click on "Write Configuration"

The steps are described in the following video.

One of the first steps in customizing the sample project should be to change the company name. This can be seen at the bottom of each 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 "Template" in the left-hand main menu in the backend.
2. Click on the "Home" page in the page tree.
3. If necessary, select the "Constant editor" in the selection box in the main area at the top left.
4. Select "JWEILAND.NET SAMPLE PROJECT" as the category.
5. Click on the pencil icon next to the "Company name" field to be able to edit the content of the field.
6. Finally, click on the "Save" button at the top

You can also see all the steps in the following video.

The correct recipient must be defined in the form so that the messages sent via the contact form also reach you.

To do this, the form's finishers must be edited in the "Forms" backend module. A finisher defines an action that is executed when the website visitor clicks the "Send" button on the form.

However, to ensure that the emails sent actually reach the recipient, there are also a few important points to consider when configuring the corresponding finisher.

All the details in the following video.

We generally recommend using an existing e-mail account to send e-mails from TYPO3. This can be used to send emails via SMTP.

You can either use an existing e-mail account or create your own account for sending e-mails via your customer menu. This can also be an address in the format noreply@name-der-domain.de. In other words, an address that is only used for sending, but where the name itself indicates that emails sent to this address will not be read.

Here you can find a video tutorial on how to configure e-mail addresses in the customer menu.

For the configuration in TYPO3 you need the following information:

• Server for outgoing mail SMTP: sslout.de
• Port: 465
• Username: your e-mail address
• Password of your e-mail address

You can see the necessary steps in the following video.

Multilingual websites are no problem with TYPO3. This has been a core function of TYPO3 right from the start. At the same time, TYPO3 is extremely flexible here, as in many other areas.

In order to make the content of a website available in several languages, two steps are basically necessary:

1. A translation must be created for the page itself
2. The content elements on this page must be translated.

TYPO3 offers two different modes for this:

1. the connected mode
2. the free mode (Free Mode)

In connected mode, the content elements in the standard language are closely linked to the translated content elements. If the original element is deleted, the translated element is also automatically deleted.
This mode is useful if the content is to be translated almost 1:1 into other languages.

In free mode, there is no link between the original and translated elements. If the original element is deleted, the translated element is retained.
This mode should be used if the content in the different languages differs in many parts.

The necessary steps are explained in the following video.

The sample project is delivered pre-configured with German and English as front-end languages. However, you can of course add other languages if required.

The following steps are necessary:

1. Create a data record of the type "Website language" on the top "Page" (ID 0) in the page tree and configure it accordingly
2. Add the desired languages in the page configuration and configure them here

The following video shows all the necessary steps.

If you do not need multilingualism for your website, you can also simply delete unnecessary languages in the backend.

1. Remove the languages you do not need in the Site Configuration. A default language (German in the sample project) must be retained!
2. Delete the data records of the type "Website language" on the top "Page" (ID 0)

You can also deactivate the display of the language menu in the frontend. To do this, switch to the template module in the backend, select the "Home" page, switch to the constants editor if necessary and select the "jweiland.net sample project" category there. If you scroll down a little, you will find the option to switch the language menu on or off.

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

However, if you do not need this search function, you can simply switch it off using a constant in the constant editor of the template backend module.

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 sample project, consent to cookies from YouTube or Vimeo is requested, as we also embed a Vimeo video on a demo page.

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

Note: Cookies for logging into 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

We have now integrated a function that is often requested in customer projects into the sample project: the option of displaying content elements in the frontend in an expandable and collapsible form.

Especially with long texts or a lot of content on a page, this gives you an option to make the texts clearer.

We have also integrated the option of displaying content elements in expandable and collapsible form only on smartphones, i.e. small screens. On larger screens, these content elements are displayed "normally".

The text editor (CKEditor) can be configured very easily and extended with additional functions.

In addition to the standard configuration, we provide further configurations in the sample project to use various functions such as syntax highlighting or a word counter.

Note: We currently (as of mid-July 2020) still supply 4 separate configurations. However, we will soon be combining these configurations into a single, extended configuration to make them even easier to use.

You can select the different configurations in the page properties of the "Home" page, under the "Resources" tab in the "Page TSconfig" field.

The "Page" module in the "Page management" area allows you to make some basic settings for the website. Here, for example, you can change the page title that is displayed in the title bar of the browser in the frontend. You can also configure the languages used and much more.

A newly installed sample project cannot be indexed by Google or other search engines. This is prevented by entries in a file called robots.txt.

This also makes sense at the beginning, as you want to add your content to the sample project first. Only when the demo content has been removed and replaced with real content does it make sense to have the website indexed by search engines.

You can control this by making an entry in the page configuration.

You can see the necessary steps in the following video.

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

News articles differ from normal content elements in that they are usually collected centrally in one place or folder. The output of the articles, i.e. where on the website and in what form, is controlled via so-called plugins.

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, for example.

The video shows you how to maintain existing articles and create new ones.

The news extension provides a list view for news articles by default. We have also configured two additional display types in the sample project:

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

The desired display type can be selected in each news plugin.

The sample project 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 using the constant editor.

The following must be adjusted:

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

You can also generally switch the feed on or off using a constant.

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 with every front-end call.

From time to time, however, it is necessary to delete this cache manually. Watch the video to find out exactly how this works and why it is necessary.

The sample project is basically a TYPO3 extension. This is also referred to as a "site package", as all the files required to operate the website are bundled here.

Such necessary files are, for example

• CSS files
• JavaScript files
• Images and icons
• HTML templates (fluid templates)
• Configuration files for TypoScript and TSconfig
• and more

Although many things can be set in the sample project via constants, further changes are often only possible by editing these files.

In this video you will get an overview of the site package and learn how to set up such an extension.

In this video you will learn how to change certain elements of the website using CSS. As a simple example, you will see how to change the color and font of the headings.

You will also learn how to find out in which CSS file the definitions for elements can be found.

For this chapter you will need at least a basic knowledge of CSS.

In addition to the role of administrator, who has all rights to the TYPO3 system, you can also create backend users with restricted rights.

These users can, for example, edit pages and content, but cannot make any changes to the system configuration or install TYPO3 extensions.

This is usually referred to as "TYPO3 editors".

The sample project provides some backend user groups as well as a sample user with the username "editor" as an example.

In this video you will learn the difference between an administrator and an editor.

You can create additional editors yourself if required.

You can control the user's rights by assigning user groups.

Once you have finished customizing the sample project, you will of course want to go live with your new website so that visitors can also enjoy it.

The following steps are necessary for this:

1. Customize the entry point in the site configuration.
   The domain under which the website is to be accessible must be entered here. Enter the domain name including the protocol, i.e. http or https
2. In the domain administration in the customer menu, you must adjust the target path of the domain.
   Here you must select the directory on the server in which the project is located.
   If necessary, set the PHP version to 7.3LATEST, the edition to EXTENDED and the "Secure settings" to "Yes".
3. To enable indexing of the website by search engines, adjust the settings for robots.txt in the page configuration.
   Please follow the video instructions on this page here.
4. If you have an SSL certificate for the domain, automatic redirection from http to https must be activated.
   To do this, you must activate the last two lines in the .htaccess file in the project directory on the server by removing the hash symbol at the beginning of the respective lines.

The new project should be integrated into the daily backup. This gives you the option of restoring the website from a backup at any time if, for example, pages or files are accidentally deleted.

If the sample project was set up by us, this step is not necessary! Sample projects installed by us are always already included in the backup script.

If you have installed the sample project yourself, the following steps must be carried out:

1. Edit the "daily" file on the server. You will find the file in the typo3cms/system/backup/ directory.
2. Add the following to the prepared lines (e.g. for project3)
   1. the directory in which the project is located
   2. the name of the database
   3. the name of the database user
   4. the password for the database
      IMPORTANT: the password must be enclosed in single quotation marks!
3. Activate the corresponding line for the database backup by removing the hash symbol at the beginning of the line
4. Activate the 3 lines for the file backup by also removing the hash symbol at the beginning of the line

After you have saved the changes, you can test the backup by starting the cronjob in your customer menu, which calls the daily script.

All steps are explained in detail in the following video.