Our TYPO3 blog extension sg_news contains all the necessary tools to run a blog based on TYPO3. With the extension you get a backend module, two page types and several content elements with which you can tag news posts. You create posts like other TYPO3 pages in the page module, place them in the page tree and edit them like any other page. Thus, blog posts have the same range of content elements and the same design freedom as a standard page. In this documentation, we have compiled tutorials for all the above-mentioned components of the sg_news extension.

With running a blog, comments can also become relevant. We have created a separate extension for this purpose (sg_comments), for which we have also compiled a documentation. The comments module is a moderation tool for backend users to manage comments.

Backend Module: News

The news module is used to manage news articles or blog posts. Already posted articles are listed in a clear manner and can be filtered and searched.

New articles can be created via the module - but you can only edit  the page properties there. Content is added via the page module and edited as on a standard page. That's why there's a Go to News Content button in the news list on every article and a Go to News Module button on each news page in the Page module to go from the News module to the page and vice versa.

To access a news list, you must be on the root page (often home or start page) or on a category page. The latter contains the article pages and can be inserted at any position in the page tree. In order not to lose the overview of the category pages, it is recommended that you select a location in the page tree for this.

Overview

The appearance of the list differs depending on whether you are on the root page or a category page. On the root page you can filter the articles by category and tags and if you are on a category page, the category filter is logically omitted. In both cases, the news list can be searched.

Another difference is the button above the list. On the root page you will see the button Add News Category and on a category page the button Add News Record. On the root page it is still possible to create a new news entry, because the options in the listed records are the same. In the screenshot of the news list you can see all available editing options of an article. The first four editing options are always visible and should already be known from other TYPO3 elements: View webpage, open editing mode/Edit record, Hide page and Delete record. If you click on the three dots after the first buttons, more editing options will appear. From left to right the following options are available: Display information, Move page, Display change history/Un-do, Set permissions for page, Create new page after this page.

Page Properties: Category Page

The category page is part of the news module, so you can Go to News Module in the content area of the category page at any time. In a category you create news as subpages, which can be filtered automatically by the category page. This function allows you to easily organize many blog posts.

The following three tabs in the page properties differ from the other page types. All other tabs can be found in the documentation for (general) page properties.

Tab General

The General tab is similar to the standard page. The category page is only missing some editing options. You can therefore read the documentation for the standard page. The following setting options are available:

  • Page – Type
  • Enable/Disable AMP on this page/and all subpages
  • Pagetitle
  • URL Segment
  • URL path segment & Exclude from URL path segment generation on subpages

Tab Images

Images are crucial for the presentation of news articles as teasers. For category pages, the relations in the Images tab are used as fallbacks, if a news page does not contain relations. This way there will be no issues when displaying teasers.

To add a single view image or a teaser image, simply click the Create new relation button and select the image in the file list.

Tab Metadata

For the Metadata tab, you can use the documentation for the standard page as a guide. There are fewer available metadata columns in the page properties of a category page than on a standard page. However, the available options are similar:

  • Meta tag for search engine policy – Noidex, Nofollow
  • Abstract
    • Abstract
    • Title Tag
    • Canonical Tag
    • Description

Page Properties: News Page

The following three tabs in the page properties of news are different from other page types. However, there are tabs that are repeated on (almost) every page. We have summarized these page properties for you.

In contrast to a standard page, the properties of a news page require a few adjustments. Apart from that you can add and edit content as usual.

Tab General

Title, Pagetitle & Description

When creating a new news page via the news module, you will immediately be taken to the page properties and must first specify a page title, even if this will be overwritten after saving and is automatically composed of the date of the last update and the title. Therefore, you should also specify a title in the first step, so that a unique page title can be generated. If you insert a news page by using the buttons/icons above the page tree, only the date will be used as page title. As soon as you enter a title in the page properties and save it, the page title will also be adjusted.

