Adding Icons to Your Category Links

[Dave Robison]

I need to qualify this posting by saying I don’t believe this is the BEST way to accomplish this goal. It gets the job done, but there is surely a more elegant way (and I would LOVE to hear it... more refined solutions will help me become a better Ning Developer).

At pinnaclecommunity.com (a private network, but I’ll include screenshots), we decided to enhance the Forum by including icons next to the discussion categories to help “brand” them a bit. It took a little work (as I am completely new to the Ning architecture AND php), but we came up with a solution.

FIRST... Create the Icon Graphics
You may have noticed (if you dig through the gfx folders in your source code) that many individual Ning graphics are actually ganged together into a single strip or block. A .GIF might contain a dozen or more icons and symbols. The individual graphics are displayed by assigning them as background graphics to a DIV whose height and width are just big enough to reveal a single image and with an overflow style of “hidden”. When the page is rendered, the background display is offset to reveal the correct part of the image. This is ingenious because it cuts down on load time for the graphics that inhabit your site.

We had three main categories so we created three icons and ran them vertically in a strip in the order they would appear on the forum home page. Each icon measured 45 pixels wide and (more importantly) 41 pixels high. We named the resulting .GIF categoryIcons.gif and saved it to the xn_resources/widgets/forum/gfx folder.

THEN... Modify the Code
There are three pages total that need to be modified so the icons display where they’re supposed to:

widgets/forum/templates/category/listByTitle.php
widgets/forum/templates/topic/list.php
widgets/forum/templates/topic/listEmpty.php

Open listByTitle.php and find the following code (around line 33):

<?php foreach($this->categorySet as $category) {
$link = $this->_buildUrl('topic', 'listForCategory', array('categoryId' => $category->id));
$topic = $this->topics[$category->id];
if ($topic) {
$lastReplyName = xnhtmlentities(xg_username($topic->my->lastCommentContributorName));
$topicCreator = xnhtmlentities(xg_username($topic->contributorName));
$lastReplyHref = $this->_buildUrl('topic', 'showLastReply', array('id' => $topic->id));
}
?>
<tr>
<td class="xg_lightborder">
<h3><a href="<%= xnhtmlentities($link) "><%= xnhtmlentities($category->title) %></a></h3>
<p class="cat_desc small"><%= $category->description %></p>
</td>

This section is where the page iterates through all the categories defined in your forum and inserts table rows for each one. Replace the existing code with the following:

<?php
$currentOffset=41;
foreach($this->categorySet as $category) {
$link = $this->_buildUrl('topic', 'listForCategory', array('categoryId' => $category->id));
$topic = $this->topics[$category->id];
if ($topic) {
$lastReplyName = xnhtmlentities(xg_username($topic->my->lastCommentContributorName));
$topicCreator = xnhtmlentities(xg_username($topic->contributorName));
$lastReplyHref = $this->_buildUrl('topic', 'showLastReply', array('id' => $topic->id));
}
$currentOffset-=41;
?>
<tr>
<td class="xg_lightborder">
<div style="float:left; height:41px; width:50px; background-image:url(../../../../xn_resources/widgets/forum/gfx/categoryIcons.gif); background-repeat:no-repeat; background-position: 0px <%= $currentOffset %>px;"></div>
<h3><a href="<%= xnhtmlentities($link) . '&icon=' . $currentOffset %>"><%= xnhtmlentities($category->title) %></a></h3>
<p class="cat_desc small"><%= $category->description %></p>
</td>

Let me walk you through these changes:

CREATE A COUNTER
The variable $currentOffset serves as a counter to determine how far the image would be offset each time the page looped through the code. Since the icons were each 41 pixels high, the value of $currentOffset would be reduced by 41 with each loop ($currentOffset-=41;).

The variable is initialized with a value of 41 because the initial offset had to be zero; initializing it with 41 meant the first loop would set the value to zero when it was applied to the rest of the code.

INSERT THE IMAGE DIV
With the counter in place and ticking down by 41 with each loop, insert a DIV in front of the category text (which is contained inside the<h3> tags). Set he DIV style to float left with a specific height and width to match each individual icon, and set the categoryIcons.gif image as the background image. The background-offset value is the key to making this work; the first value controls horizontal offset (because the icon graphic was laid out vertically, this value will always be zero) and the second value controls the vertical offset. PHP determines what the second value will be by inserting the current value of $currentOffset into the style. In the first loop, this value would be 0px, the second would be -41px (shifting it up exactly enough to reveal the second logo), the third would be -82, and so on.

SEND THE CURRENT OFFSET WITH THE LINK
In order for this concept to work, the icons ALSO need to appear in the topic page that is loaded when you click a category link. Rather than use a cumbersome “if...elseif...then” statement, you can pass the current offset on to destination page by tucking it in as a querystring in the URL of the link.

Modify the original link code so you concatenate the querystring variable “icon” to the href and set it to equal the value of $currentOffset. When the link is clicked, it will pass the correct offset to the receiving page.

MORE PAGES TO MODIFY
Open these two pages:
widgets/forum/templates/topic/list.php
widgets/forum/templates/topic/listEmpty.php

In list.php – the page that lists all the discussions under a given category - find the following code (around line 5):

<h1><%= $this->skipTitleCount == true ? $this->titleHtml : xg_html('MESSAGE_PARENTHESIS_COUNT', $this->titleHtml, $this->totalCount)%> </h1>

...and replace it with the following:

<h1>
<div style="float:left; height:41px; width:50px; background-image:url(../../../../xn_resources/widgets/forum/gfx/categoryIcons.gif); background-repeat:no-repeat; background-position: 0px <%= $_GET['icon'] %>px;"></div>
<%= $this->skipTitleCount == true ? $this->titleHtml : xg_html('MESSAGE_PARENTHESIS_COUNT', $this->titleHtml, $this->totalCount)%>
</h1>

In listEmpty.php – the page that’s displ;ayed if there ARE no discussion for that category – find the following code (also around line 5):

<h1><%= $this->titleHtml %></h1>

...and replace it with the following:

<h1>
<div style="float:left; height:41px; width:50px; background-image:url(../../../../xn_resources/widgets/forum/gfx/categoryIcons.gif); background-repeat:no-repeat; background-position: 0px <%= $_GET['icon'] %>px;"></div>
<%= $this->titleHtml %>
</h1>

All you’re doing is inserting the same DIV from the previous edits with one important distinction... you’re using a $_GET statement to pull the value of “icon” from the URL and inserting it into the style setting for the div.

------------------------

Now... I KNOW there’s a more elegant way. Ultimately, I could see including the image in the database where the categories are stored and including it in the categorySet object as a property attached to each category. Even better would be to modify the “Manage Forums” page to accommodate the assignment of icon graphics when you define the category.

I’m gonna save THAT for phase 2, I think. ; )

[Dayne Daniell]

Great work!
Just to make your life a little easier, and perhaps speed things up, I'd recommend hosting the images using the xn_resources folder. It's faster and you don't have to worry about relative links.

see this post for info

[Dave Robison]

Thanks, Dayne!

Just so I understand what you're saying, instead of "../../../../xn_resources/widgets/forum/gfx/categoryIcons.gif" (which IS a bit cumbersome), you're suggesting "http://www.pinnaclecommunity/xn_resources/widgets/forum/gfx/categoryIcons.gif" ? That makes good sense... not like these pages are going to be moving around a lot, right?

I appreciate the tip! : )