A tag cloud ordered by weight for Drupal using Views and Taxonomy

Submitted by Nicola Rainiero on 2015-07-12

Last week I changed my default view for cloud tag with a new one that orders the taxonomy terms based on their weight. In other words, I sort them not into alphabetical order but into how many times a tag has been used in my articles. I post the code for the new View and the new style properties for the CSS of the default theme used in Drupal.

In the past I used the tag cloud described in the article: Tag cloud in Drupal with Views & Taxonomy, where the taxonomy terms have an ascending alphabetical order and the record count inserted between parentheses. A discrete solution that shows all the list including the ones that have a little weight, sometimes I excluded manually from the Views setting (loosing the count number of the other related to them).

Instead the second version orders the terms in function of their weight fixing a maximum number of terms to show. A sort of popular topic views that display the first 60 terms I used more frequently in my site, a top 60 tags list!

A tag cloud ordered by weight for Drupal using Views and Taxonomy

The creation of this View/Block in Drupal consists in two step: the view settings and the CSS style to justify the list of terms, as described in the two section below. Of course at the end you have to enable it in the Block panel (../admin/structure/block).

Block settings in Views

I followed the tutorial posted here: HOW TO USE VIEWS AGGREGATOR TO CREATE TAXONOMY TERM COUNT BLOCK?, and I have created the following block:

The weighted tag cloud without any CSS

Here is the code to paste in your Views panel (../admin/structure/views):

$view = new view();
$view->name = 'popular_tags';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'taxonomy_term_data';
$view->human_name = 'Popular Tags';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['title'] = 'Popular Tags';
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['group_by'] = TRUE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'some';
$handler->display->display_options['pager']['options']['items_per_page'] = '60';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['style_plugin'] = 'list';
$handler->display->display_options['style_options']['wrapper_class'] = 'inlineTags';
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['row_options']['inline'] = array(
  'name' => 'name',
  'name_1' => 'name_1',
/* Relationship: Taxonomy term: Content using Tag */
$handler->display->display_options['relationships']['reverse_field_tags_node']['id'] = 'reverse_field_tags_node';
$handler->display->display_options['relationships']['reverse_field_tags_node']['table'] = 'taxonomy_term_data';
$handler->display->display_options['relationships']['reverse_field_tags_node']['field'] = 'reverse_field_tags_node';
$handler->display->display_options['relationships']['reverse_field_tags_node']['required'] = TRUE;
/* Field: Taxonomy term: Name */
$handler->display->display_options['fields']['name']['id'] = 'name';
$handler->display->display_options['fields']['name']['table'] = 'taxonomy_term_data';
$handler->display->display_options['fields']['name']['field'] = 'name';
$handler->display->display_options['fields']['name']['label'] = '';
$handler->display->display_options['fields']['name']['alter']['word_boundary'] = FALSE;
$handler->display->display_options['fields']['name']['alter']['ellipsis'] = FALSE;
$handler->display->display_options['fields']['name']['link_to_taxonomy'] = TRUE;
/* Field: COUNT(Taxonomy term: Name) */
$handler->display->display_options['fields']['name_1']['id'] = 'name_1';
$handler->display->display_options['fields']['name_1']['table'] = 'taxonomy_term_data';
$handler->display->display_options['fields']['name_1']['field'] = 'name';
$handler->display->display_options['fields']['name_1']['group_type'] = 'count';
$handler->display->display_options['fields']['name_1']['label'] = '';
$handler->display->display_options['fields']['name_1']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['name_1']['prefix'] = '(';
$handler->display->display_options['fields']['name_1']['suffix'] = ')';
/* Sort criterion: COUNT(Taxonomy term: Name) */
$handler->display->display_options['sorts']['name']['id'] = 'name';
$handler->display->display_options['sorts']['name']['table'] = 'taxonomy_term_data';
$handler->display->display_options['sorts']['name']['field'] = 'name';
$handler->display->display_options['sorts']['name']['group_type'] = 'count';
$handler->display->display_options['sorts']['name']['order'] = 'DESC';
/* Filter criterion: Content: Language */
$handler->display->display_options['filters']['language']['id'] = 'language';
$handler->display->display_options['filters']['language']['table'] = 'node';
$handler->display->display_options['filters']['language']['field'] = 'language';
$handler->display->display_options['filters']['language']['relationship'] = 'reverse_field_tags_node';
$handler->display->display_options['filters']['language']['value'] = array(
  'und' => 'und',

/* Display: Block */
$handler = $view->new_display('block', 'Block', 'block');
$translatables['popular_tags'] = array(
  t('Popular Tags'),
  t('Sort by'),

As you can see in the code above I have provided a class for the list (inlineTags). If you want to change it, go here after creating the block:

How to change manually the class name   

CSS code for the list

Now it is necessary to justify the taxonomy terms and in this case I have found an interesting article in Stack Overflow: How do I justify a horizontal list?. So I created a new CSS selectors and I added in my default theme (../../sites/all/themes/YOUR_DEFAULT_THEME/css/style.css), here is the code:

/* ------- NEW TAG CLOUD ----- */
.inlineTags ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;

.inlineTags ul:after {
    content: "";
    width: 100%;
    display: inline-block;

.inlineTags li {
    display: inline;
/* ------- NEW TAG CLOUD ----- */

And this is the resulting Views block:

The weighted tag cloud with CSS

Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.