TYPO3 already has a wide range of content elements. With extensions, the spectrum of available elements is widened and enables the presentation and implementation of special content. Plugins are content elements from those extensions. Other content element groups, such as News or Account, also contain plugins, which we present separately.

Tab General

This tab looks the same for all plugins. You can only define the heading of the element here. The tab contains the same fields as the content element Header only.

General Plugin

The General Plugin can be used to create all existing types of Plugins. However, most plugins are already listed as separate content elements. It makes no difference whether you select a general plugin and then, for example, set comments or insert the content element comments directly. All plugins are marked in the content area with the symbol that you see here.

Tab Plugin

In the general Plug-In, click in the field under Selected Plugin and select the desired option from the list that appears with a left-click. A context window informs you that a change will affect the available fields. Select OK. The next steps depend on which plugin you have chosen.

In the list of plugins you will find only one plugin that cannot be inserted as separate content element: We present the plugin Email Confirmation in the Account Content Elements. 

Comments

Comment columns allow users to express opinions, criticism or praise. The Comments plugin can be configured according to your wishes in just a few steps. If you want to add the content element, you will encounter the speech bubble icon. Since this is a plugin, the cube symbol is displayed in the content area.

Tab Plugin

This tab is divided into further tabs. Here you will find all options for setting the comment plug-in.

Sub-tab General
Mode

The options Page comments and Extension comments are available in the drop-down menu. The modes differ in how the thread identifier can be defined.

Unique Thread Identifier

A thread is a course of a conversation or the sequence of comments and answers. A thread identifier is only necessary if a thread occurs several times on the page. This means that if you want to insert several comment plugins on a page and want them to be independent of each other, you should fill in the identifier. This must be unique. An empty identifier is replaced by the current page ID. If a thread is to be displayed on several pages, simply insert the comment element with the same thread identifier on the relevant pages.

If you are in Page comments mode, enter a unique identifier here. In Extension comments mode, you can enter several threads separated by a comma.

Enable user notifications

This setting allows users to be notified when a new comment is posted. By default, a check mark is set here, which means that the option is active.

Respect language

If the option is activated, only comments that belong to the page language selected are displayed in the frontend. This is not activated by default.

Enable Ratings

If the option is enabled, users have the option to give a 1-5 star rating with their comments. The average rating is displayed above the comment thread. This setting is enabled by default.

Sub-tab Appearance

Display the latest comments at the top of the thread

The option is already activated when the plugin is created. If you do not check this box, the comments will be displayed chronologically, starting with the oldest comment.

Enable slim view

When this setting is activated, only the most basic elements (comments, ratings and text fields for new comments) are displayed. It removes the comment counter, average rating (if enabled), heading, and button for disabling notifications. The slim view is disabled by default.

Max. Number of visible characters per comment

If you set the number to 0, there is no limit to the number of visible characters per comment. For any other number, comments with a higher number of characters are displayed in shortened form. By clicking on three dots at the end of comments, they can be expanded.

Sub-tab Adminstration

Allow only logged in users to write comments

Before users can leave comments, you must register on your site and log in. Users who are not logged in can see comments, but cannot write any. When creating the content element this setting is activated.

Users who are not logged in may only comment if they provide an email address

Those who are not registered on your site can leave comments if an e-mail address is provided. This option is also already active when creating the item. However, if users must log in to comment, this option has no effect.

Enable replies to individual comments

The enabled option allows users to not only comment, but also react to existing comments.

Disable the moderation for this thread

If this option is disabled, all comments in this thread must be reviewed by a moderator in the Comments module before publication. If you enable this option, all comments that have been posted previously will be displayed, regardless of whether they have been reviewed or not. By default, no check mark is set under this setting.

Close this thread for new comments

If this option is enabled, no further comments or replies can be added to this thread. All previously created comments are still visible.

Sub-tab File-Upload

Enable file upload

This option allows users to attach a file to their comments, which is enabled by default.

Max. number of files per comment

These specify how many files can be uploaded per comment. If you do not want files to be attached, simply uncheck Enable file upload.

Allowed file extensions

Determine which file types commentators are allowed to upload. When creating the plug-in, all possible file extensions are entered: gif, jpg, jpeg, pdf, png, docx, doc. If necessary, delete the unwanted file types in the field.

Max. file size in MB

Decide on the maximum size of the files that can be uploaded in the comments.

Hide the thumbnail for protected files

If you do not want protected files to be displayed in the preview, keep the check mark activated at this point.

Comments in Frontend

Teaser for Categories

