PHPackages qzminski/hschottm-tags - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. qzminski/hschottm-tags ActiveContao-bundle[Utility & Helpers](/categories/utility) qzminski/hschottm-tags ====================== tags is a Contao extension that provides an architecture to tag any Contao element. 4.0.15(6y ago)0951LGPL-3.0+PHPPHP >=5.3 Since Jul 27Pushed 1y agoCompare [ Source](https://github.com/qzminski/tags)[ Packagist](https://packagist.org/packages/qzminski/hschottm-tags)[ RSS](/packages/qzminski-hschottm-tags/feed)WikiDiscussions master Synced yesterday READMEChangelogDependencies (2)Versions (20)Used By (0) Contao tags extension ===================== [](#contao-tags-extension) tags extension ============== [](#tags-extension) tags is a Contao extension that provides an architecture to tag any Contao element. It comes with a generalized database structure to save the tags and it can be used to visualize existing tags. tags also comes with ready-to-use tag support for Contao articles, news articles and calendar events. Developers may use the tags architecture to add tag support for their components as well. The module provides an input field widget for the actual data container and supports storing and retrieving of tags from the database. With JavaScript activated it is also possible to add and remove tags with a simple mouse click in the backend tag input field. [![tag input field in the Contao backend](https://cloud.githubusercontent.com/assets/873113/12077851/a925f4fa-b1f8-11e5-9cc9-711ab8341217.png)](https://cloud.githubusercontent.com/assets/873113/12077851/a925f4fa-b1f8-11e5-9cc9-711ab8341217.png) The screenshot shows that the HTML title attribute of the tag URL contains the name of the tag and the number of the tagged entities, e.g. Logging (2) means that the tag logging has been used two times for the selected object type (in this case news articles). Please note that you can only use one tag input field in a data container because the tag widget uses the data source of the parent data container. Using tags in the Contao front end ---------------------------------- [](#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 tags\_oxygen.css and 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). [![Number and size settings of the tag cloud module](https://cloud.githubusercontent.com/assets/873113/12077854/c93707fc-b1f8-11e5-9e8c-e7e341104c4a.png)](https://cloud.githubusercontent.com/assets/873113/12077854/c93707fc-b1f8-11e5-9e8c-e7e341104c4a.png) 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. The Use tag classname checkbox adds an additional CSS class name for every tag which consists of the name of the tag (only whitespaces are converted to underscores). This gives you the opportunity to define individual CSS styles for selected tags. [![Tag cloud template settings](https://cloud.githubusercontent.com/assets/873113/12077855/d7007c42-b1f8-11e5-93fd-456477d40602.png)](https://cloud.githubusercontent.com/assets/873113/12077855/d7007c42-b1f8-11e5-93fd-456477d40602.png) For the HTML code generation of the tag cloud you may choose a template from the Tag Cloud Template combo box. By default this is the mod\_tagcloud template. You can create individual templates for your tag clouds if the templates start with mod\_tagcloud e.g. mod\_tagcloud\_mine 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. [![Additional tag lists settings in the tag cloud module](https://cloud.githubusercontent.com/assets/873113/12077856/e4eee3e8-b1f8-11e5-8538-e19444e66f44.png)](https://cloud.githubusercontent.com/assets/873113/12077856/e4eee3e8-b1f8-11e5-8538-e19444e66f44.png) 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. [![Redirect settings of the tag cloud module](https://cloud.githubusercontent.com/assets/873113/12077861/f243a790-b1f8-11e5-99c4-2f07cd86e70e.png)](https://cloud.githubusercontent.com/assets/873113/12077861/f243a790-b1f8-11e5-99c4-2f07cd86e70e.png) In the redirect settings section 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. or if you use Contao URL rewriting. Keep URL paramters preserves date specific URL parameters (for the actual time period) in news archives. If you use the tag cloud on the same page as a news archive, the selected time period will be used in the tag URL's too. [![Datasource settings of the tag cloud module](https://cloud.githubusercontent.com/assets/873113/12077865/03c7d798-b1f9-11e5-829c-725669f49847.png)](https://cloud.githubusercontent.com/assets/873113/12077865/03c7d798-b1f9-11e5-829c-725669f49847.png) 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. [![Expert settings of the tag cloud module](https://cloud.githubusercontent.com/assets/873113/12077866/158fa15e-b1f9-11e5-8c60-6bf0834e5a83.png)](https://cloud.githubusercontent.com/assets/873113/12077866/158fa15e-b1f9-11e5-8c60-6bf0834e5a83.png) 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. You may also define additional CSS classes or ID's for your tag cloud to style the cloud with your custom CSS code. If you've done anything by the book, you should see a similar output on your page: [![Frontend output of a tag cloud](https://cloud.githubusercontent.com/assets/873113/12077867/249f7250-b1f9-11e5-94f5-5ec715bafc62.png)](https://cloud.githubusercontent.com/assets/873113/12077867/249f7250-b1f9-11e5-94f5-5ec715bafc62.png) or with activated Top 10 Tags: [![Frontend output of a tag cloud and top ten tags](https://cloud.githubusercontent.com/assets/873113/12077868/30813aea-b1f9-11e5-93be-0a05e3919e85.png)](https://cloud.githubusercontent.com/assets/873113/12077868/30813aea-b1f9-11e5-93be-0a05e3919e85.png) or with activated Top 10 Tags and related tags: [![Frontend output of a tag cloud, top ten tags, and related tags](https://cloud.githubusercontent.com/assets/873113/12077869/3cb56db8-b1f9-11e5-8711-e533f03ecd5f.png)](https://cloud.githubusercontent.com/assets/873113/12077869/3cb56db8-b1f9-11e5-8711-e533f03ecd5f.png) 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. Besides the general tag cloud module, tags comes with five more specialized tag cloud modules: - Tag Cloud (Articles) - Tag Cloud (News) - Tag Cloud (Events) - Tag Cloud (Members) - Tag Cloud (Content Elements) In Tag Cloud (Events) for instance you can filter the tags by using only selected calendars for the tag cloud generation. The tags extension comes with default tag support for the following Contao elements: - News articles - Articles - Content elements - Calendar events - Members ### Using tag clouds to redirect to other Contao modules [](#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 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 Calendar: Shows all events that are tagged with a selected tag. Output the tags of an event when you change the default calendar template. - Module Tag object list: Shows lists of content elements (pages, articles, content elements) with given tags. ### Showing the assigned tags in the frontend [](#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. The Ignore tags setting ignores all tag related URL parameters. This means that news lists or other modules using this settings cannot be filtered by tags. This is helpful if you have multiple lists on the same page and only want a specific list to be filtered by tags. 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. [![Tags settings for news objects](https://cloud.githubusercontent.com/assets/873113/12077870/4b6a902c-b1f9-11e5-87f1-32902be026d0.png)](https://cloud.githubusercontent.com/assets/873113/12077870/4b6a902c-b1f9-11e5-87f1-32902be026d0.png) An 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: ``` ``` 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: [![Additional tags at the bottom of a news list entry](https://cloud.githubusercontent.com/assets/873113/12077872/58849b90-b1f9-11e5-9b49-b6e92f243b04.png)](https://cloud.githubusercontent.com/assets/873113/12077872/58849b90-b1f9-11e5-9b49-b6e92f243b04.png) For **calendar modules** it's up to you if you want to show the tags of an event in the calendar. To do so, you need to modify the default calendar template `cal_default` or you create your own `cal_default` based template. To show the tags you can access the `tags` or `taglist` fields of the respective events, e.g. ```