Kartones.Net CS2007 Addon Pack 1.3.2: Lightweight + Visual Tags

In my last release of this Community Server 2007 pack I added a lightweight list of all posts, but it wasn't the only optimization I had in mind to do small speed increases on blog page loads. Two new controls I've just finished are a readonly tag list, and a "visual tag" list, which I'll explain in detail.

WeblogPostTagList

This control is just a simplified, readonly version of the default one that CS2007 ships. I have stripped down all javascript the inline tag editor uses and all related functionality, creating a smaller and faster one that just renders the list of tags/categories of a post (or a post list, just like the normal tag list did).

Features:

  • Readonly: To edit the tags you must edit the post. In exchange, no CS/ASP.NET javascript is injected, so the weight of the page and the number of http requests is decreased considerably.
  • Prefix can be specified: By default it prepends the typical "Filed under: ", but you can specify whatever you want (HTML tags included).
  • If the post has no tags, nothing is rendered.

The syntax is almost the same as with the CS one:, with the addition of the new property:

<KartonesNet:WeblogPostTagList runat="server" TagListPrefixLiteral="Tags: " Tag="Div" CssClass="em" />

For example this blog now uses it.

WeblogPostVisualTagList

This control uses the previous one as the base, but what it does is, instead of rendering text tags, renders images based on lowercasing and replacing spaces by underscores of the tag name (for example "XBox 360" would become "xbox_360.xxx".

Features:

  • Readonly: No JS injected.
  • TagImagesURL: Property to specify the url containing the tag images.
  • ImagesExtension: Property to specify the extension of the image tags.
  • TagListPrefixLiteral: Property to specify the tag list prefix (just like the other control).
  • TagAliases: To properly display the alt/title attributes of the <img>, you can specify a list of aliases (even multiple ones for a tag). Example: 360,xbox360=XBox 360;wii=Nintendo Wii
  • If the post has no tags, nothing is rendered.

Example of how to use it:

<KartonesNet:WeblogPostVisualTagList runat="server" Tag="Div" CssClass="em"
TagImagesURL
="http://mydomain.com/images/tags/" ImagesExtension="png"
TagListPrefixLiteral
="<b>Tags</b>: "
TagAliases
="360,xbox360=XBox 360;wii=Nintendo Wii" />

And a real example of how it looks:

visual tags example

This all happened because compressing ASP.NET and CS Javascripts is no easy task, and in order to do it you have to use ASP.NET AJAX (which I didn't wanted to use either). But my battle of speeding up this blog as much as possible is still ongoing (I want to do one additional task :)

Comments?

Posted by Kartones on 2009-07-12