Styling K2 Tags Cloud With Bootstrap

  • Comments:View comments

Take K2 tag cloud to the next styling level with the help of Bootstrap and a little PHP magic. Best of all, this tutorial utilizes template overriding, so you do not have to worry it being replaced when updating your Joomla! or K2 installation.

This is how it looks after applying this tutorial. Each tag is highlighted in a different color according to he number of items it's linked to (Red = most number of item links, Green = medium, Blue = lowest)

Step 1 - Create a template override folder for the K2 Tools module, using an FTP tool like Filezilla for example.

The template override folder must have the name 'mod_k2_tools' and be created inside the following folder: templates/YourTemplateFolder/html (note: YourTemplateFolder is the name of your active template folder)

Step 2 - Copy the file modules/mod_k2_tools/tmpl/tags.php and paste into: templates/YourTemplateFolder/html/mod_k2_tools

Step 3 - Open the templates/YourTemplateFolder/html/mod_k2_tools/tags.php in your favorite code editor program.

Step 4 - Find the following code block:

?>

<div id="k2ModuleBox<?php echo $module->id; ?>" class="k2TagCloudBlock<?php if($params->get('moduleclass_sfx')) echo ' '.$params->get('moduleclass_sfx'); ?>">
	<?php foreach ($tags as $tag): ?>
	<?php if(!empty($tag->tag)): ?>
	<a href="/<?php echo $tag->link; ?>" style="font-size:<?php echo $tag->size; ?>%" title="<?php echo $tag->count.' '.JText::_('K2_ITEMS_TAGGED_WITH').' '.K2HelperUtilities::cleanHtml($tag->tag); ?>">
		<?php echo $tag->tag; ?>
	</a>
	<?php endif; ?>
	<?php endforeach; ?>
	<div class="clr"></div>
</div>

Step 5 - Replace the code with the following code:

$max_size = $params->get('max_size');
$min_size = $params->get('min_size');
$center = ceil(($max_size + $min_size) / 2);

?>

<div id="k2ModuleBox<?php echo $module->id; ?>" class="k2TagCloudBlock<?php if($params->get('moduleclass_sfx')) echo ' '.$params->get('moduleclass_sfx'); ?>">
	<?php foreach ($tags as $tag): ?>
	<?php if(!empty($tag->tag)): ?>
	<?php
		if($tag->size > $center){
			$label = "label label-important";
			$badge = "badge";
		} else if($tag->size < $center){
			$label = "label label-info";
			$badge = "badge";
		} else {
			$label = "label label-success";
			$badge = "badge";
		}  
	?>
	<a href="/<?php echo $tag->link; ?>" title="<?php echo $tag->count.' '.JText::_('K2_ITEMS_TAGGED_WITH').' '.K2HelperUtilities::cleanHtml($tag->tag); ?>">
		<span class="<?php echo $label; ?>">
			<?php echo $tag->tag; ?> <span class="<?php echo $badge; ?>"><?php echo $tag->count; ?></span>
		</span>
	</a>
	<?php endif; ?>
	<?php endforeach; ?>
	<div class="clr"></div>
</div>

Save the file - you're all done!

Take a look at the page(s) that feature your shiny new K2 tags cloud.

If you have any questions or suggestions, feel free to comment on this post, or contact me directly via email or social media (on the above right corner of this page).

Read 2465 times
Mohamed Abdelaziz

Joomla and PHP developer since 2006, working as freelancer to develop and customize Joomla extensions. Technically reviewed the books: Joomla! 2.5 Beginner's Guide and Joomla! 3 Beginner's Guide for Packt Publishing.

More in this category: « How to remove '#' from K2 tags
Web Hosting

Tutorials & Demos

Joomla Extensions

Chained Fields for K2
Chained Fields for K2 It is a package to enable creating chained fields in…
Read more...
Multiple Extra Fields Groups (MEFG) for K2
Multiple Extra Fields Groups (MEFG) for K2 This is a very useful K2 plugin, which enables administrators…
Read more...
AutoMeta for K2
AutoMeta for K2 AutoMeta for K2 is a plugin to automatically generate meta…
Read more...
Categories Treeview for K2
Categories Treeview for K2 This Joomla! module is used to display K2 categories in…
Read more...
Categories Tree Menu for Virtuemart
Categories Tree Menu for Virtuemart This Joomla! module is used to display Virtuemart categories in…
Read more...
Datasets for K2
Datasets for K2 A k2 plugin that will allow an admin to choose…
Read more...
Extensions