IB Community Theme (communitytheme.ibo.org)

http://communitytheme.ibo.org

The IB Community Theme web site started development as 2007 drew to an end. It's plan is to allow all International Baccalaureate stakeholders (students, teachers, staff, parents etc) to discuss one community theme, the current one being sharing our humanity.

The web site went live early 2008 with great success. CCK and Views were used a lot along with their contributing modules allowing users to post a variety of content to their posts. Panels also was a great addition to the site allowing us to display many internal feeds within one page. Many of these could of been done with View and Blocks, but Panels made life so much easier.

The theme

The custom theme which was developed by Hoffi (http://www.hoffi.com) allowed us to develop some of the custom features. If time allowed we would have liked to make some of these into modules and submit them back to the Drupal Community but this may have to wait until the next IB project (due Summer 2008).

Teaser Image

The code below shows how we were able to show different images depending on what CCK field had been submitted. The code was written within the node.tpl.php file and displayed an image to the left of the teaser. If there was an image submitted along with the the post a thumb would appear in the teaser which when clicked would show the fill size image image within thickbox. If there was not an image but a Youtube video then the thumbnail from Youtube would be shown, this would then show the actual video from Youtube in the thickbox. If there were neither a image nor a Youtube video but a link then a thumbnail of the link would try to be sourced from http://www.websitethumbnails.net.

<div class="teaserImage"><?php
        	if($field_image[0]['view']){
				print $field_image[0]['view'];
			}
			elseif($field_video[0]["value"]) {
				if($field_video[0]["provider"]=='youtube') {
					?>
        			<a href="#TB_inline?height=375&width=430&inlineId=hiddenYoutubeContent<?php print $field_video[0]["value"] ?>" title="YouTube" class="thickbox" rel="post">
					<img src="http://i.ytimg.com/vi/<?php print $field_video[0]["value"] ?>/default.jpg" width="100" height="80">
        			</a>
        			<div id="hiddenYoutubeContent<?php print $field_video[0]["value"] ?>" style="display:none"><p align="center">
					<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/<?php print $field_video[0]["value"] ?>&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/<?php print $field_video[0]["value"] ?>&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>				</p>
					</div>
					<?php
				}
        	}
		elseif($field_link[0]['url']) {
			?>
			<img src="http://www.websitethumbnails.net/view.php?url=<?php print $field_link[0]['url'] ?>" width="100" height="80">
			<?php
		}
	?></div>

Similar code was used in the video Gallery to display the thumbnails from Youtube and then the videos within thickbox.

del.icio.us style tagging

By playing around with a custom theme page and a few javascript files we were able to develop del.icio.us style tagging for the posts. When a user is starts typing a tag it will suggest tags currently in the database just like drupal usually does, but underneath there is a box of suggested tags which a user can select and deselect to add or remove them from the post. Once a tag is selected is turns bold and gets added to the field, the tag can also be typed into the field, which again turns the suggested tag bold. The tag can then be deselected which removed the bold and the tag from the field.

Internationalisation

The IB is an international organisation and therefore multilingual, back in early 2008 we were still without the built-in internationalisation of Drupal 6 so had to use the I18N module. This work fairly well as we could "t" all of the text within our theme and then our translators could translate the text by using the module. The problem came when module developers had not "t'ed" their text and variables.

We had to then go through the theme and extract the variable at the right places to add the "t()". The was one of the longest and frustrating jobs within development and hope with the changes being made in Drupal 6 will not have the be repeated.

For some of the modules, nodes, views and panels which were to hard to "t" we had to add PHP switch statements to edit the languages of the text. This became confusing when trying to remember what had been "t'ed" and what had been manually edited.

Conclusion

We are now at a point weeks after launch and the web site is a great success, like all community sites it takes time for work to get around and users to get stuck in.