Let's see how you can show a list or cloud of tags in BEdita frontends.
If you want to show them in every page of your frontend you should use the beditaBeforeRender() callback in your PagesController:
protected function beditaBeforeRender() { $this->loadTags(); }
in this way an array named $listTags
will be set for the view. That array will contain all tags ordered by label related to, at least, a content in your publication. You can customize your tags list/cloud with some parameters.
loadTags( $tplVar=null, $cloud=true, $shuffle=false, $tagShowed=null )
where:
- $tplVar is the name of view variable
- $cloud says if has to be set a css class for cloud view. Possible css class values are smallestTag, largestTag, largeTag, mediumTag, smallTag
- $shuffle says if the tags have to be shuffled or shown in order by label
- $tagShowed is the number of tags that will be in the result array
So if you want to load 30 tags shuffled in cloud mode you will call
$this->loadTags(null, true, true, 30);
Tags view
In the view you will have $listTagsarray as:
Array ( [0] => Array ( ['id'] => 1 ['area_id'] => ['label'] => 'my tag' ['name'] => 'my-tag' ['object_type_id'] => ['priority'] => ['parent_id'] => ['parent_path'] => ['status'] => 'on' ['url_label'] => 'my-tag' ['weight'] => 100 ['class'] => 'largeTag' ), [1] => Array(...) ... );
where you can see that tag named "my tag" is related to 100 items (weight) and the css class largeTag should be applied to "my tag" to generate the cloud. The name and url_label fields are equal for backward compatibility but we suggest to use only name field because url_label will be deprecated in the future.
A new element to use in views named tag_cloud will be added soon, but for now you can create one by your own. It's straightforward: add the file app/views/elements/tag_cloud.tpl and, for example, add the code:
{if !empty($listTags)} < h2 >{t}Tag cloud{/t}< /h2 > {foreach from=$listTags item=tag} < a class="tagCloud {$tag.class|default:" title="{$tag.weight}" href="{$html->url('/tag/')}{$tag.name}" >{$tag.label}< /a > {/foreach} {/if}
add to your CSS something as:
.smallestTag { font-size:1em; } .smallTag { font-size:1.2em; } .mediumTag { font-size:1.4em; } .largeTag { font-size:1.8em; } .largestTag { font-size:2.2em; }
and you will have your tag cloud ready to use. Now you can call the element wherever you want using:
{$view->element('tag_cloud')}
in your views.