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

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

Теги

Авторы блога