March 5, 2011 at 14:29XSLT Tag Cloud
Not so long ago I was faced with the need to implement on one of the projects what is popularly called the "tag cloud" - a set of links in which the most "weighty" elements have a larger size. For this, it would be possible, of course, to calculate and get all the necessary data in PHP, on which the project works, but I wanted to make the final version of the display on XSLT and CSS, so that all the necessary values for configuring the maximum / minimum font sizes, for example, were given in the view, not in the application logic.
Perhaps someone will find my experience useful, so I am publishing the final solution here.
So, at the input, we have the simplest XML with a tag and the number of references: now let's do the conversion: To the variables $ minfont and
$ maxfont sets the font size of the tag in pixels. The rest of the calculations are necessary in order to understand how many pixels you need to add to $ minfont depending on the size of the "weight" of a tag. You can transfer this from variables to the template parameters, and then in different places on the site you can specify different values of the maximum and minimum font sizes when calling the template, for a more harmonious display.
As a result of the calculations, the values change quite smoothly, and tags with slight differences in weight with a small range from $ minfont to $ maxfont will have the same size.
As a result of the above conversion, we get the following HTML:
And it looks like this:
In this way, a tag cloud can also be generated using client-side XSLT transformations.
Constructive criticism is welcome. I will be glad if it is useful not only to me. :)
Perhaps someone will find my experience useful, so I am publishing the final solution here.
So, at the input, we have the simplest XML with a tag and the number of references: now let's do the conversion: To the variables $ minfont and
биология
2
|
русский язык
20
|
алгебра
13
|
география
2
|
физкультура
20
|
астрономия
1
|
правоведение
7
|
история
14
|
* This source code was highlighted with Source Code Highlighter.
100
26
11
* This source code was highlighted with Source Code Highlighter.
$ maxfont sets the font size of the tag in pixels. The rest of the calculations are necessary in order to understand how many pixels you need to add to $ minfont depending on the size of the "weight" of a tag. You can transfer this from variables to the template parameters, and then in different places on the site you can specify different values of the maximum and minimum font sizes when calling the template, for a more harmonious display.
As a result of the calculations, the values change quite smoothly, and tags with slight differences in weight with a small range from $ minfont to $ maxfont will have the same size.
As a result of the above conversion, we get the following HTML:
* This source code was highlighted with Source Code Highlighter.
And it looks like this:
In this way, a tag cloud can also be generated using client-side XSLT transformations.
Constructive criticism is welcome. I will be glad if it is useful not only to me. :)