With the content element Teaser for categories, you map entire pages as teasers. To do this, categories must be assigned to the pages. This plugin enables you to easily display pages on the third or deeper level as teasers in the front end, since these are not necessarily displayed in the navigation.

Tab Plugin

Tab Settings

Deactivate Lightbox

By default, the page that is displayed as a teaser will appear as a lightbox when you click on it. If you want the pages to open in a new tab, enable this checkbox.

Select all subpages

If you want to display all subpages of a selected page as teasers, enable this option.

Pages

Here, you can select any page of your website to be displayed as a teaser. Combined with the previous option, you can also select only one page and all subpages of the selected one will be displayed as teasers.

Categories

Select here which categories should be displayed in the frontend. It makes no difference whether you select super- and/or subcategories, they are all displayed as buttons for filtering in the frontend, provided that there is also a page with the corresponding category.

Record Storage Page

Add here the page(s) containing the subpages that should be displayed as teaser. Click on the Page button below the field or on the folder icon and select the teaser page from the context menu.

Tab Design

Randomize order of results

Here you can choose whether the teasers should be displayed in the order of the pages in the backend or whether the teaser tiles should be displayed in a different random order each time the page is accessed.

Disable masonry layout

The masonry layout displays teasers in a layered pattern. Unlike the normal tiles, this layout is space-saving and does not require teasers to have texts of the same length and images of the same size.

Number of Columns

The drop-down menu offers four options for how many teasers should be in a row: 1 (100% per teaser), 2 (50 % per teaser), 3 (33 % per teaser), 4 (25 % per teaser).

Appearance of the Teaser Tiles

Teasers can have images, images and an associated description, or just a description. For this, the teased pages must have teaser images or descriptions, which you must add to all teased pages in the resources tab.

Teaser for Categories in Frontend

How teasers look and work is shown best on our preview page of the website base. Depending on the settings (and available resources of the teaser pages), teasers are generated with images without or with description and with a description only. With the setting Images with description below, you should make sure that all teaser pages contain images and descriptions or that all pages have no teaser description, otherwise this could make a disorganized impression. You should make sure that texts of descriptions are about the same length.

Multidimension Teaser

A Multidimension Teaser displays whole pages as a teaser. The teasers are not only filtered by one, but several categories. Only if the page is assigned all categories that were selected in the frontend, the page will be displayed as a teaser.

Tab Plugin

Tab Settings

Deactivate Lightbox

By default, the page that is displayed as a teaser will appear as a lightbox when you click on it. If you want the pages to open in a new tab, enable this checkbox.

Select all subpages

If you want to display all subpages of a selected page as teasers, enable this option.

Pages

Here, you can select any page of your website to be displayed as a teaser. Combined with the previous option, you can also select only one page and all subpages of the selected one will be displayed as teasers.

Categories

Select here which categories should be displayed in the frontend. Only click on the categories that are to appear as buttons in the frontend. It does not matter whether these are categories or subcategories. Only those pages are displayed as teasers that contain all selected categories.

Record Storage Page

Add here the page(s) containing the subpages that should be displayed as teaser. Click on the Page button below the field or on the folder icon and select the teaser page from the context menu.

Tab Design

Randomize order of results

Here you can choose whether the teasers should be displayed in the order of the pages in the backend or whether the teaser tiles should be displayed in a different random order each time the page is accessed.

Masonry-Layout deaktivieren

Im Masonry-Layout werden Teaser in einer versetzten Kachel-Optik dargestellt. Im Gegensatz zu den normalen Kacheln ist dieses Layout, platzsparend und verlangt keine gleichlangen Texte und gleichgroßen Bilder bei den Teasern.

Number of columns

The drop-down menu offers four options for how many teasers should be in a row: 1 (100% per teaser), 2 (50 % per teaser), 3 (33 % per teaser), 4 (25 % per teaser).

Appearance of the Teaser Tiles

Teasers can have images, images and an associated description, or just a description. For this, the teased pages must have teaser images or descriptions, which you must add to all teased pages in the resources tab.

Multidimensional Teaser in Frontend

On the website you will then see the top categories that you have selected in the backend. In the drop-down menu you can then select the subcategories. If no subcategories are selected, only those pages containing all top categories will be displayed as teasers. Try out the function of the multidimensional teaser yourself on our preview page. As with teasers for categories, depending on the setting (and available resources of the teaser pages) teasers are generated with images without or with description and teasers only with a description. With the setting Images with description below, you should make sure that all teaser pages contain images and descriptions or that all pages have no teaser description, otherwise this could make a disorganized impression. You should make sure that texts of descriptions are about the same length.

