About teasers as part of the structure of the RPTU websites
Teasers offer a navigation path to the subpages of a website. This path is particularly favored by visitors with mobile devices. As an editor, you must therefore always ensure that the subpages are linked in the content of the page so that they are easy to find.
- The teaser plugin from pw_teaser automatically creates a teaser from the properties of all linked pages
- There are three different appearances (layouts) for teasers
- The image is created in the page properties under "Teaser".
- The teaser text is taken from the description in the page properties under "SEO".
- Subpage teasers usually appear automatically at the bottom of a page in the "small 25%" layout
- This is controlled via the backend layout page property under "Appearance".
Use:
- Necessary linking of subpages in the content of the page
- Teaser text prepares the content of the linked page
- Do not use in grid elements
- Do not use with background colors or images
Preparation of the pages to be teased:
- Set teaser image under Page properties -> Teaser
- Set teaser text under Page properties -> SEO ->Description
- Number of characters: 50-160 characters
- Content: Concise, relevant and appealing
- Uniqueness: separate description for each page
Setting the page on which the teaser is displayed:
- Page properties -> Appearance -> Backend layout "Standard page with teaser at RPTU" displays teasers automatically
- Page properties -> Appearance -> Backend layout "Standard page at RPTU" without teaser
Special requests -> see from step 5
Tips for effective teaser texts
- Note the length: Keep the page description between 50 and 160 characters.
- Relevance: Make sure the description accurately reflects the content of the page.
- Uniqueness: Each page of your website should have a unique description.
- Include keywords: Use relevant keywords that describe the content of the page and address users' search queries.
- Call to action: Add a clear call to action to encourage users to click.
- Reader friendliness: Write in clear, concise and engaging language.
Info: In our template, we use the description of a page as teaser text. Among other things, the description is also displayed in search engines under the search hit.
Step 3: Teaser image and optional settings
- A Select image
- open the "Teaser" tab
- click on "Add image"
- select the desired image
- B Generate teaser automatically from the content
(Not recommended: unfortunately does not always work reliably) - C Teaser High-Light: Highlight all teasers for this page by flipping the switch. The background of the teasers for this page will be black instead of white.
- D Top-Line: If this page is displayed with a teaser of the "Big 100%" layout, the content of the top line is displayed above the headline.
Info about the high-light: Page visitors at RPTU pages get used to this type of highlighting. Use this option to actually highlight and not to recolor your web pages.
Step 4: Checking the result
For once, you will not see the changes to the page settings when viewing the page itself.
- click on the parent page in the page tree
- display the page
- check your teasers
If you do not see any changes, please empty the cache of this page using the lightning bolt symbol.
If you do not see any teasers, this page may not have the correct backend layout. See About teasers as part of the layout at RPTU websites.
Step 5: Create content element plugin pw_teaser
- Create a new content element
- Click on the "Plug-ins" tab
- Click on the "Page teaser" icon
Step 6: Selecting the teaser source
select the source for your teasers in the "General settings" tab
- all subpages of the current page
- all subpages of the current page (recursive)
- individually selected pages
- all subpages of selected pages
- all subpages of selected pages (recursive)
Info: Recursive is rarely useful. It means an output of subpages and subpages of subpages. The teaser does not show which page tree depth it comes from. You can specify the recursion depth. Please limit yourself to a maximum of 2 levels.
Step 7: Selecting the teaser layout
Select the teaser layout according to your intended use:
Teaser small (25%): 4 teasers are displayed next to each other. Each teaser is 25% of the page width in desktop view.
Teaser small (50%): 2 teasers are displayed next to each other. The alignment is horizontal. Each teaser is 50% of the page width in desktop view.
Teaser big (100%): Only one teaser per "line" is displayed and requires 100% of the page. If there are several teasers below each other, the teaser images are displayed alternately on the right/left. If you use large teasers, you can also use a top line, one line above the headline. This is the only layout in which the topline is displayed.
Optional step 8: Individual adjustments
- A Adjust sorting by
- Title
- Sorting in the page tree
- Creation, modification, publication, expiry or new date
- random
Info: It is not possible to sort the teasers individually. In an emergency, please take the detour of creating a plugin for each individual teaser and sorting them as desired by arranging them in grids/containers.
- B Display pages that are otherwise not displayed in menus (yes/no)
- C Hide the current page from the display
- D Show pages of a certain type - input separated by commas:
- 1 - Standard page
- 3 - Page of type link to external URL
- 4 - Reference page
Info: Pages of the external link type should only be created in exceptional cases. An SEO description is not available for these pages and is therefore not displayed in the teaser. Please do not "hide" any links to external pages in the menu or page content. Page visitors should always be able to consciously decide to switch to a completely different website.
TYPO3 self-study
Exercise
- Create a page with the backend layout "Standard with teaser at RPTU"
- Create the first subpage with:
- Title: Publications
- Teaser image: of your choice, but with alternative text
- Teaser text: "All publications of the Muster working group under the direction of Prof. A. Muster"
- Create a second subpage with:
- Title: Members
- Teaser image: of your choice, but with alternative text
- Teaser text: "Get to know the members of the Muster working group."
- Delete the page cache of the first page using the button with the lightning bolt symbol
- View the page in the frontend
- What effect do particularly long page titles have? Try it out.
- What effect do very short or very long teaser texts have? Try it out.
- Now create a content element of the type "Plugin pw_teaser" on the first page.
- Set the plugin so that the subpages of the current page are teased.
- Select large teasers as the layout.
- View the page in the frontend