vBulletin CMS Widgets - Animated Flash Tags Widget , Flash Tag Cloud

Flash Tag Cloud

Released 6/3/2010
By Vikas - http://www.ngcoders.com
Demo - http://www.roboticsindia.com , Look at left sidebar

Installation

• Goto Admincp->vBullietin CMS->Widgets->Create New Widget
• Choose PHP Direct Execution as Widget's Type
• Place a Title. eg Upcoming Events. Keep it short as this is what will appear as title on your pages.
• Click Save
• Click Configure on the right of the new created widget.
• Remove the default code that appears. Be sure to not leave behind even a single letter.
• Copy and Paste the code that you can find below.
• Leave the template name as is (vbcms_widget_execphp_page)
• Click Save
• Goto Admincp->vBullietin CMS->Layout Manager
• Click Go on the Default Layout
• Add the Widget to your Layout
• Click Save
• Download the attached tagcloud.zip and extract it.
• Upload tagcloud.swf to root directory of your vbulletin install
• That's all !!

PHP Code

PHP Code:


$flashWidth  = 330;
$flashHeight = 330;
$flashPath = 'tagcloud.swf';
$flashBackgroundColor = 'ffffff';
$tagCount = 30;
$tagMaxSize = 16;
$tagMinSize = 8;

// Colors are in hex
$data['tcolor'] = '0x000000';
$data['tcolor2'] = '0x336699';
$data['hicolor'] = '0x000000';
$data['speed'] = 100;
$data['distr'] = 'true';
$data['mode'] = 'tags';

$contentTypes = array(2=>'tags.php?tag=',15=>'blog.php?tag=');

/* No Editing Below This Line*/

global $vbulletin;

// %d

$query = sprintf("SELECT Tag.tagid, Tag.tagtext, TagContent.contenttypeid, COUNT( TagContent.tagid ) AS count FROM ".TABLE_PREFIX."tag AS Tag LEFT JOIN ".TABLE_PREFIX."tagcontent AS TagContent ON ( Tag.tagid = TagContent.tagid ) GROUP BY TagContent.tagid ORDER BY count DESC LIMIT %d",$tagCount);

$qtags = vB::$db->query_read($query);

while($tag = vB::$db->fetch_array($qtags)) {
    $tags[] = $tag;
    $tagSize[$tag['tagtext']] = $tag['count'];
}

// largest and smallest array values
$maxQty = max(array_values($tagSize));
$minQty = min(array_values($tagSize));

$spread = $maxQty - $minQty;
if ($spread == 0) {
        $spread = 1;
}

$step = ($tagMaxSize - $tagMinSize) / ($spread);

// make the tag cloud
$tagsHTML  = "";
foreach ($tags as $tag)
{
    $size = round($tagMinSize + (($tag['count'] - $minQty) * $step));
    $text = $tag['tagtext'];

    $url = $vbulletin->options['homeurl'].'/'.$contentTypes[$tag['contenttypeid']].urlencode($tag['tagtext']);
    $tagsHTML .= "<a href='$url' style='$size'>$text</a>";
}

$data['tagcloud'] = '<tags>'.$tagsHTML.'</tags>';

$flashVars = "";

foreach($data as $var=>$val)
{
    $flashVars .= (empty ($flashVars))?'':'&amp;';
    $flashVars .= "$var=".urlencode($val);
}

ob_start();
?>
<embed width="<?php echo $flashWidth;?>" height="<?php echo $flashHeight;?>" flashvars="<?php echo $flashVars;?>" wmode="transparent" allowscriptaccess="always" quality="high" bgcolor="#<?php echo $flashBackgroundColor;?>" name="vbCloudFlash" id="vbCloudFlash" style="" src="<?php echo $vbulletin->options['homeurl'].'/'.$flashPath;?>" type="application/x-shockwave-flash"/>
<?php

$content = ob_get_contents();
ob_end_clean();

$output = $content;

It is based on WP-Cumulus , to change settings please refer to this page -

http://www.roytanck.com/2009/03/11/h...us-shortcodes/

[Bob_R]

Is there an answer in our future?

When I go to put it in the forums block, if I even have to do that like I said the instructions don't clearly explain how to put it in your forums, the template reads block_html whereas to put in the CMS it's vbcms_widget_execphp_page

What must one do differently as per the instructions to get it as a forum sidebar?

