Tag clouds for search result pages


Infradox XS 26

Related articles

Infradox XS version 26


Using custom CSS

Infradox XS URL's explained

Keyword suggestions

Extracting unique words for suggestions and tag lists


This article describes how you can display so called tag clouds or tag lists on your search results pages. Tag clouds (or lists) display relevant words (keywords, tags, terms) that can help end users refine their search results by simply clicking on a word. Tag lists can also be configured to start a new search as opposed to refining results.  
Further more, tag lists are part of the page HTML as normal links (href elements) that search engines can follow. As such this function may also benefit your SEO. 

What's the source of the words that this function uses?

By default, the Infradox system extracts unique words from the keywords field. The extracted words are stored in a separate database table with references to the files in which the word occurs. This words table is also the source for keyword suggestions (that appear as the user starts typing in the search boxes), and it's also the source for the Tag cloud and Tag list functions. Note that you can however choose to display suggestions from other sources without affecting the tag list function described in this article. And that you can configure data processing rules to change from which fields words are extracted. This is described in the article Extracting unique words for suggestions and tag lists.

As references to files in which a tag occurs are stored, it is possible to determine the relative "weight" of a tag. E.g. if the word Portrait occurs in 200 of the found files, and the word Studio occurs in 40 of the same files, then the relevance or weight of the tag Portrait is greater than that of Studio  The weight of tags is used to determine how and which of the matching tags are dis

played in the tag lists and clouds.  


To enable this function, go to Site configuration, Search settings and the open the Tag lists section by clicking Show options.  

Words that occur in the found files are displayed, either at the bottom of the page - underneath the thumbnails  - or at the bottom of the advanced search panel. Choose either option in the dropdown box to enable the function on your search pages.

Enter a title that you want to display above the tag list or leave the input box blank if you don't want to display a title. If you have configured the tags to refine the current search, then the title can be e.g. Refine your search. You can also configure this function so that clicking a word will start a new search as opposed to searching within the results. You should then adjust the title accordingly.

Select a value for the Minimum occurrence option to limit the listed keywords to only those keywords that appear in at least x of the found files.

You can limit the number of keywords that are displayed if you have many keywords. If you choose a maximum value (any option other than Show all) the words that occur least (are attached to the fewest number of files in the results) are removed from the list.

Refining or starting new searches

If you want to start a new search when a tag is clicked, then select New search in the Search dropdown box. The default option is Refine search, clicking a tag will search within the current search results.

Different URL's are used to search or refine depending on the type of list. More information can be found in the article explaining Infradox XS URL's.

Display options

There are currently 4 different main display styles that you can choose from, i.e. List, Checkbox list, Elliptic tag cloud and List item tag cloud. These styles are explained below.

  • List alphabetically (1)
    This generates a standard list of keywords in alphabetical order. If you limit the number of words to display then the least relevant keywords may not be displayed - based on the weight of the keyword as described above.
  • List, most occurrences first
    As above, but keywords that occur in more files appear at the top of the list, keywords that occur in fewer files appear last. 
  • Checkbox list, alphabetically (2)
    This is the same as the first option, but checkboxes are displayed in front of each keyword. Users can select multiple keywords and click the Go button to start a new search (or refine their current search) with all the selected keywords.
  • Checkbox list, most occurrences first
    As above but words with more relevance are displayed first.
  • Elliptic tag cloud (3)
    This option retrieves the words as a JSON array and draws an elliptic keyword cloud using script. The most relevant words are displayed bigger and/or using a different color. The least relevant words appear at the outer edge of the cloud as small words. If you use this option then it's recommended that you limit the number of keywords to display by selecting a higher number for Minimum occurrences and a lower number for Maximum number of words.
  • List item tag cloud (4)
    This option is also used to display a tag cloud but the keywords are part of the HTML as normal links inside list items. This is faster than the Elliptic tag cloud option as it requires no script to calculate and render the HTML. Each keyword has a class based on its weight (relevance) and you can change the CSS to make more relevant words appear larger.

Multiple lists 

Depending on your version of XS, you can add additional lists, e.g. the suppliers / contributors names. You can choose to add tags from additional lists to the primary list or you can create separate lists. If you choose the latter, then one list is displayed at a time and a drop down box is displayed above the tag list. The dropdown allows the user to switch between lists, e.g. between keywords and suppliers. 

The labels that you can enter for each of your lists will used in the dropdown box. E.g. you can use Keywords, Tags or Terms or anything you like. Use commas to separate locales. E.g. Keywords,Trefwoorden or Photographers,Fotografen.

You can use the following lists (either as separate or as combined lists): 

  • Keywords (data processing rule 1) 
  • Suppliers / Contributors
  • Words extracted by data processing rule number 3
  • Words extracted by data processing rule number 4
  • Words extracted by data processing rule number 5

Read the article about Data processing rules to extract unique words for further information.


Boolean searches when using Checkbox lists

If you use either of the Checkbox list options, users can select one or more tags to either refine their search or to start a new search. You can choose to use AND to start a search that uses all of the selected tags. This means that all of the selected tags must exist in the files. Alternatively you can choose to use OR. In this case files are found that have any of the selected tags.

More display options

To add the number of files in which the tag occurs, select the Add occurrence count to keywords option. The count will appear between brackets after each term, for instance Portrait (391). Note that the number reflects the found files in which the word appears, not the total number of files.

Changing how the keywords appear on the page

You can change how keywords are displayed by changing the CSS with the Code editor. Every keyword is displayed as a link (href item) inside an unordered list (ul and li). Different classes are used depending on where you display the tag list and on what display option you have configured. Use your browser's Inspect element function to find the elements and classes used after you have configured this function. Then change the CSS as required.  

Frequently asked questions 

  • Can I change the case in which tags are displayed?
    Add the CSS rule text-transformation. Text-transformation supports uppercase, lowercase and capitalize. The element that you need to create CSS for depends on the settings that you have chosen. Use an element inspector to find out which elements are used.
  • I'm using the List item tag cloud inside the advanced search box, can I list tags on their own line as opposed to next to each other?
    Add the following to your CSS: #taglist li {float:none}
  • I want to display keyword suggestions (when a user types into a search box) from a fixed list that I've uploaded. Can I still use the extracted words for the tag list/cloud function?
Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk