Как сделать простое облако тегов

Рассмотрим способ создания облака тегов из 30 тегов с наибольшим рейтингом, упорядоченных по алфавиту.
Предположим, что таблица тегов содержит поля "тег" (tag) и "рейтинг" (rating). Следующий запрос извлечет 30 тегов с наибольшим рейтингом и отсортирует их по алфавиту:
 
SELECT * FROM
(
    SELECT * FROM
    `table_with_tags` AS `t1`
    ORDER BY `t1`.`rating` DESC
    LIMIT 0, 30
) AS `t2`
ORDER BY `t2`.`tag` ASC

Предположим, что полученные данные будут находиться в массиве $data. Найдем максимальное значение рейтинга в массиве $data для определения высоты шрифта для каждого тега:
 
$max = $data[0]['rating'];
for($i = 0; $i < count($data); $i++)
{
    if($max < $data[$i]['rating'])
    $max = $data[$i]['rating'];
}

Далее, поделим рейтинг каждого элемента массива на максимальное значение рейтинга и округлим его до одного знака после запятой с помощью функции round(). Если полученное значение умножить на 100, узнаем, сколько процентов рейтинг данного элемента массива (тега) составляет от максимального рейтинга. Это для примера. Мы же возьмем значение, полученное от функции round() и прибавим к нему некое начальное значение высоты шрифта тега.
Для примера, пусть высота шрифта измеряется в "em" (единица измерения в CSS), тогда максимальная высота будет равняться 0.8 + 1 (1 потому, что максимальный рейтинг делится сам на себя), а минимальный: 0.8 + 0 (округленное значение частного от деления минимального элемента на максимальный).
Далее, полученную высоту шрифта заносим в элемент 'size' массива $data.
 
for($i = 0; $i < count($data); $i++)
{
    $pr = round($data[$i]['rating'] / $max, 1);
    $data[$i]['size'] = 0.8 + $pr;
}

Все, теперь в массиве $data для каждого тега содержится размер шрифта.
Вывод на экран полученного массива можно организовать следующим образом (с использованием Smarty):
 
<table>
<tr><td>
{section name=i loop=$data}
<span><a href="index.php?tag={$data[i].tag|urlencode}" style="font-size:{$data[i].size}em; vertical-align:bottom;">{$data[i].tag}</a>&nbsp;</span>
{/section}
</td></tr>
</table>


Добавить комментарий

Логин:
Пароль:
Проверочное число: