Implementing Microformats (Calendar, Company Directory, Comments)

[matterhornpat]

First off, apologies for not posting this sooner.....secondly, this is not so much a discussion of the merits of microformats, as it is a way to quickly and easily implement them. The templates below are intended to serve as a framework/guide for you.....not as turnkey's for you to simply cut/paste then complain if they don't do what you need them to. With a tiny bit of modification, these should work for almost any situation.

I wanted to incorporate microformats with my sites to utilize hcard, hcalendar and hreview. I don't see a great deal of support for them, but it is coming, and coming quickly, and I am already seeing benefits in using them with my current projects.

For more information about microformats please visit http://www.micorformats.org, and more specifically, their wiki, http://microformats.org/wiki/Main_Page

Before we get started, a couple of useful tools for debugging and ensuring you have correctly implemented the templates with your project:
Tails Export Firefox Plugin
https://addons.mozilla.org/en-US/firefox/addon/2240

Operator Firefox Plugin
https://addons.mozilla.org/nl/firefox/addon/4106

Going to begin with some code to utilize the hcalendar microformat with Calendar. The beauty is that you will lose no flexibility in terms of formating the look of to the user. By using the supplied CSS hooks, you can style away AND take advantage of microformats to make your data easily machine-readable.

Calendar Templates:

List Template - I use this in sidebars to show a simple list using the 'upcominglist' and set the dblistemplate to point to the list template containing this information:

Code: Select all

{if $compact_view neq 1}
{/if}
{foreach from=$events key=key item=event}
	<div class="vevent">
	<h2 class="summary">{$event.event_title}</h2>

	{assign var=month_number value=$event.event_date_start|date_format:"%m"}
	{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}

