Gallery3:Modules:tag cloud html5

Author: shadlaws
Download: Gallery forum‎
Version: 7‎

Description

This module uses a modified version of TagCanvas, a non-flash, HTML5-compliant jQuery plugin. It also uses excanvas to maintain compatibility with pre-9.0 Internet Explorer. This means that it's 100% compliant with all modern browsers, including all iOS devices and Internet Explorer 8.

TagCanvas was based on the concept of the original module WP-Cumulus. The core of WP-Cumulus, tagcloud.swf, was used for the original 'tag_cloud' and 'tag_cloud_page' Gallery modules.

Features

Similar to older modules:

Adds a 3D tag cloud as an available sidebar block (similar to 'tag_cloud' module)
Adds './tag_cloud' url which goes to a page to see the whole cloud (similar to 'tag_cloud_page' module)
Adds provision for a link to whole cloud page in the sidebar block
Adds provision for 'Add tag to album' form in the sidebar block
Provides an admin setting screen to allow tweaking the options

New features:

Adds provision to include an inline-style display of tags at the bottom of the whole cloud page for easy finding
Text font and color follow the theme by default
Compatible with non-Latin characters
Does not require Flash (better for SEO and for iOS)
Embed feature to put tag cloud in other parts of your website
Many more options accessible through the admin screen

Tested and functioning well on Gallery v3.0.4. Works with both old and new versions of jQuery (e.g. GreyDragon theme v4).

Installation

Ensure that you already have the 'tags' module installed and activated.
Download and extract tag_cloud_html5, then put the tag_cloud_html5 folder into your Gallery modules folder.
Log into your Gallery as an administrator and activate the module in the Admin -> Modules menu.

Note that this module is intentionally NOT named 'tag_cloud' to avoid confusion with the previous module. However, the 'HTML5' text is only shown on admin screens; the regular interface is not cluttered with it.

Admin settings screen

The settings are in three groups. The first is general, which are those you're most likely to change. The next two groups are directly passed as options to TagCanvas - one set for the sidebar block, and one for the whole cloud page. For more on these options, see the TagCanvas homepage here.

Embed feature

You can embed the tag cloud in other parts of your website outside gallery. This is done by calling a URL, then dumping its results into your page. For this to work, your main gallery is viewable to everyone (otherwise, a login screen will appear instead of the tag cloud).

It's strongly recommended to use PHP's file_get_contents and not an HTML object to render the tag cloud. The result is much more SEO-friendly, as it provides the links for the tags themselves directly in the source instead of the odd, non-SEO-friendly tag cloud URL. Also, it means that the tag cloud will inherit the text formatting from the rest of the page when applicable.

Example code:

<div id="example-name" style="width: 500px; height: 500px">
<?= file_get_contents("http://example.com/gallery3/tag_cloud/embed/wholecloud/maxtags/100/outlineColour/00FF00/textHeight/18"); ?>
</div>

The above example will:

Create a new div called "example-name"
Set its height and width at 500px
Render a tag cloud that uses the defaults from the "wholecloud" settings in the admin menu
Override the maxtags, outlineColour, and textHeight parameters as specified

More specifically, the URL should be formed as follows:

 tag_cloud/embed/optionsbase/option1/value1/option2/value2/.../optionN/valueN
   optionsbase = "sidebar" or "wholecloud" (takes settings from this config)
   optionX = option name (either "maxtags" or any of the TagCanvas parameters - no name verification performed!)
   valueX = value of option (no value verification performed here!)

Here's how the tag cloud is built: 1. Load "maxtags" and "options" variables for optionbase (as defined in admin menu or admin/advanced variables). Note that width and height are ignored, and the add tag form, wholecloud link, and inline tags are not shown. 2. Use option/value pairs to override and/or append those loaded above. 3. Build tag cloud, using 100% of the size from its parent. Correspondingly, the optionsbase is required, but the options and values are not.

Some other notes:

The width and height of the div can be set elsewhere (e.g. CSS). The rendered tag cloud itself will take on 100% of its parent's size.
The option names used are identical to those of TagCanvas itself (see links above), and are the same as those found on the advanced settings admin page. The option maxtags is also available.
The options textColour and outlineColour can be entered without the #, and the module will add it for you (like the example above).

TagCanvas modifications

As mentioned above, I've modified TagCanvas. In particular, I built an all-new physics-based motion model, added some more parameters, and did some bug fixes which are not a part of the original package as of this writing (2012/06/08).

The JS file included in the module is therefore called jquery.tagcanvas.mod.min.js, and has been minified and is therefore largely incomprehensible. If you're curious, I've also included the full-sized JS library for reference (although it is not used during runtime).

Changelog

2012/06/20, version 7

Added embed feature Changed how excanvas is called with IE8 and earlier Fixed bug with localization of parameters on admin settings screen

2012/06/08, version 6

Fixed TagCanvas bug that miscalculated mouse position the html object had non-zero margins in some browsers.

2012/06/07, version 5

Added physics-based motion model to TagCanvas Added even more parameters to admin screen Reformatted admin screen completely Changed upgrade logic to preserve old settings

2012/06/01, version 4

Added option to change sidebar cloud height

2012/06/01, version 3

Added option to display or hide the 'Add tag to album' form Changed formatting of whole cloud page slightly Added CSS to admin screen for better formatting Added modified TagCanvas plugin with 'initialDecel' and 'deadZone' parameters Added option for dead zone Added option for initial speed and deceleration

2012/05/31, version 2

Fixed bug that allowed scrolling to screw up the display (by setting wheelZoom option in TagCanvas to false)

2012/05/31, version 1

Initial release

Personal tools