Job Application Form

If you want to place job advertisements and accept applications via your website, you will find useful tools for this purpose in our TYPO3 Website Base. The Job Application Form plugin renders an input mask for unsolicited applications. With a few clicks the form is ready for use.

Tab General

As described above, you can assign a title to the element on the General tab. In addition, the title 'Unsolicited Application' is generated automatically. As the picture shows, two headings are then displayed above each other. To avoid this, you can hide the header you entered manually.

Tab Plugin

A red exclamation mark when the application form is created indicates that necessary information is still missing. In the case of an unsolicited application element, a page must be specified to which the application will be forwarded once it has been sent.

Under Plugin Options, simply click on the Page button or on the folder icon to the right of the field. In the context menu that appears, select the page to which you want to link after the application.

You should then link to the privacy policy page. The note is automatically inserted by the plugin, you must insert the link yourself at this point. To do so, click on the link icon and select the page with the data privacy policy.

If you also want the unsolicited application to have the same choice of locations (and therefore the same contact details) as the regular application forms, add the page or folder under Record Storage Page where the relevant data is located. Normally, the locations/companies and contacts are created in the folder for job advertisements. You can only see the contacts and companies in the list view. Here you can also add new data or edit existing records.

You will find the submitted applications in the Application record, which you can also see in the List module. In the Website Base, this data set is created in the Unsolicited Application page.

Oops, an error occurred! Code: 202404190512145e7035b9

The plugins job application form, job list and job teaser belong to the TYPO3 extension sg_jobs along with the backend module job offers. We also created a tutorial for the module for editors.

To the backend module

Job List

The job list generates an input mask and a list of all job offers. Potential applicants can easily filter the offers. This is a great advantage if there are a lot of job offers available. Because interested parties can quickly gain an overview of all relevant jobs.

Tab Plugin

Page containing the application form

Add here for example the page Career or unsolicited application. To do this, click on the Page button or the folder icon to the right of the field. Select the appropriate page from the page tree in the context menu.

Number of offers per page

Enter the number of job advertisements that will be displayed at once. Limiting the number of ads per page helps interested parties to keep an overview of the job offers.

Sorting of job offers

Manual sorting is set by default. If you prefer a different one, click in the field below the heading, and three options will appear in the drop-down menu: Alphabetically by job title, Manual (job offers are sorted as in the Job Offers module), By creation date.

Respected locations, Respected areas, Experience level filter

If you do not want to display all job offers in the list, but only certain locations, areas and/or experience levels, you can set the necessary filters here.

Record Storage Page

Select the page or folder that contains the records by which jobs can be filtered, such as location, company or work experience.

Job List in Frontend


The plugins job application form, job list and job teaser belong to the TYPO3 extension sg_jobs along with the backend module job offers. We also created a tutorial for the module for editors.

To the backend module

Job Teaser

You can use the job teaser to draw attention to job offers outside the career page. The configuration is as easy as the other job-related plugins. Use this content element to place suitable job offers on pages or in blog posts.

Tab Plugin

Plugin options

Page that shows a list of all job offers in the frontend

The teaser shows a selection of available positions and links to all open positions. To do this, you have to insert the page containing all job advertisements here. Click on the Page button or on the folder icon and select the career page from the menu that appears.

Page containing the application form

Add the Career or Unsolicited Application page here in the same way.

Respected locations

The teaser will only show the locations you select here. In the Available Items column, you see all the locations that have been created in your system. By left-clicking on a location, it immediately goes to the Selected Items column. To remove a selected object, click on it in the left-hand field (the object is then marked) and click on the trash can icon to the right outside the field (or between the two columns). With this action you move the object back to the right column.

Record Storage Page

In the data collection, add the page or folder that contains the job ads records.

Job Teaser in Frontend


The plugins job application form, job list and job teaser belong to the TYPO3 extension sg_jobs along with the backend module job offers. We also created a tutorial for the module for editors.

To the backend module

Twitter Stream

The plugin Twitter Stream allows you to display a Twitter stream on a website with just a few clicks. All you need to do is enter the unique user name. If you want to add the content element in the backend, you will find the Twitter icon, but in the content area the element is marked by the plugin icon.

Tab Plugin

Plugin options

Twitter Handle

Twitter Handle or username is the crucial information for a working Twitter stream. The username always starts with @. In contrast to the profile name, which can be assigned arbitrarily, the user name is unique. The profile name is always the first thing you see, below it you will find the Twitter handle, which you can recognize by the @ sign.

Exclude replies

