Tags

Using tags in the Contao front end

The Contao module Tag Cloud is meant to present a tag cloud in the Contao front end. It generates an HTML list for a given set of tags (e.g. a data container). To present this list as a tag cloud, you'll have to define the associated CSS selectors in your site CSS file(s). tags already comes with two example style sheets Media:tags_oxygen.css and Media:tags_orange.css which can be found in the tl_files/tags directory of the installation package (or in the same directory of your Contao installation if you installed the module via the Contao extension repository). Please use these example files as basis of your own CSS definition because in some cases it matters that styles have to be defined invisible (e.g. for the "Top 10 tags" feature).

The Number and size settings section lets you define some basic layout settings for the tag cloud. With the maximum number of tags you can limit the number of tags shown in the tag cloud. A value of 0 always shows all available tags, a value greater 0 only shows the most frequent tags according to the entered number. Please not that you should add a notice for your users if you don't show all available tags. The number of tag sizes limits the number of CSS class selectors for tag sizes. The default value of 4 generates 4 different CSS class styles for your tags (according to the occurrence of the tags): size1, size2, size3, and size4. If you change this number, you need to consider this in the definition of your CSS file. Use tag classname adds and additional CSS class for every tag that contains the name of the tag (blanks are replaced with an underscore). This allows you to individually style certain tags with your CSS file. The tag sports activities for example will get an additional CSS style sports_activity and can be changed to a huge size in your CSS file if you want to highlight this given tag.

Das Kontrollkästchen Auszeichnungs-Klassennamen verwenden fügt einen zusätzlichen CSS Klassennamen für jede Auszeichnung hinzu, der aus dem Namen der jweiligen Auszeichnung besteht. Damit können einzelne Auszeichnungen individuell per CSS angepasst werden. Leerzeichen in den Auszeichnungsnamen werden für die CSS-Klassennamen in Unterstriche umgewandelt.

Mit dem Auswahlfeld Tag Cloud Template können Sie das Template bestimmen, das für die Generierung der Tag Cloud im Frontend verwendet werden soll. Standardmäßig ist dies das Template mod_tagcloud. Sie können sich aber auch eigene Templates erstellen und hier verwenden. Diese müssen dann lediglich mit der Zeichenkette mod_tagcloud beginnen, also z.B. mod_tagcloud_spezial etc.

Show related tags adds a list of related tags to the frontend if a tag is selected. This shows all tags and their frequency that are defined together with the selected tag. If you click on a related tag, the selection of the results will be narrowed to all database entries that contain the selected tag and the selected related tag. The related tags view only works if the tag cloud module is integrated in the destination page of the tag cloud hyperlinks. Typically you position your tag cloud in a column on the left or right side and the results in the main column of the page.

Top 10 Tags adds an additional tag cloud that contains only the 10 most frequently used tags. If you activate the Top 10 tags, you will see two additional selections:

• Expand Top 10 Tags: Check this box to expand the Top 10 Tags by default. This only works if JavaScript is enabled in the browser, otherwise the Top 10 Tags are expanded always.
• Expand All Tags: Check this box to expand the main tag cloud by default. This only works if JavaScript is enabled in the browser, otherwise the main tag cloud is expanded always.

center|frame|Anzeigeeinstellungen des Tag Cloud Moduls im Backend, Top 10 Auszeichnungen aktiviert

Select a destination page if you want to use hyperlinks for every tag in the tag cloud. The destination page will be called with the URL parameter tag=TAGNAME e.g. http://www.mydomain.tld/destination.html?tag=contao or http://www.mydomain.tld/destination/tag/contao.html if you use Contao URL rewriting.

center|frame|Tabellenspezifische Eingabefelder des Tag Cloud Moduls im Backend

In the datasource settings you need to select the Contao source tables to generate your tag cloud. If you want to show tags for news articles you should check the tl_news table. You may uses specialized tag module add ons that are valid for certain Contao objects only such as tags_news, tags_articles, or tags_events. With these modules you don't need to select a datasource.

The expert settings should only be changed if you use your own datasources to feed the tag cloud. If you use the default solution coming with the tags module, please ignore this setting. Developers may define a different database table and a different database table field as a source for the tag cloud.

If you've done anything by the book, you should see a similar output on your page:

center|frame|Ausgabe der Tag Cloud im Frontend

or with activated Top 10 Tags:

center|frame|Tag Cloud mit Top 10 Auszeichnungen

or with activated Top 10 Tags and related tags:

center|frame|Tag Cloud mit Top 10 und zugehörigen Auszeichnungen

If more than one tag cloud (Top 10 and all tags) are shown, Contao adds a JavaScript that allows you to expand of collapse the tag clouds. Without JavaScript support the tags are always expanded. To make the JavaScript work you must use the CSS style definitions from the example CSS files tags_oxygen.css or tags_orange.css.

The tags extension comes with default tag support for the following Contao elements:

• News articles
• Articles
• Content elements
• Calendar events

Using tag clouds to redirect to other Contao modules

For a meaningful usage of a tag cloud you should enter a destination page in the redirect settings of the tag cloud module. The destination page should contain the tag cloud module (if you want to use the related tags) and one of the following Contao modules which have been modified by the tags extension:

• Module News archive: Shows all news articles that are tagged with a selected tag. The heading of the news archive will be shown with the selected tag and the number of selections.
• Module Newslist: Shows all news articles that are tagged with a selected tag. The heading of the news archive will be shown with the selected tag and the number of selections.
• Module Global article list: Show a list of articles that are tagged with a selected tag. The heading of the article list will be shown with the selected tag and the number of selections.
• Module Event list: Shows all events of a selected calenders that are tagged with a selected tag. The heading of the event list will be shown with the selected tag and the number of selections.
• Module Auszeichnungsobjekte: Es werden Inhaltselemente (Seiten, Artikel, Inhaltselemente) in einer Liste angezeigt, die mit einer bestimmten Auszeichnung versehen sind.

Showing the assigned tags in the frontend

For news articles and articles you can show the assigned tags at the bottom of the content. Therefore you can check the Show article tags or Show news tags option in the particular module and select a destination page for the tag hyperlinks.

These tag settings are available for the modules News reader, News archive, and Article list (Tags). Article list (Tags) is only available if you install the add-on extension tags_articles.

center|frame|Aktivierung einer Auszeichnungsliste im Modul des Contao Backends

The additional tag list is only shown if you're using a template that is capable of evaluating the tag list template variables. You may check the template news_full_tags for further details. You can make any other template ready for this feature if you copy and paste the related code into the template:

<?php if ($this->showTags): ?>
 
<?php if (count($this->taglist)): ?>
<ul class="tag-chain">
<?php $counter = 0; foreach ($this->taglist as $tag): ?>
<li class="tag-chain-item<?php if ($counter == 0) echo ' first'; ?>
<?php if ($counter == count($this->taglist)-1) echo ' last'; ?>
<?php if ($this->showTagClass) echo ' ' . $tag['class']; ?>"><?php echo $tag['url']; ?></li>
<?php $counter++; endforeach; ?>
</ul>
<?php endif; ?>
<?php endif; ?>

The CSS styles for this output are already defined in the example CSS files tags_orange.css and tags_oxygen.css. You might use these files as a basis for your own style definitions. A news entry with its assigned tags will look as follows:

center|frame|Darstellung einer Nachricht mit zugehörigen Auszeichnungen