Add tags to the CGBlog or News module

  Previous article Next article  

Add tags to the CGBlog or News module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.1
  Last updated: 04-07-2017
  Comments: 24

In this tutorial I will show you a simple methode (using Smarty) to add a tagging feature to the CGBlog and News module for CMS Made Simple. In CGBlog you can use categories for tags, but the options are limited.

1. Add Field Definition

Go to the CGBlog or News adminpage, open the tab "Field Definitions" and add a field definition:

  • Name: tags
  • Type: Text Input
  • Public: Checked

When adding or editing articles you will find a new field where you can fill in your comma seperated words. Example: tag,tag2,tag3 (Note: only letters and numbers, don't use spaces)

2. Sort Array modifier to alphabetize the output

To sort the taglists alphabeticaly I used the sort array modifier described in another article.

NOTE: If you don't want to use it, remove |sort_array in the templates below, otherwise your templates will break and you get a "very nice" error message...

3. Summary template

Create a new summary template, named i.e. "summary_tags"

CGBLOG: summary_tags
<ul>
{foreach from=$items item=entry}
  {if (($entry->fieldsbyname.tags->value|strpos:$tag) !== false)}
    <li>
      <a href="{$entry->detail_url}" title="{$entry->title|escape:htmlall}">{$entry->title|escape}</a>
    </li>
  {/if}
{/foreach}
</ul>

+ Click here to show the News module template

NEWS: summary_tags
<ul>
{foreach from=$items item=entry}
  {if (($entry->fields.tags->value|strpos:$tag) !== false)}
    <li>
      <a href="{$entry->moreurl}" title="{$entry->title|escape:htmlall}">{$entry->title|escape}</a>
    </li>
  {/if}
{/foreach}
</ul>



A2 Webhosting CMS Made Simple

4. Detail template

Create a new detail template, named i.e. "detail_tags" and set it as default template.

CGBLOG: detail_tags
{* Change to your detailpage alias (default: blog) *}
{$detail_page = 'blog'}

{$taglist = $entry->fieldsbyname.tags->value}
{$tagwords = ','|explode:$taglist}

<ul id="taglist">
{foreach from=$tagwords|sort_array item=tagword}
  <li>
    {cms_selflink page=$detail_page urlparam="&tag=$tagword" text=$tagword}
  </li>
{/foreach}
</ul>

<div style="clear: both;"></div>

<!-- The rest of the detail template -->
 

+ Click here to show the News module template

NEWS: detail_tags
{* Change to your detailpage alias (default: news) *}
{$detail_page = 'news'}

{$taglist = $entry->fields.tags->value}
{$tagwords = ','|explode:$taglist}

<ul id="taglist">
{foreach from=$tagwords|sort_array item=tagword}
  <li>
    {cms_selflink page=$detail_page urlparam="&tag=$tagword" text=$tagword}
    </li>
{/foreach}
</ul>

<div style="clear: both;"></div>

<!-- The rest of the detail template -->
 

You can change the detailpage alias in the top of the template.


The use in a Multilingual website

When you have a MLE website you will have multiple detail pages! In that case change the detail page line {$detail_page = 'news'} in the top of the template to:

{if $lang == 'nl'}{$detail_page = 'nieuws'}{else}{$detail_page = 'news'}{/if}

Call the i.e. News module in you page like this:

{News category='nl' summarytemplate='summary_tags'}

In the module are the News categories created like: en, nl, de and fr...

5. Stylesheet

Attach this sample stylesheet to your HTML-template.

Sample stylesheet
ul#taglist {
 margin: 0;
}

ul#taglist li {
 float: left;
  height: 28px;
  margin: 5px;
  list-style-type: none;
}

ul#taglist li a {
 padding: 5px 10px;
  text-decoration: none;
  color: #333;
 background: #EAE9E8;
 -moz-border-radius 6px;
  border-radius: 6px;
  border: #ccc solid 1px;
 font-weight: bold;
}

ul#taglist li a:hover {
 background: #161616;
 text-decoration: none;
  font-weight: bold;
  color: #fff;
}

6. Content page

