Atom Login Admin

Above the clouds

Tag Cloud made from Jinja2 Custom Filter

written on Sunday,January 06,2013

Jinja2 template engine is so powerful, can be applied various.
Custom filters are particularly interesting, This time with a custom filter
I tried to make a Tag Cloud.
The code is as follows:

  • custom_filters.py
TAG_RANK = ("tagRank10","tagRank9",
"tagRank8","tagRank7","tagRank6",
"tagRank5","tagRank4","tagRank3",
"tagRank2","tagRank1")

class Tag(object):
  """Holds tag properties """
  def __init__(self, title, tag_level):
    self._title = title
    self._tag_level = tag_level

  @property
  def title(self):
    return self._title

  @property
  def tag_level(self):
    return self._tag_level

def compute_rank(tag_title, count, totalcount):
  """Compute taglevel from frequency of tag"""
  index = int(float(count)/float(totalcount)*10)
  return Tag(tag_title, TAG_RANK[index])

def create_tag_rank(articles):
  """Create tag rank"""
  tag_count_dict = {}
  total_count = 0
  for article in articles:
    count = tag_count_dict.get(article.tag, None)
    total_count += 1
    if count is None:
      tag_count_dict[article.tag] = 1
    else:
      count += 1
      tag_count_dict[article.tag] = count
  tags = []
  for tag_title in tag_count_dict.keys():
    tags.append(compute_rank(tag_title, tag_count_dict[tag_title],
        total_count))
  return tags
  • flask_profiler.py
import jinja2
jinja2.filters.FILTERS['create_tag_rank'] = custom_filters.create_tag_rank
  • tags.html
<div class=tags>
  {% for tag in articles | create_tag_rank %}
  <ul>
    <li class={{tag.tag_level}}><a href={{ url_for('blogs', tag=tag.title) }} title="{{tag.title}}">{{tag.title}}</a></li>
  </ul>
  {% endfor %}
</div>
  • style.css
.tags {
    overflow: hidden;
    margin: 10px auto 30px;
    padding: 20px;
    line-height: 1.6em;
}
.tags li {
    float: left;
    min-width: 100px;
    height: 3em;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 20px;
    letter-spacing: -1px;
    font-family: Georgia,"Times New Roman",Serif;
}
.tags li a {
    position: relative;
    top: 0px;
    left: -10px;
    z-index: 10;
    margin: 0;
    padding: 0 5px;
    color: #000;
    font-size: 1em;
    text-decoration: none;
}
#contents .tags li a:hover {
    text-decoration: underline;
    position: relative;
    z-index: 50;
    color: #F00;
}
.tags li.tagRank1 {
}
.tags li.tagRank1 a {
    font-size: 2.8em;
}
.tags li.tagRank2 a {
    font-size: 2.6em;
    color: #222;
}
.tags li.tagRank3 a {
    font-size: 2.4em;
    color: #333;
}
.tags li.tagRank4 a {
    font-size: 2.2em;
    color: #444;
}
.tags li.tagRank5 a {
    font-size: 2em;
    color: #555;
}
.tags li.tagRank6 a {
    font-size: 1.8em;
    color: #666;
}
.tags li.tagRank7 a {
    font-size: 1.6em;
    color: #777;
}
.tags li.tagRank8 a {
    font-size: 1.4em;
    color: #888;
}
.tags li.tagRank9 a {
    font-size: 1.2em;
    color: #999;
}
.tags li.tagRank10 a {
    font-size: 1em;
    color: #AAA;
}

Like this:)

tagcloud

Simply like this, I was able to create a TagCloud.
Plans to also post actively Flask and Jinja2 :).

Comments

Add Comment

Login
This entry was tagged #Jinja2 #Flask