Display several links as cloud

My client wants me to create a page with a bunch of external links displayed as a cloud. He wants to have the ability to add external links and edit font size and it's color.

This cloud must be located in the center of the page and grow from the center. I thought it would be easy to create with Wordpress, but actually it is not. I agree to use any CMS, but cannot find any ready solution of this kind.

Just found this one: http://www.goat1000.com/tagcanvas-weighted.php. It is similar to what I want, but it has no CMS backend.

I am sorry for being stupid, but maybe someone will understand what I want and help me with where I can find it.

Ma开发者_运维百科ybe it is not hard to create from scratch? And store all links in a text or html file. I really did my homework, but only found a lot of tag cloud plugins for all CMS engines in the world.

UPD. I found ready solution! But it doesn't work perfectly. For example I cannot understand why changing colors doesn't work. Here it is:

    <?

      $array = array (
    0 => array ('link' => 'http://123.com', 'name' => 'qq', 'cnt' => 100)
  , 1 => array ('link' => 'http://123.com', 'name' => 'ww', 'cnt' => 2)
  , 2 => array ('link' => 'http://123.com', 'name' => 'ee', 'cnt' => 3)
  , 3 => array ('link' => 'http://123.com', 'name' => 'rr', 'cnt' => 61)
  , 4 => array ('link' => 'http://123.com', 'name' => 'tt', 'cnt' => 5)
  , 5 => array ('link' => 'http://123.com', 'name' => 'yy', 'cnt' => 60)
  , 6 => array ('link' => 'http://123.com', 'name' => 'uu', 'cnt' => 7)
  , 7 => array ('link' => 'http://123.com', 'name' => 'ii', 'cnt' => 8)
  , 8 => array ('link' => 'http://123.com', 'name' => 'iii', 'cnt' => 9)
  , 9 => array ('link' => 'http://123.com', 'name' => 'oo', 'cnt' => 10)
  , 10 => array ('link' => 'http://123.com', 'name' => 'pp', 'cnt' => 11)
  , 11 => array ('link' => 'http://123.com', 'name' => 'aa', 'cnt' => 12)
  , 12 => array ('link' => 'http://123.com', 'name' => 'ss', 'cnt' => 10)
  , 13 => array ('link' => 'http://123.com', 'name' => 'dd', 'cnt' => 11)
  , 14 => array ('link' => 'http://123.com', 'name' => 'ff', 'cnt' => 12)
  , 15 => array ('link' => 'http://123.com', 'name' => 'gg', 'cnt' => 10)
  );

  echo '<div style="font-family:arial; font-size: 10px; width: 300px; text-align: center; position: absolute;
    top: 100px;    left: 50%;    margin-left: -150px;">';
  $params['min_size'] = 100;                    
  $params['max_size'] = 1000;                    
  $params['colors'] = array(0 => 'red', 1 => 'blue', 2 => 'brown', 3 => 'pink', 4 => 'green');
  ntts_cloud_ShowCloud($array, $params);
  echo '</div>';


 function ntts_cloud_FlipArray($array)
    {
      $rows = array_keys($array);
      $first_row_key = $rows[0];
      $cols = array_keys($array[$first_row_key]);

      $rows_cnt = count($rows);
      $cols_cnt = count($cols);

      for($i = 0; $i < $rows_cnt; $i++)
      {
        for($j = 0; $j < $cols_cnt; $j++)
        {
          $result[$cols[$j]][$rows[$i]] = $array[$rows[$i]][$cols[$j]];
        }
      }
      return $result;    
    }


function ntts_cloud_ShowCloud($entries, $config = 0)
    {
      //$entries is array of cloud elements
      //each element should be present as associative array with follows keys 
      //'name' - name of the element
      //'link' - URL
      //'cnt'  - weight of the element


      $colors = array(
      0 => '73cf3b', 
      1 => '000', 
      2 => '000', 
      3 => '000',
      4 => '000', 
      5 => 'red', 
      6 => '000', 
      7 => '000',
      8 => '000', 
      9 => '000', 
      10 => '000', 
      11 => '000',
      12 => '000', 
      13 => '000', 
      14 => '000', 
      15 => '000');                  
      //font size in percent
      $min_size = (isset($config['min_size'])) ? $config['min_size'] : 100;
      $max_size = (isset($config['max_size'])) ? $config['max_size'] : 200;

      if(is_array($config))
      {
        if(isset($config['colors']) && is_array($config['colors']))
        {
          $colors = $config['colors'];
        }
      }


      $flipped = ntts_cloud_FlipArray($entries);
      $min        = min($flipped['cnt']);
      $max        = max($flipped['cnt']);
      array_multisort($flipped['cnt'], SORT_DESC, $flipped['name'], $flipped['link']);
      $entries = ntts_cloud_FlipArray($flipped);

      $shown_entries = array();
      $keys          = array();
      $cnt = count($entries);

      $limit = (isset($config['limit'])) ? min($config['limit'], $cnt) : $cnt;

      for($i = 0; $i < $limit; $i++)
      {
        $entries[$i]['cnt'] -= $min;
        if($max > $min)
        {
          $entries[$i]['cnt'] /= ($max - $min);
        }      
        $entries[$i]['cnt'] *= ($max_size - $min_size);
        $entries[$i]['cnt'] += $min_size;
        $entries[$i]['cnt']  = round($entries[$i]['cnt']);
        $key = md5($entries[$i]['name']);
        $shown_entries[$key] = $entries[$i];
        $keys[$i] = $key;
        //проверка корректности url на наличие префикса http://
        if(!preg_match('/^http:/i', $entries[$i]['link'])) 
        {
          $shown_entries[$key]['link'] = 'http://'.$entries[$i]['link'];
        }
      }


      sort($keys);
      $cnt = count($keys);
      $colors_cnt = count($colors);
      for($i = 0; $i < $cnt; $i++)
      {
        $key = $keys[$i];
        $idx = hexdec($key[31]) % $colors_cnt;
        $color = $colors[$idx];
        echo '<nobr><a href='.$shown_entries[$key]['link']
          .' style="font-size:'.$shown_entries[$key]['cnt'].'%; '
          .' text-decoration:none; color: #'.$color.';'
          .'">'.$shown_entries[$key]['name'].'</a></nobr> ' ;
      }

    }



 ?>

---

I think you may find one which meets your requirements here: smashingmagazine.com

Caution for your boss: the more colors are used, the more irritating tag clouds are.