Наверное, многие видели на различных блогах, построенных на системе WordPress, красивую реализацию облака тегов в виде сферы из этих тегов. Одним прекрасным днем её увидел кто-то из клиентов и попросил установить "такую вот штуку" себе в блог. Система у клиента, как вы уже поняли, UMI.CMS, с которой я работаю уже больше года. Решение было написано в тот же день в перерыве между основными задачами.
Для установки нам потребуется дописать один макрос и скопировать 2 файла. Итак, начнем.
Первое, что мне предстояло, это немного изменить стандартную функцию вывода тегов и написать собственный кастомный шаблон. Скажу сразу, что клиенту нужно было показывать теги "по использованию", поэтому данная реализация выводит теги "по использованию". Ниже привожу код получившейся функции, который необходимо добавить в файл /classes/modules/custom.php
public function getSmartTags($width = 600,
$height = 500,
$trans = false,
$text_color = "333333",
$bgcolor = "ffffff",
$i_domain_id = NULL,
$limit = 30,
$link = '/blogs20/postsByTag/',
$max_font_size = 32,
$min_font_size = 10)
{
$o_object_type = umiObjectTypesCollection::getInstance()->getType(3);
$i_tags_field_id = $o_object_type->getFieldId('tags');
$result = umiObjectProperty::objectsByValue($i_tags_field_id, 'all',
true, true,
($i_domain_id ? $i_domain_id : -1));
if(isset($result['values']) && is_array($result['values'])) {
natsort2d($result['values'], "cnt");
$result['values'] = array_slice($result['values'], -$limit, $limit);
natsort2d($result['values'], "value");
}
$max = intval($result['max']);
$sum = intval($result['sum']);
$s_values_label = 'values';
$s_value_label = 'value';
$s_value_cnt = 'cnt';
$arrTags = array();
$sz = sizeof($result[$s_values_label]);
for ($i = 0; $i < $sz; $i++) {
$label = $result[$s_values_label][$i];
$tag = $label[$s_value_label];
if (is_null($tag)) continue;
$cnt = intval($label[$s_value_cnt]);
$font_size = (($max_font_size - $min_font_size)/100) * round($cnt * 100 / $sum, 1);
$font_size = round($font_size + $min_font_size);
$arrTags[$tag] = $font_size;
}
if (count($arrTags)) {
$tags = "<tags>";
foreach ($arrTags as $sTag => $arrTagStat) {
$rue_tag = rawurlencode($sTag);
$tags .= "<a href='{$link}{$rue_tag}/' rel=\"tag\"
style='font-size: {$arrTagStat}px;'>{$sTag}</a>\r\n";
}
$tags .= "</tags>";
$tags = urlencode($tags);
$template = '
<div id="umi-smart-tags"></div>
<script src="/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var rnumber = Math.floor(Math.random()*9999999);
var so = new SWFObject("/images/tagcloud.swf?r="+rnumber,
"tagcloudflash",
"",
"",
"9",
"#");
so.addParam("allowScriptAccess", "always");
so.addVariable("tcolor", "0x");
so.addVariable("tspeed", "100");
so.addVariable("distr", "true");
so.addVariable("mode", "tags");
so.addVariable("tagcloud", "облако тегов, технологии, кастомы, партнеры");
so.write("umi-smart-tags");
</script>
';
$template = str_replace("%tags%", $tags, $template);
$template = str_replace("%width%", $width, $template);
$template = str_replace("%height%", $height, $template);
$template = str_replace("%color%", $bgcolor, $template);
$template = str_replace("%text_color%", $text_color, $template);
if ($trans) {
$template = str_replace("%transparent%", 'so.addParam("wmode", "transparent");', $template);
}else{
$template = str_replace("%transparent%", '', $template);
}
return $template;
} else {
return '';
}
}
Далее остаётся всего лишь закинуть два файлика: этот (swfobject.js) в папку /js и этот (tagcloud.swf) в папку /images.
Всё самое сложное (если это так можно назвать) позади. Далее остаётся прописать в нужное место макрос. Ниже я поясню, какие параметры "кушает" макрос, но хочу сразу оговориться, что все вышепроделанное служит для упрощения вставки облака, все это можно сделать грамотно, применив шаблонность UMI :) Итак, пояснения к макросу:
% custom getSmartTags(width, height, tranparent, text_color, bg_color, domain_id, limit, link, max, min) %
Этот пост лишь краткая инструкция, следующий мой пост подробно расскажет как сделать вот такую "систему стикеров" используя технологию AJAX и UMI.CMS
Комментирование доступно только авторизованным пользователям.
Пожалуйста, зарегистрируйтесь или войдите на сайт.
еще раз посмотрю может где проглядел
если развлекательный сайт - то живое облако наверное хорошо, но для бизнес-сайта это уже подходит хуже... в то время как этот не очень сложный flash-товаров для интернет магазина очень эффективен
http://yurgaforum.ru/apple/
Завтра напишу как сделать.
в IE7 и IE8 не подгружается, почему-то не передает ширину swf'ке, решил пока по быстрому изменив переменную width в js файле на константу.
Так как у меня теги берутся с сайта а не из блогов пришлось приравнять $link = 'content/pagesByDomainTags/'... может кому полезно будет)
"Не используйте этот метод, его поведение будет изменено в ближайших версиях". Получается, реализованный пример может перестать работать?