16.06.2009 | 11:43

Наверное, многие видели на различных блогах, построенных на системе 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) %

width — ширина блока (обязательный, число);
height — высота блока (обязательный, число);
tranparent — флаг прозрачности (необязательный, по умолчанию - выключен (0), принимает 1 или 0);
text_color — цвет текста в шестнадцатиричном коде (необязательный, по умолчанию 333333);
bg_color — цвет фона облака с тегами в шестнадцатиричном коде, (необязательный, по умолчанию - белый ffffff, не имеет значения при включенном флаге прозрачности, но должен оставаться валидным);
domain_id — id домена (необязательный, по умолчанию -1 (минус один, т.е. все домены));
limit — ограничение на вывод тегов (необязательный, число, по умолчанию 30);
link — префикс ссылки (необязательный, по умолчанию "/blogs20/postByTag/")
max — максимальный размер шрифта в пикселях (необязательный, число, по умолчанию 32);
min — минимальный размер шрифта в пикселях (необязательный, число, по умолчанию 10); 

 

Этот пост лишь краткая инструкция, следующий мой пост подробно расскажет как сделать вот такую "систему стикеров" используя технологию AJAX и UMI.CMS

Читайте также:

Категории

Теги

xslt технологии документация шаблоны Служба Заботы партнеры мероприятия маркетинг веб студии москва UMI UMISummit события umisummit лицензии новинки UMI Edu UMI Cloud продукты UMI модуль Кейсы маркетинг обзоры business облако тегов кастомы uwdc Челябинск разработчики конференция Конкурс UMIRU exchange 28 Обмен данными 1C Интеграция с 1С версии UMICMS хостинг юмихост umihost UMICMS рейтинг MySQL разделение баз данных developer программинг менеджмент Алексей Самойлов Сергей Котырев KINETICA CMS Сибирская интернетнеделя видео UMIWorkshop интернетмагазин интернет-магазин интернет магазин интернет-маркетинг flash actionscript каталог анимация техподдержка tpl local scope macro кейсы итоги года SAPE seo мероприятие рынок веб разработки экономика Золотой сайт umi_workshop акция стратегия партнерская_программа партнерство highload РуПромо Машков версия 2_7 кэширование скорость стихи день рождения статьи пресс конференция версия 2_5 Edit_in_Place онлайн платежи кризис достижения CeBIT внедрения umi cms блоги верстка релиз EditInPlace изучение Юми создание модуля модули ReMIX UMI_CMS_Net iPhone XML драйвер как убрать лампочку форма обратной связи языковые версии CMS Pistols музыка UMICMS 28 удобство юзабилити usability user experience интерфейсы CMS Eye tracking ай тракинг usability test UXRussia управление сайтом RIW Russian internet week Softool выставки интернет клиенты сайты umisound cms pistols РИФ 2011 Tagline качество 2012 UMISound Полюса Илья Разин Марат Машков

Авторы блога