TYPO3 Content Elements: Plug-Ins - Documentation

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.

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.

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: 202212050757233181c0c9

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.

Cookie Opt In

Cookie-List

YouTube

You can use the YouTube plugin to display YouTube videos on a TYPO3 page without having to download videos and upload them again in the system. In addition, the content element has various options that can be used to customize the display of the videos.

Tab Plugin

ID of Channel

Enter the ID of the channel, the playlist or an individual YouTube video here.

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.

Maximum Amount

Decide how many videos are displayed at a time.

Show Videos Titles & Show Video Descriptions

These checkboxes allow you to specify whether or not to display titles or descriptions of the video.

Replace Thumbnail with Video and disable lightbox (Desktop & Mobile)

Normally, a preview image of the video is displayed and when you click on the image, it is played in a lightbox. Here you can specify that videos can be viewed directly on the page, without a lightbox.

Aspect Ratio

Specify the aspect ratio. The setting is only used when the thumbnail type should check it.

Thumbnail Type

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

Custom Thumbnail 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.

Show API Result

Specify whether debug information should be displayed.

ID of YouTube Channel

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

Channel-Link: www.youtube.com/channel/UC1Y7onDsPyfP-lu--SXF-ew
Channel-ID: UC1Y7onDsPyfP-lu--SXF-ew

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. See how changing the settings affects the look of the frontend on our preview page.

Technical documentation

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

To the technical documentation

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. In addition, the content element, like the YouTube plugin, has various options with which the display of the videos can be individually adapted.

Reiter Plug-In

Plugin Options

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.

ID of Channel
IDs of the videos to exclude
Maximum Amount
Show Videos Titles & Show Video Descriptions
Replace Thumbnail with Video and disable lightbox (Desktop & Mobile)
Aspect Ratio
Thumbnail Type
Custom Thumbnail for the Videos
Show API Result

Name of Vimeo Channel

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

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

ID of Vimeo Video

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/name.

Video-Link: vimeo.com/246107487
Video-ID: 246107487

Content Area

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

Vimeo im Frontend

In the screenshot you can see a Vimeo channel that is embedded on a TYPO3 page. Title and descriptions are activated, while the lightbox is deactivated so that the videos are played directly on the page.

Technical documentation

The Vimeo plugin is based on the sg_vimeo extension. There is a technical documentation for this TYPO3 extension, which is primarily aimed at developers.

To the technical documentation