MENU

Add tags to the CGBlog or News module

  Previous article Next article  

In this tutorial I will show you a simple method (using Smarty) to add a tagging feature to the CGBlog, News and other modules in 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 Admin page, 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 separated 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 tag lists alphabetically 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>



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 detail page 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 detail page 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}

Optional extention: tagcloud

Tagcloud template

This was the tricky part. In a few steps I read all the tags, separate 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 detail page 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 separate 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 help text for more info how to use!



  Working example

CGBlog module:

Buy Me A Coffee


  Show related articles:


  Comment Form

ReviewManager

Click here to open the form 

ReviewManager

  25 Comments

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Add tags to the CGBlog or News module

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.9.1
  Last updated: 10-06-2019
  Comments: 25
  http://cms.ms/ERfZ


Buy Me A Coffee




Advertisement


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!