{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"}</abbr>
	{else}
	

{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	
<abbr class="dtstart" title="{event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"}</abbr> 

<span class="dtstart">{$lang.to}</span> 

<abbr class="dtend" title="{$event.event_date_end|date_format:"%H:%M"}">{$event.event_date_end|date_format:"%B %e, %Y"}</abbr>
	{else}
	

<abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"} -</abbr> 


<abbr class="dtend" title="{$event.event_date_end|date_format:"%Y-%m-%d"}">{$event.event_date_end|date_format:"%B %e, %Y"} </abbr>
	{/if}
	{/if}

	
	<div class="description">{$event.event_summary}</div>

	
		<a href="{$event.url}">{$moretext}</a>
	

	</div>
{/foreach}

As you can see, this is a fairly simple template, with a sampling of information. Notice the dtstart and dtend....which I feel somewhat "de-complicates" the shipped templates.

Next is the template which I use for monthly lists of events.

Code: Select all

<div id="microlist">
{if $compact_view neq 1}
<h2>{if $day > 0}{$day} {/if}{$month_names[$month]} {$year} Events</h2>
<a href="{$navigation.prev}"><< previous month</a> - <a href="{$navigation.next}">next month ></a>
{/if}
{foreach from=$events key=key item=event}
{assign var=month_number value=$event.event_date_start|date_format:"%m"}
{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
<div class="vevent">
	<h5 class="summary">{$event.event_title}</h5>
{if $event.fields.Image}
<img src="uploads/{$event.fields.Image}" class="eventphotos"/>
{/if}
	
{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"}</abbr>
	{else}
	

{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	
<abbr class="dtstart" title="event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"}</abbr> 

<span class="dtstart">{$lang.to}</span> 

<abbr class="dtend" title="$event.event_date_end|date_format:"%H:%M">{$event.event_date_end|date_format:"%H:%M"}</abbr>
	{else}
	

<abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"} -</abbr> 


<abbr class="dtend" title="{$event.event_date_end|date_format:"%Y-%m-%d"}">{$event.event_date_end|date_format:"%B %e, %Y"} </abbr>
	{/if}
	{/if}

		<div class="description">{eval var=$event.event_details}</div>
	
</div>
<a href="{$event.url}">{$moretext}</a>
{/foreach}
</div>

Last calendar template is the event template. Will want to play with this a bit if you have only one location for all events you can code it (location, website etc) directly into the template. Otherwise you will need to create some custom fields to get it going properly.

Code: Select all

<div id="microlist">
<div class="vevent">
	<h5 class="summary">{$event.event_title}</h5>
{if $event.fields.Image}
<img src="uploads/{$event.fields.Image}" class="eventphotos"/>
{/if}
	
{if $event.event_date_start == $event.event_date_end || $event.event_date_end == ""}
	<abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"}</abbr>
	{else}
	

{if $event.event_date_start|date_format:"%d%m%Y" == $event.event_date_end|date_format:"%d%m%Y"}
	
<abbr class="dtstart" title="event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"}</abbr> 

<span class="dtstart">{$lang.to}</span> 

<abbr class="dtend" title="$event.event_date_end|date_format:"%H:%M">{$event.event_date_end|date_format:"%H:%M"}</abbr>
	{else}
	

<abbr class="dtstart" title="{$event.event_date_start|date_format:"%Y-%m-%d"}">{$event.event_date_start|date_format:"%B %e, %Y"} -</abbr> 


<abbr class="dtend" title="{$event.event_date_end|date_format:"%Y-%m-%d"}">{$event.event_date_end|date_format:"%B %e, %Y"} </abbr>
	{/if}
	{/if}

{if $event.fields.Website}
<a href="http://{$event.fields.Website}" class="summary url">{$event.fields.Website}</a><br />
{/if}

{if $event.fields.Location}
<div class="location">{$event.fields.Phone}</div>
{/if}
	
		{if $event.event_details !="" && $event.event_details != ""}
		<div class="description">{eval var=$event.event_details}</div>
		{/if}
	
</div>

</div>

Next, we will look at implementing hcard with Company Directory. Company Directory has proven to be very, very flexible after the sponsored modification. I have used it for everything from directory type sites, to travel sites to list different trips.

Below you will find a framework to implement hcard with Company Directory....took a bit of a "hack", that will need to be fully explained (with sample code provided) to clients if they will be inputting data into Company Directory.

First off....will show you both summary and detail templates, then will explain the special considerations for inputting the data. You will notice a number of custom fields will need to be created....

Code: Select all

{if isset($catformstart)}
{$catformstart}
{$catdropdown}{$catbutton}
{$catformend}
{/if}

{foreach from=$items item=entry}

<div class="vcard">

 

{if $entry->website ne ''}
<h4 class="fn org"><a class="url fn n" href="http://{$entry->website}">{$entry->company_name}</a></h4>
{else}
<h4 class="fn org">{$entry->company_name}</h4>{/if}

<div class="contactinfo">
{if $entry->picture_location ne ''}
<img src="{$entry->picture_path}" />
{/if}
{if $entry->logo_location ne ''}
<a rel="nofollow" href="http://{$entry->website}"><img class="logo" src="{$entry->logo_path}" alt="logo"/></a>
{/if}



{if $entry->details ne ''}

{$entry->details}
{/if}

</div>

<div class="contactdetails">
<strong class="details">{$entry->company_name}</strong>

{if $entry->address ne ''}
<div class="adr">{$entry->address}</div>
{/if}

<div class="tel">
{if $entry->telephone ne ''}
<span class="type">Phone</span><span class="value">
{$entry->telephone}</span>
{/if}
{if $entry->fax ne ''}
<span class="type">Fax</span><span class="value">
{$entry->fax}</span>
{else}
<span></span>
{/if}
</div>
{if $entry->website ne ''}
<a class="website" rel="nofollow" href="http://{$entry->website}">{$entry->website}</a>
{/if}
{if $entry->contact_email ne ''}
<a class="email" href="mailto:{$entry->contact_email}">{$entry->contact_email}</a>
{/if}
</div>
</div>

{/foreach}

The Company Directory Detail Template (The Google Maps is optional and can easily be deleted, just happened to be built into the sample I pulled):

Code: Select all

<div class="vcard">

 

{if $entry->website ne ''}
<h4 class="fn org"><a class="url fn n" href="http://{$entry->website}">{$entry->company_name}</a></h4>
{else}
<h4 class="fn org">{$entry->company_name}</h4>{/if}

<div class="contactinfo">
{if $entry->picture_location ne ''}
<img src="{$entry->picture_path}" />
{/if}

{if $entry->logo_location ne ''}
<a rel="nofollow" href="http://{$entry->website}"><img class="logo" src="{$entry->logo_path}" alt="logo"/></a>
{/if}


{if $entry->details ne ''}

{$entry->details}
{/if}

{if $entry->address ne ''}
{SimpleGoogleMap map='main' addr=$entry->address|strip_tags}
<p class="disclaimer">Put a simple disclaimer here if you wish to use Google Maps.</p>
{else}

{/if}
</div>

<div class="contactdetails">
<strong class="details">{$entry->company_name}</strong>
{if $entry->address ne ''}
<div class="adr">{$entry->address}</div>
{/if}
<div class="tel">
{if $entry->telephone ne ''}
<span class="type">Phone</span><span class="value">
{$entry->telephone}</span>
{/if}
{if $entry->fax ne ''}
<span class="type">Fax</span><span class="value">
{$entry->fax}</span>
{else}
<span></span>
{/if}
</div>
{if $entry->website ne ''}
<a class="website" rel="nofollow" href="http://{$entry->website}">{$entry->website}</a>
{/if}
{if $entry->contact_email ne ''}
<a class="email" href="mailto:{$entry->contact_email}">{$entry->contact_email}</a>
{/if}
</div>
</div>
<div class="clear">
</div>

One issue came up with the Address field, which needs to be broken down into more granular pieces. So, use the following snippet in your address field:

Code: Select all

<span class="street-address">111 Calguy Way</span><span class="locality">Beer City</span><span class="region">UT</span><span class="postal-code">12345</span>

Lastly, least used and least tested by me, but appears to work properly is the hreview.

For those that will be using the new products module, or have produces in which visitors review them, this is a great one to implement as many "product review sites" are actively crawling for this type of information.

Code: Select all

<div id="comments">
{if $items}
<div class="hreview">
{/if}
{foreach from=$items item=entry}
<h4 class="summary">{$entry->comment_title}</h4>
<span class="reviewer vcard">
{if $entry->author_email}
		<a href="mailto:{$entry->author_email|escape:"hexentity"}">Reviewer:<span class="fn">{$entry->comment_author}</span></a>
		{else}

		Reviewer:<span class="fn">{$entry->comment_author}</span>
		{/if}

		{if $entry->author_website}(<a class="url" href="{$entry->author_website}" target="_blank">{$entry->author_website}</a>){/if}

</span>

<abbr class="dtreviewed" title="{$entry->date|date_format:"%Y-%m-%d"}">
{$entry->date|date_format:"%m-%d-%Y"}</abbr>

	<p class="descripton">{$entry->comment_data}</p>
</div>
{/foreach}
{if $items}
</div>
{/if}

<h4 class="addcomment">Post a Comment</h4>
{startExpandCollapse id="name" title="$addacomment"}
{$startform}
{$image}
{if $spamprotect}
{$spamprotectimage}<br />
{/if}

<table>
{if $spamprotect}
	<tr>
		<td>{$entercodetxt}:</td>
		<td>{$inputentercode}</td>
	</tr>
{/if}
	<tr>
		<td>{$titletxt}:</td>
		<td>{$inputtitle}</td>
	</tr>
	<tr>
		<td>{$yournametxt}(*):</td>
		<td>{$inputyourname}</td>
	</tr>
{if $emailfield}
	<tr>
		<td>{$emailtxt}:</td>
		<td>{$inputemail}</td>
	</tr>
{/if}
{if $websitefield}
	<tr>
		<td>{$websitetxt}:</td>
		<td>{$inputwebsite}</td>
	</tr>
{/if}
	<tr>
		<td>{$commenttxt}(*):</td>
		<td>{$inputcomment}</td>
	</tr>
	<tr>
		<td> </td>
		<td>{$submit} {$cancel}</td>
	</tr>
</table>

{$endform}
{stopExpandCollapse} 

</div>

I'm sure there will uncover some errors and issues, but wanted to get some of you thinking about using microformats, and give some example code that I have been using on multiple projects.

Good luck! If you like what you see and use it on your sites, kick a couple bucks to the project so we can keep this moving forward to benefit us all.

[cyberman]

I like Beer City .

Great work - many thanks!

[Pierre M.]

Looks interesting. I wish I had more time to test it.

Pierre M.

[mager]

Hmm... can this reasonably be applied to the news module as well?
(most of my news entries can be interpreted as calendar entries... and I could use a template for them)

Martin

[cyberman]

Dont think so  - News has no (in Smarty available) start/end dates.

But there's a bridge module for News to Calendar (SVN only)

http://dev.cmsmadesimple.org/projects/newstocalendar/

Maybe this one can help ...

[matterhornpat]

Mager...not sure as I have not attempted to get it running with News, but I imagine with a bit of creativity it is possible.