If you want to display only tweets and no related responses in the stream, check this box. By default, none is set.

Include Retweets

Retweets are not activated when the plugin is created. If you also want to display retweets, activate the option by placing a check mark at this point. If retweets are displayed, it may happen that hardly any posts from the specified profile are displayed, but only retweets from other profiles.

Number of tweets to show

Limit the number of tweets displayed in the frontend. Five tweets are predefined, but you can change the number as required.

Display Twitter-Handles, Hashtags, and URLs as Hyperlinks

This is not activated in the standard settings. If you want to have links in the tweets, check this box.

Twitter Stream in Frontend (Username, Hashtags & URLs as Links)

Technical documentation

The Twitter plugin is based on the sg_twitter extension. There is a technical manual for this TYPO3 extension, which is primarily intended for developers.

To the technical documentation

Pages/Content Elements in Tabs

With the Pages/Content Elements in Tabs plugin, both entire pages and individual content elements can be displayed in tabs. Content from different pages and entire pages can be combined into a bundle of topics, for example.

Tab Plugin

Plugin options

Mode

Three modes are available. Try different options to get the best result.

  • Show every content element on the current page as one tab each
  • Show every subpage of this page one tab each
  • Combined (show elements chosen below, one tab each)

Pages and content that shall be rendered as tabs

This is where you add the pages or individual contents that should be displayed as tabs. If you want to add a whole page as a tab, click the Page button below the white field or click the folder icon to the right of the field. To fill a tab with a content element, click the Page Content button or click the folder icon. When you click the icon, you can insert both pages and individual content items. If you use the buttons, you can select only pages or only content.

Overwrite tab titles

In this field you assign the tab titles. Separate the tab headings with a line break. You must enter one title per line. If a title is not to be overwritten, leave a blank line blank or fill it with DEFAULT. Empty lines at the beginning are ignored. So if you do not need to overwrite the first tab titles, but do need to overwrite the following ones, you must enter DEFAULT in the first line.

Enable Autoplay & Autoplay Interval

When Autoplay is enabled, the page automatically switches between tabs from left to right at the specified interval. When the last tab is reached, the animation starts again from the beginning. The default interval for automatic tab switching is specified in milliseconds and is 7000 milliseconds (7 seconds). If Auto-Play is deactivated, the specified interval is ignored.

Enable MouseOver Navigation

When this option is disabled, users must click a tab to open it. When enabled, tabs change when the user moves the mouse over them. By default, this option is disabled.

Hash

Hash is the name used to implement history and direct linking functions.

Pages/Content Elements in Tabs in Frontend

Our preview page shows how pages/content elements in tabs can look like in the frontend.

YouTube

With the YouTube plugin, YouTube videos can be easily integrated without downloading videos and uploading them again in the system. In addition, the content element has various options that can be used to customize the display and behavior of the videos.

Tab Plugin

Settings

ID of Channel, Playlist or Single Video

Enter the ID of the channel, playlist or a single YouTube video here. If you want to enter multiple IDs, enter them separated by commas (ABCD_12, EFGH_34). In the YouTube IDs section we show where you can find the IDs.

IDs of the videos to exclude

If you do not want to show certain videos of a playlist or channel on your website, you can exclude them here. To do this, enter the corresponding IDs one after the other, separated by a comma (ABCD_12, EFGH_34).

Maximum Amount

Decide the maximum number of videos to display and enter the desired number. Please note that some layouts only work with or above a certain number of videos (see Layout type at the 'Appearance' section).

Additional URL parameters

For further customization of the embedded videos you can use YouTube Player parameters. The parameters work only when videos are played directly on the page. For more information, see: https://developers.google.com/youtube/player_parameters?hl=de.

Appearance

Layout Style

You can select the standard, row or playlist layout. There is also the single video layout, which is used automatically when you embed only one video. It's also important to note that the standard and row layouts work with two or more videos, and the playlist layout works with four or more videos. We present how these look on our preview page.

Show Videos Titles & Show Video Descriptions

These checkboxes allow you to specify whether to show titles or descriptions of the video. If you don't show titles and/or descriptions, you don't need to set a character limit.

Character limit for title & description

Titles and descriptions of videos can be of different length, that's why you can set a character limit for title and description. The plugin will not stop in the middle of the word, but will consider whole words. By default, the value '0' (zero) is entered, with this setting there is no limit to the number of characters.
Regardless of the number of characters, the lines of the description are limited: four lines for the single video, standard and playlist layout, and five lines for the row layout. In the frontend, the rest of the description can be expanded using a button. Also note that if the description has a character limit, the text is always shown only up to the limit, even if you expand it.

