Tags popular

: mod_tags_popular

Live Demo

class="tag-default"

Markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_tags_popular
 * @Author 		web-eau.net
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$minsize = $params->get('minsize', 1);
$maxsize = $params->get('maxsize', 2);

JLoader::register('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php');
?>
<div class="tags tagspopular<?php echo $moduleclass_sfx; ?> tagscloud<?php echo $moduleclass_sfx; ?>">
<?php
if (!count($list)) : ?>
	<div class="alert alert-no-items"><?php echo JText::_('MOD_TAGS_POPULAR_NO_ITEMS_FOUND'); ?></div>
<?php else :
	// Find maximum and minimum count
	$mincount = null;
	$maxcount = null;
	foreach ($list as $item)
	{
		if ($mincount === null || $mincount > $item->count)
		{
			$mincount = $item->count;
		}
		if ($maxcount === null || $maxcount < $item->count)
		{
			$maxcount = $item->count;
		}
	}
	$countdiff = $maxcount - $mincount;

	foreach ($list as $item) :
		if ($countdiff === 0) :
			$fontsize = $minsize;
		else :
			$fontsize = $minsize + (($maxsize - $minsize) / $countdiff) * ($item->count - $mincount);
		endif;
?>
		<span class="tag-default">
			<a class="tag-name" style="font-size: {{{PHP7}}}" href="/<?php echo JRoute::_(TagsHelperRoute::getTagRoute($item->tag_id . ':' . $item->alias)); ?>">
				<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?></a>
			<?php if ($display_count) : ?>
				<span class="tag-count badge badge-info"><?php echo $item->count; ?></span>
			<?php endif; ?>
		</span>
	<?php endforeach; ?>
<?php endif; ?>
</div>

CSS

.tags a{
    font-size: 15px;
    text-decoration: none;
}

.tags span{
    display: inline-block;
    margin-bottom: 5px;
}

.tags .tag-default{
   border: 1px solid #dee2e5;
   background-color: #dee2e5;
   border-radius: 5px;
   padding: 6px 15px;
   color: #a9b1b5;
   transition: all 300ms ease-in-out;
}

.tags .tag-default:hover{
     color: #fff;
     background-color: #63d3e1;
}

Live Demo

class="tag--inverse"

Markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_tags_popular
 * @Author 		web-eau.net
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$minsize = $params->get('minsize', 1);
$maxsize = $params->get('maxsize', 2);

JLoader::register('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php');
?>
<div class="tags tagspopular<?php echo $moduleclass_sfx; ?> tagscloud<?php echo $moduleclass_sfx; ?>">
<?php
if (!count($list)) : ?>
	<div class="alert alert-no-items"><?php echo JText::_('MOD_TAGS_POPULAR_NO_ITEMS_FOUND'); ?></div>
<?php else :
	// Find maximum and minimum count
	$mincount = null;
	$maxcount = null;
	foreach ($list as $item)
	{
		if ($mincount === null || $mincount > $item->count)
		{
			$mincount = $item->count;
		}
		if ($maxcount === null || $maxcount < $item->count)
		{
			$maxcount = $item->count;
		}
	}
	$countdiff = $maxcount - $mincount;

	foreach ($list as $item) :
		if ($countdiff === 0) :
			$fontsize = $minsize;
		else :
			$fontsize = $minsize + (($maxsize - $minsize) / $countdiff) * ($item->count - $mincount);
		endif;
?>
		<span class="tag--inverse">
			<a class="tag-name" style="font-size: {{{PHP7}}}" href="/<?php echo JRoute::_(TagsHelperRoute::getTagRoute($item->tag_id . ':' . $item->alias)); ?>">
				<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?></a>
			<?php if ($display_count) : ?>
				<span class="tag-count badge badge-info"><?php echo $item->count; ?></span>
			<?php endif; ?>
		</span>
	<?php endforeach; ?>
<?php endif; ?>
</div>

CSS

.tags a{
    font-size: 15px;
    text-decoration: none;
}

.tags span{
    display: inline-block;
    margin-bottom: 5px;
}

.tags .tag--inverse{
     background-color: #fbfbfb;
     border: 1px solid #a9b1b5;
     padding: 6px 15px;
     color: #a9b1b5;
     border-radius: 5px;
     transition: all 300ms ease-in-out;
}

.tags .tag--inverse:hover{
     border: 1px solid #63d3e1;
     color: #63d3e1;
}

Live Demo

class="tag-rounded"

Markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_tags_popular
 * @Author 		web-eau.net
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$minsize = $params->get('minsize', 1);
$maxsize = $params->get('maxsize', 2);

JLoader::register('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php');
?>
<div class="tags tagspopular<?php echo $moduleclass_sfx; ?> tagscloud<?php echo $moduleclass_sfx; ?>">
<?php
if (!count($list)) : ?>
	<div class="alert alert-no-items"><?php echo JText::_('MOD_TAGS_POPULAR_NO_ITEMS_FOUND'); ?></div>
<?php else :
	// Find maximum and minimum count
	$mincount = null;
	$maxcount = null;
	foreach ($list as $item)
	{
		if ($mincount === null || $mincount > $item->count)
		{
			$mincount = $item->count;
		}
		if ($maxcount === null || $maxcount < $item->count)
		{
			$maxcount = $item->count;
		}
	}
	$countdiff = $maxcount - $mincount;

	foreach ($list as $item) :
		if ($countdiff === 0) :
			$fontsize = $minsize;
		else :
			$fontsize = $minsize + (($maxsize - $minsize) / $countdiff) * ($item->count - $mincount);
		endif;
?>
		<span class="tag-rounded">
			<a class="tag-name" style="font-size: {{{PHP7}}}" href="/<?php echo JRoute::_(TagsHelperRoute::getTagRoute($item->tag_id . ':' . $item->alias)); ?>">
				<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?></a>
			<?php if ($display_count) : ?>
				<span class="tag-count badge badge-info"><?php echo $item->count; ?></span>
			<?php endif; ?>
		</span>
	<?php endforeach; ?>
<?php endif; ?>
</div>

CSS

.tags a{
    font-size: 15px;
    text-decoration: none;
}

.tags span{
    display: inline-block;
    margin-bottom: 5px;
}

.tags .tag-rounded{
     border: 1px solid #dee2e5;
     background-color: #dee2e5;
     border-radius: 25px;
     padding: 6px 15px;
     color: #a9b1b5;
     transition: all 300ms ease-in-out;
}

.tags .tag-rounded:hover{
     color: #fff;
     background-color: #63d3e1;
}

Live Demo

class="tag-rounded--inverse"

Markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_tags_popular
 * @Author 		web-eau.net
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$minsize = $params->get('minsize', 1);
$maxsize = $params->get('maxsize', 2);

JLoader::register('TagsHelperRoute', JPATH_BASE . '/components/com_tags/helpers/route.php');
?>
<div class="tags tagspopular<?php echo $moduleclass_sfx; ?> tagscloud<?php echo $moduleclass_sfx; ?>">
<?php
if (!count($list)) : ?>
	<div class="alert alert-no-items"><?php echo JText::_('MOD_TAGS_POPULAR_NO_ITEMS_FOUND'); ?></div>
<?php else :
	// Find maximum and minimum count
	$mincount = null;
	$maxcount = null;
	foreach ($list as $item)
	{
		if ($mincount === null || $mincount > $item->count)
		{
			$mincount = $item->count;
		}
		if ($maxcount === null || $maxcount < $item->count)
		{
			$maxcount = $item->count;
		}
	}
	$countdiff = $maxcount - $mincount;

	foreach ($list as $item) :
		if ($countdiff === 0) :
			$fontsize = $minsize;
		else :
			$fontsize = $minsize + (($maxsize - $minsize) / $countdiff) * ($item->count - $mincount);
		endif;
?>
		<span class="tag-rounded--inverse">
			<a class="tag-name" style="font-size: {{{PHP7}}}" href="/<?php echo JRoute::_(TagsHelperRoute::getTagRoute($item->tag_id . ':' . $item->alias)); ?>">
				<?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?></a>
			<?php if ($display_count) : ?>
				<span class="tag-count badge badge-info"><?php echo $item->count; ?></span>
			<?php endif; ?>
		</span>
	<?php endforeach; ?>
<?php endif; ?>
</div>

CSS

.tags a{
    font-size: 15px;
    text-decoration: none;
}

.tags span{
    display: inline-block;
    margin-bottom: 5px;
}

.tags .tag-rounded--inverse{
     border: 1px solid #a9b1b5;
     background-color: #fbfbfb;
     border-radius: 25px;
     padding: 6px 15px;
     color: #a9b1b5;
     transition: all 300ms ease-in-out;
}

.tags .tag-rounded--inverse:hover{
     border: 1px solid #63d3e1;
     color: #63d3e1;
}
 

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.