The description of the page is important when creating teasers for the news page. It also serves as a description for search engines (short description of the page's content), for this purpose the text should not be longer than 135 characters.

You can see the news teasers on our preview page. There is also documentation available for the corresponding news content elements.

URL Segment, URL path segment, Highlighted/Top Element & Don't show in "Latest News"

The URL Segment is automatically generated from the position in the page tree and the pagetitle. If you want to change the URL, you can do so by adjusting the new path directly or by entering a URL path segment. The latter causes that the page title in the URL is replaced by the path segment. In order for the path segment to be transferred to the URL, you must click on the right button next to the URL segment (Recalculate URL segment).

If you do not want subpages of the created page to receive the path segment of the current page, place a check mark under Exclude from URL segment generation on subpages. This ensures short and concise URLs. However, since news pages usually have no subpages, you can neglect this setting.

If you want to highlight the article, activate the corresponding option. And if you do not want the news article to appear in the latest news, place a check mark below it.

Author, Last Update, Like Count, Location

Authors are displayed at the end of an article, the user can then call up further articles by the author. You can also create a teaser list of articles by an author. An author is created using the list module.

Since the page title is generated from the date of the last update and the title, you have the possibility to adjust the last update here. You can also see the Like Count, which can also be adjusted. You can even enter a location for the article.

Show the content from another page, Related Elements, Tags

If you want to set the content of another page as a news item, you only need to enter the page in this place. Then you do not have to add any new content. Only the page properties (title, URL etc.) have to be adjusted.

Related pages are listed as related articles in the frontend at the end of a news article. News tags are created as categories in the list module. They are important if you create article teasers by category/tag.

Tab Images

Images are crucial for presenting the articles as teasers. The image for the single view uses the content element latest news. No relation at this point would result in an incorrect display of the teaser/slider. The teaser image is used for all types of news teasers.

Tab Metadata

Metadata is additional data/information about a page. They can lead to a better search engine ranking.

Meta tag for search engines policy

Nofollow and Noindex tell the search engine crawlers how to handle the page. Noindex means that the page is not indexed, so it should not be listed in the search results. This can be useful, for example, for a sitemap that would hardly be useful to a user. Nofollow causes that the links on the page are not followed by crawlers.

Abstract, Title Tag, Canonical Tag

The abstract is used by some search engines to give a short text about the page content. For other search engines, like Google, it is another source of information about the website. For abstracts menus this text is used too.

The title tag is used as a header/title in a search result. It should be meaningful, unique and yet concise (up to about 55 characters long). The caption of the browser tab is the same as the title tag. Specify a canonical tag if, for example, you have set the content of another page in the General tab. With the Canonical tag you refer to the original page as the main page and as the one that is displayed in case of a search query. This protects your page from being penalized by search engines for duplicate content.

Content Elements: News Plugins

With the news plugin content elements you can create lists or teasers for news or blog posts according to certain criteria. The articles itself is created using the News module. With these TYPO3 content elements you create links to the articles.

The blog system of the Website-Base is based on the TYPO3 extension sg_news. In our technical documentation we have provided tutorials that introduce installation, integration and configuration of the extension. The extensive TYPO3 extension contains not only the plugins and the news module presented here, but also two different page types that allow to easily create blog posts and news in the page tree. The news page can be easily edited like any other TYPO3 page. While the category page allows to arrange the news by topics.

The TYPO3 content elements that are presented here are plugins, so the General tab looks the same for all news teaser plugins. The crucial settings are configured in the Plugin tab.

Tab General of all News Content Elements

When editing the General tab, you can use the Header Only content element as a guide.

Tab Plugin – Sorting Posts

All plugins for posts (except news by author) can be sorted according to various criteria.

Only show news published after/before

For example, if you only want to draw attention to newer posts on a page, you can set here that only teasers of articles published after a certain date are shown. Likewise you can create teasers that were posted before a freely selected date.

Sort by & Sort order

In addition to the system default, you can sort posts by two other criteria:

  • Date of publication
  • Order in pagetree

With the sort order you determine whether the sort should be ascending or descending.

Two examples should make the sorting clear:

  • If you sort by date of publication in descending order, teasers are displayed from the newest post to the oldest post.
  • If you sort by sequence in the page tree in ascending order, the teasers will be displayed starting from the post that is furthest down the page tree to the post that is furthest up.

News Overview

With the News Overview plugin, the TYPO3 system generates a simple teaser list of all articles or blog posts. This tool can also be used to generate filterable teasers, which can be sorted by categories and tags. Use this TYPO3 content element to provide your readers with an overview of available posts and to allow easy sorting.

Tab Plugin

Group news pages in tabs by

The generated teasers can be grouped according to various criteria. The following options are available here:

  • No grouping: The teasers cannot be filtered and are sorted by the selected rules.
  • Categories: You see the default setting of the plugin. However, this does not refer to the system categories that can be found in the list module, but to the categories that you create in the News module or add them as Category pages. A post can only be assigned to one category.
  • Tags: Tags are created like system categories in the List module with the list element Category. In contrast to the system categories, the news tags of the website base are located in the 'Blog' page, on the subpages of which the news and news categories are stored. Tags are not assigned to a specific news category. An article can carry several tags.
Category Selection

Only selected categories are displayed in the tabs. If no category is selected, articles of all categories are available in the frontend.

Enable filtering by criteria that are not grouped in tabs

This option allows an additional filter to be shown, which enables multidimensional filtering. For example, if you have chosen to group by category and activate this option, a page visitor can switch teasers by the categories in the tabs. At the same time a drop down menu is available to filter by tags. If you selected no grouping, both categories and tags are generated as a drop-down menu when the option is activated.

Max. number of news

Here you can define the maximum number of news teasers that can be shown.

Include only news subpages of the page containing this overview

If a check mark is set here, it means that only subpages of the current page are used for teasers. Articles that are located in other page branches are not displayed. If the option is not activated, all posts will be considered for the generation of teasers.

News Overview in Frontend

Latest News

The Latest News plugin generates a slider that links each slide to a single article. The slider always takes 100% of the available width: So in the header it fills the whole width, while in a grid element it adjusts to the width of the grid column.

Tab Plugin – Settings

Max. number of news in frontend

Specify the maximum number of recent news items you want to display.

Categories

Select the news categories from which the latest articles should be linked. The categories do not correspond to the system categories, but are created in the News module or directly added as Category pages. In the right field you will see the existing news categories. If you want to use all categories for the latest news, no changes have to be made in these fields.

If you only want to show articles of a certain category, click on this category in the right field. It will automatically be moved to the left field. This means that only posts from this category will be taken into account. To deselect a category, click on a category in the left field, which will select it first. While the category is still selected, click on the trash can icon between the two fields.

Tags

At this point you will see all categories created in the system, but not all categories are news tags. So if you want to exclude certain news tags, you need to know which categories are used for news articles or blog posts and which are not. Tags can be selected simply by setting or removing check marks.

Tab Plugin – Design

Within the plugin tab, in addition to the usual settings, you will find another tab where you can change the design of the latest news. By default, Layout 1 is selected, while the navigation dots are not enabled.

In Layout 1, article teasers are generated from the relations/images added in the page settings. You can also see the title, author, categories, tags and the date of the last modification. Layout 2 does not use the images from the news pages, but the description that can be entered in the news page properties in the general tab. Title, author, categories, tags and the date of the last change also appear with this layout. It is possible to set from 1 to 3 columns.

The navigation dots are placed under the teasers and show how many news are available. To get to the next articles or to the next article, the arrows on the left and right side of the teasers can be used in the frontend as well as the navigation points.

Latest News in Frontend

If you want the element to have a title, it is best to add it as an additional content element. If the title is created visibly in the content element, the slider image cuts off the title.

For the latest news to display properly, you need to ensure that all posts contain relations (images for creating teasers) or the category pages contain a teaser image if you want to use Layout 1. The image in the category serves as a fallback, in case that the news pages do not contain images. The images are used to create sliders automatically.

In our preview page, in addition to the Layout 1 in our screenshot, you can see different versions of Layout 2 with navigation points.

News by Categories/Tags

The news by categories/tags element generates a teaser list of posts to which certain categories (and tags) are assigned, similar to the news overview. The list is static and cannot be filtered. The category name is automatically used as title in the frontend. A header, which has been assigned in the General tab, appears above the generated title.

Tab Plugin

News Limit per Page

Specify how many news teasers should be displayed on a page. Please note the information about the categories: If several categories are selected, make sure that all teasers on a page can be seen in the frontend, otherwise the content element will not work. Therefore, make sure that the display limit is set high enough so that all news items are displayed on one page.

Categories

In the context of news, the categories do not correspond to the system categories that you find in the list module. What is meant are categories that are used specifically for news and are created in the News module or as a Category page. A post can only be assigned to one category.

Tags

Tags are created like system categories in the List module with the list element Category. In contrast to the system categories, they are located in the 'Blog' page of the Website Base, on whose subpages the news categories with the corresponding news items are created. Tags are not assigned to a specific category. An article can carry several tags or no tag at all.

News by Categories/Tags in Frontend

List News by Author

When your blog posts are assigned to authors, it is possible to create article teasers from specific authors. The plugin can be configured quickly and easily. It uses the name of the author as the title in the frontend. An entered title in the General tab appears above the automatically inserted title.

Tab Plugin

Show the information of the author

In our frontend example, the information about the author is not displayed. Only the name is visible as title. However, this function is activated by default. In this case, not only the name, but also the associated image (if available), e-mail address and description of the author will be visible on the page.

News Author

Select the author whose posts should be shown as teaser in the frontend. Authors are edited and added in the List Module.

To select an author, click the Author button or the folder icon to the right of the field. If necessary, select the page on which authors are created and click on the desired record.

News which are excluded from the list

A list of all existing news is displayed in the right-hand field. Select the news page that you do not want to appear in the list in the frontend. Just click on a post name in the right field. To move a post from the left field back to the right field, click on the article in the right field. You will see that the article has been selected. Now use the trash can icon between the two fields. The website is now no longer selected.

List News by Author in Frontend

Ohne Informationen des Autoren

You would like to know more?

All information about the available offers can be found on the pages of our website base. You have the option of having a website created at a fixed price or opt for a Website as a Service package with which no further hosting costs or security and function updates will be due to you.

Technical documentation of the sg_news extension

For developers, we have compiled a technical documentation on the sg_news TYPO3 blog extension, which contains notes on integration and further information about the extension.