Thanks

[Bob_R]

Uninstalled.

OK. I suspected I was right that it didn't work on the forum page and the silence has confirmed it.

I also checked a poster's site in this thread who was asking about getting it to work on the forum and he said he did. But, if you check his site it's on the CMS not the forum.

[Videx]

It does seem darn silly to have a list of forum tags that can't even go on the forum!

But I don't know that tags are even being updated, as I don't see any kind of scheduled task doing it. And I know my users aren't manually adding any tags anyway.

[NashChristian]

Great Mod! Thanks!

It is pulling content fine from both the Forums and CMS, I'm not sure what everyone is talking about.

Functionally, the mod is working fine for me. I do however have 3 SMALL display issues, which I'm hoping you can help me with (NGCoders). I checked your demo site (roboticsindia.com) and I noticed that your site doesn't have any of the 3 display problems, so I'm guessing you must have found a way to correct them on your site. Please share with us how you fixed them, so I can do the same.

First of all, my widget isn't in a fixed width column, so sometimes it will be wider than 330px, and other times it will be narrower than 330px (the same as on your site). To help compensate for this, I wrapped the <embed> tag with a <center> tag. That is the ONLY change I made to your original code.

Here are two screen shots of the widget on my site:

Narrower than 330px:



Wider than 330px:



Here are my 3 display issues:

1. On the narrower width widget, the cloud does not stay in the CENTER of the widget, it favors the right side.
2. On the narrower width widget, the cloud text is overlapping the widget padding on the right side.
3. On the wider width widget, the tags are CLIPPING-OFF on the far right and left sides (see the right edge of "freedom").

DEMO

Can you please share with us how you fixed these three issues on your site? I don't see any of the same problems on your site at all.

Thanks for the mod and thanks in advance for the help!
Jeff

[sKippah]

@NashChristian: U have to play around a bit with this part

$flashWidth  = 330;
$flashHeight = 330;
$flashPath = 'tagcloud.swf';
$flashBackgroundColor = 'ffffff';
$tagCount = 30;
$tagMaxSize = 16;
$tagMinSize = 8;

I dont know anymore where to find the code on the original page. coz there was written what is what for.

As i was searching a bit i saw some of these flash Clouds with colored tags. is this possible here too in any way???

[Bob_R]

Originally Posted by NashChristian

Great Mod! Thanks!

It is pulling content fine from both the Forums and CMS, I'm not sure what everyone is talking about.

Functionally, the mod is working fine for me.

Then please post the code that you used to make it work on the forum.

Correction. Forget it. I checked your site. I too have it on my forum. I'm speaking of putting it on the forum with animation. That cannot be done with this mod. For the animation it must be on the CMS

[ngcoders]

Try changing the following -

PHP Code:


$flashWidth  = '100%';
$flashHeight =  '100%'; 


[NashChristian]

Originally Posted by ngcoders

Try changing the following -

PHP Code:

 
$flashWidth  = '100%';
$flashHeight =  '100%'; 


Hello,

Thanks for the feedback.

Is that the only change you made to the code listed in this mod, for your personal site: http://www.roboticsindia.com? Did you not need to use any code to CENTER it?

The biggest bummer I see with setting this to 100%, is when you have a wider screen resolution and a wider widget, the text in the cloud still stays tiny. Here are a couple screen shots:


(This is at a fixed 330 px width.)



(This is at 100% width and height.)


Do you know of a way to make the cloud larger, without screwing up the display? Do you have access to the source .FLA file, where the height and width could be increased?

This is cool! It just needs some tweaking.

Thanks for your help.
Jeff

[NashChristian]

Alright, a little bit better, but still not perfect:

I figured out that you can force the height to a certain dimension and stretch the .swf, while leaving the width at 100% so not to break the widget padding.

Here's what I'm using now:

$flashWidth  = '100%'; 
$flashHeight = '275px';

The only down side, is if you use a (narrow) low resolution monitor, it will still force the widget to be 275 px high. So if it is 150px wide, it is STILL going to be 275px high. (Which doesn't look too good.) But at least for the rest of the world with wider monitors, it looks a lot better than tiny text.

Hope that helps someone.

If ANYONE knows of a BETTER way to enlarge this without screwing up the display at different resolutions, please let me know.

Thanks!
Jeff

[hendri]

how to change the cloud to links that i want to put inside ? any idea ?