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 3149 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