Aspect Ratio

Specify the aspect ratio. The setting is only used when the thumbnail type should check it. This setting does not affect the aspect ratio of the custom thumbnails.

Thumbnail Type

Set the resolution from maximum to low. Not all options are always available.

Custom Thumbnails for the Videos

It is also possible to set your own thumbnail images for YouTube videos. The first image is placed over the first video, the second image is placed over the second video, and so on.
The aspect ratio of custom thumbnails is the same as the aspect ratio of the used image. Upload images with desired aspect ratio in the file list or edit the thumbnails in the photo editor directly in this content item to achieve the desired aspect ratio.

Behavior

Play video not in the lightbox, but directly on the web page

By default, a video is played in a lightbox. You can specify here to play videos directly on the page.

Show API Result

Specify whether debug information should be displayed.

YouTube IDs

YouTube Channel ID

There are several ways to find out the channel ID, as through the URL the ID is no longer visible for some time. If it is the ID of your own YouTube channel, you can find the letters and number sequence in the advanced settings of the account. You can find instructions from Google on how to do this.

If you need the ID of another channel, it is unfortunately not quite as simple. Here, too, there is a solution from Google. Alternatively, call up the channel on YouTube and search in the source code for "externalId" after a colon follows the channel ID, also in quotes. Or you can execute the following JavaScript code in the console ytInitialData.metadata.channelMetadataRenderer.externalId, whereupon the channel ID is displayed in quotes.

You then simply paste the channel ID into the plug-in and make any other settings you need.

ID of YouTube Playlist

To add a playlist ID, copy from the playlist link everything that comes after list= and paste it into line for the ID.

  • Playlist-Link: www.youtube.com/watch?v=rrVDATvUitA&list=PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UON
  • Playlist-ID: PLmhUZw8WWzebYTvtVWHkb_YMgKARy6UON
ID of YouTube Video

To add a video ID, copy from the link of the video everything that comes after watch?v= and paste it into line for the ID.

  • Video-Link: www.youtube.com/watch?v=IBAhAk0-sPo
  • Video-ID: IBAhAk0-sPo

Content Area

In the content area you will see an overview of the settings you have made in the YouTube plugin.

YouTube in Frontend

Depending on the settings chosen in the plugin, videos, playlists and channels can look very different. On our preview page you can see some examples showing how different settings affect the look in the frontend.

Vimeo

With the Vimeo plugin, Vimeo videos can be displayed on a TYPO3 page without having to download videos and upload them again in the system. Also, like the YouTube plugin, the content element has various options that allow you to customize the appearance and behavior of the videos.

Tab Plugin

The following options are available. These are similar to the options for the YouTube plugin. When editing the Vimeo content element, you can therefore follow the YouTube instructions.

Settings

  • Video ID, channel name, showcase: In the Vimeo IDs section we show where to find the IDs.
  • IDs of the videos to exclude
  • Maximum Amount
  • Additional URL parameters: As with YouTube, you can use parameters for further customization. This only works when videos are played directly on the page. You can find more information about parameters at: https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview.

Appearance

  • Layout Style
  • Show Videos Titles & Show Video Descriptions
  • Character Limit for Title & Description
  • Custom Thumbnail for the Videos

Behavior

  • Play video not in the lightbox, but directly on the web page
  • Show API Result

Vimeo Video IDs

Vimeo Channel Name

To add a channel name, copy from the link of the channel everything that comes after vimeo.com/channels/ and paste it into line for the ID/name.

  • Channel-Link: vimeo.com/channels/staffpicks
  • Channel Name: staffpicks

Vimeo Showcase ID

To add a video ID, copy from the link of the video everything that comes after vimeo.com/showcase/  and paste it into line for the ID.

  • Showcase Link: vimeo.com/showcase/vimeocanhelp
  • Showcase ID: vimeocanhelp
Vimeo Video ID

To add a video ID, copy from the link of the video everything that comes after vimeo.com/ and paste it into line for the ID.

  • Video Link: vimeo.com/246107487
  • Video ID: 24610748

Content Area

In the content area you will see an overview of the settings you have made in the Vimeo plugin.

Vimeo im Frontend

Depending on the settings made, the result in the frontend can look very different. In our preview page you can see some examples of this.

Would you like to know more?

All information about the available editions can be found on the webpage for our TYPO3 Website-Base. You have the possibility to get a Website at a Fixed Price or you decide for a Website as a Service package, with which no further costs for hosting or security and function updates will come up to you.