Go to Content >> Pages and create a new page and set WYSIWYG off. This page need to be set as default detailpage in your CGBlog or News module.

CGBLOG: Page Content
{* Read tag parameter from page URL *}
{$tag = $smarty.get.tag|default:''}

{if $tag == ''}
  <!-- Default Content -->
{else}
  <h3>Articles tagged with "{$smarty.get.tag}"</h3>
  {CGBlog summarytemplate='summary_tags'}  
{/if}

+ Click here to show the News module page content

NEWS: Page Content
{* Read tag parameter from page URL *}
{$tag = $smarty.get.tag|default:''}

{if $tag == ''}
  <!-- Default Content -->
{else}
  <h3>Articles tagged with "{$smarty.get.tag}"</h3>
  {News summarytemplate='summary_tags'}
{/if}

A2 Webhosting CMS Made Simple


Optional extention: tagcloud

Tagcloud template

This was the tricky part. In a few steps I read all the tags, seperate them and show them only ones. Perhaps there is an easier method, but this works for me.

Create a new summary template, named i.e. "tagcloud"

CGBLOG: tagcloud
{$cleanedtaglist = ''}
{$detail_page = 'blog'} {* Change to your detailpage alias (default: blog) *}
{$globaltaglist = ''}

{* +++++ TEMPLATE +++++ *}
{* Read all tags and create one large string *}
{foreach from=$items item=entry}
  {$globaltaglist = "{$globaltaglist},{$entry->fieldsbyname.tags->value}"}
{/foreach}

{* Show available tags *}
{$tagwords = ','|explode:$globaltaglist}
<ul id="taglist">
{foreach from=$tagwords|sort_array item=tagword}
  {if ($tagword != '') && (($cleanedtaglist|strpos:$tagword) == false)}
    {$cleanedtaglist = "{$cleanedtaglist},{$tagword}"}
    <li>
      {cms_selflink page=$detail_page urlparam="&tag=$tagword" text=$tagword}
    </li>
  {/if}
{/foreach}
</ul>

<div style="clear: both;"></div>

+ Click here to show the News module template

NEWS: tagcloud
{$cleanedtaglist = ''}
{$detail_page = 'news'} {* Change to your detailpage alias (default: news) *}
{$globaltaglist = ''}

{* +++++ TEMPLATE +++++ *}
{* Read all tags and create one large string *}
{foreach from=$items item=entry}
  {$globaltaglist = "{$globaltaglist},{$entry->fields.tags->value}"}
{/foreach}

{* Show available tags *}
{$tagwords = ','|explode:$globaltaglist}
<ul id="taglist">
{foreach from=$tagwords|sort_array item=tagword}
  {if ($tagword != '') && (($cleanedtaglist|strpos:$tagword) == false)}
    {$cleanedtaglist = "{$cleanedtaglist},{$tagword}"}
    <li>
      {cms_selflink page=$detail_page urlparam="&tag=$tagword" text=$tagword}
    </li>
  {/if}
{/foreach}
</ul>

<div style="clear: both;"></div>

You can change the default detailpage alias in the top of the template.


Calculate and display the number of items

If you want to display the number of items in the tagcloud you can add inside the <li></li>

{$globaltaglist|substr_count:$tagword}

You should need to change the styling to your own wishes...

Page or Sidebar

In a seperate page or i.e. in your pages sidebar you can call the tagcloud like:

CGBLOG: Page or Sidebar Content
{CGBlog summarytemplate='tagcloud'}

or show only one or more categories

CGBLOG: Page or Sidebar Content
{CGBlog category='foo' summarytemplate='tagcloud'}

+ Click here to show the News module page content

NEWS: Page or Sidebar Content
{News summarytemplate='tagcloud'}

Note: In large websites with many articles you might consider using cache here. This is provided by Calguy's CGExtentions module. Read the module helptext for more info how to use!



  Working example

CGBlog module:

A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  24 Comments

CMS Made Simple 2.2.3.1 - Tutorials, tips and tricks - CMSMS 2.2.3.1

Add tags to the CGBlog or News module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.1
  Last updated: 04-07-2017
  Comments: 24

A2 Webhosting CMS Made Simple