Nice looking output (loosely based on meetup.com) and hCalendar microformat

(21 posts) (7 voices)

Started 2 years ago by bristweb
Latest reply from Franky

Tags:

figured i'd share a nice way to lay out your events to get the following improvements

1) nice looking
2) clickable links for iCal and Google Calendar
3) compatibility with hCalendar microformat (play better with google!): http://www.google.com/support/webmasters/bin/answer.py?answer=164506

you can see how Google reads your microformats here: http://www.google.com/webmasters/tools/richsnippets
test it out! :)

default event list format header:

<div class="events">

default event list format

<div class="vevent">
<div class="time"><div class="date"><div class="month">#M</div><div class="day">#j</div></div><b>#D</b><br/>#H:#i #A</div>

<h4><a href="#_EVENTPAGEURL" class="url summary">#_NAME</a></h4>
a type of <b class="category">#_CATEGORIES</b> at  <span class="location vcard">
      <a class="fn org" href="#_EVENTPAGEURL">#_LOCATION</a>
      <span class="adr">
         <span class="street-address"><span class="value-title" title="#_ADDRESS"></span></span>
         <span class="locality"><span class="value-title" title="#_TOWN"></span></span>
      </span>
   </span>
<br/><div class="description">#_EXCERPT</div><br/>
<span class="dtstart">
<span class="value-title" title="#c"></span>
</span>
</div>

default event list footer

</div>

default single event format

<div class="vevent"><p><div class="time"><div class="date"><div class="month">#M</div><div class="day">#j</div></div><b>#D</b><br/>#H:#i #A<br/><a href="#_ICALURL">iCal</a><br/>

<a target="_blank" href="
http://www.google.com/calendar/event?action=TEMPLATE
&text=#_NAME
&dates=#_{Ymd}T#H#_{i}00/#@_{Ymd}T#@H#@_{i}00
&sprop=#_EVENTPAGEURL
&location=#_ADDRESS,#_TOWN
&details=#_LOCATION.">
Google
</a>

</div><b>What:</b> <span class="category">#_CATEGORIES</span><br/>
<b>Where:</b> <span class="location vcard">
      <a class="fn org" href="#_EVENTPAGEURL">#_LOCATION</a>
      <span class="adr">
         <span class="street-address"><span class="value-title" title="#_ADDRESS"></span></span>
         <span class="locality">#_TOWN"</span></span>
      </span>
   </span><br/>
<b>Remaining Spaces:</b> #_AVAILABLESPACES<br/>
<div class="description">
#_NOTES
</div>
</p>
<div style="clear:both;"></div>
<p>#_MAP#_DIRECTIONS</p> #_ADDBOOKINGFORM

<span class="summary">
<span class="value-title" title="#_NAME"></span>
</span>
<span class="dtstart">
<span class="value-title" title="#c"></span>
</span>
<span class="dtend">
<span class="value-title" title="#@c"></span>
</span>
</div>

you need to add the following css (or something simimlar)

.time{
	float:left;
	display:block;
	width:70px;
	text-align:center;
	margin-right:1em;
}
.date{
	border:solid 1px #000;
	width:60px;
	margin:0 5px;
	font-size:1.5em;
}
.month{
	background:#000;
	color:#fff;
	text-transform:uppercase;
}
.day{
	font-weight:bold;
	line-height:2em;
}

.events img{
	height:150px;
	width:150px;
	margin-right:1em;
	float:left;
}
.vevent img.alignleft{
	margin-right:1em;
}
.vevent img.alignright{
	margin-left:1em;
}

thanks jpjoki for the original post
http://www.e-dynamics.be/bbpress/topic.php?id=180

Posted 2 years ago #

bristweb
Member
some improvements that would be wonderful
1. upload image separately from content so that there can be a thumbnail in event view. then have shortcode for image like #_THUMB and #_IMAGE
2. separate fields into street address, locality, and region (http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506) two new placeholders: #_LOCALITY and #_REGION.... #_TOWN would stay and simply combines #_REGION and #_LOCALITY
3. ability to run http://php.net/manual/en/function.strip-tags.php on #_DETAILS. perhaps a #_DETAILS_STRIPPED placeholder
Posted 2 years ago #
Franky
Key Master

I created a feature request for these.
Btw, a demo showing the result of these would be nice as well :-)
Thanks already for this tip!

Posted 2 years ago #
Franky
Key Master

A question: would strip_tags be enough on #_DETAILS? I'm guessing the \r and \n need to be translated to url-standards?

Posted 2 years ago #
admintiger
Member

That is a nice layout bristweb. Thanks very much for sharing.

Posted 2 years ago #
admintiger
Member
This portion of the Default single event format code doesn't validate, in part because end-of-line characters become space characters in the html and space characters have to be escaped in href strings and because & characters must be & a m p ; (without the spaces, bbpress won't let me show it correctly), but also for one or more other reasons that I haven't identified yet:
```
<a target="_blank" href="
http://www.google.com/calendar/event?action=TEMPLATE
&text=#_NAME
&dates=#_{Ymd}T#H#_{i}00/#@_{Ymd}T#@H#@_{i}00
&sprop=#_EVENTPAGEURL
&location=#_ADDRESS,#_TOWN
&details=#_LOCATION.">
Google
</a>
```
I just realized that you may have typed the ampersands in your code correctly and that bbpress changed them.
Posted 2 years ago #
admintiger
Member

The additional validation problem is due to event name and address space characters. Spaces in href strings should be escaped as %20.

Posted 2 years ago #
admintiger
Member

There is an additional problem with this. Event names and addresses can contain characters with accent marks and also can contain other characters that must be normalized to NFC (or escaped) in href strings. See: http://www.macchiato.com/unicode/nfc-faq

Posted 2 years ago #
Franky
Key Master

yeah, the whole thing needs to be url-ized. I need to create something for that later on

Posted 2 years ago #
admintiger
Member

Another issue with the Default single event format code is that "div" tags are not allowed with "p".

Posted 2 years ago #
Franky
Key Master

In trunk, I've added a #URL prefix similar to #ESC, so try this:
<a target="_blank" href="
http://www.google.com/calendar/event?action=TEMPLATE
&text=#URL_NAME
&dates=#_{Ymd}T#H#_{i}00/#@_{Ymd}T#@H#@_{i}00
&sprop=#URL_EVENTPAGEURL
&location=#URL_ADDRESS,#URL_TOWN
&details=#URL_LOCATION">
Google

(#URL works for the dateformatting also, but not needed there). You should now be able to add #URL_NOTES and #URL_EXCERPT as well.

Posted 2 years ago #
bristweb
Member

awesome franky!

for me, the urls were automatically converted correctly. but perhaps that was due to something in my wordpress or due to using google chrome... but #URL is a great add!

thanks for the info admintiger... i probably should have reviewed more thoroughly but i wanted to share while it was fresh in my mind.

here are some demo screenshots:
events list - http://awesomescreenshot.com/0906kmqb7
individual event - http://awesomescreenshot.com/0d56kms3a
google reading the microdata - http://awesomescreenshot.com/0266kmv43

Posted 2 years ago #
bwowp
Member

hi guys;

im a bit of a newbit, but i want to use this code but i dont know where to put it. In what file?
.
can anyone give me some guidance?

thanks

Posted 2 years ago #
wputler
Member

Go to your Events Settings. You'll see a place to put formats for all sorts of things. There is code listed above for Events List and Single Event.

I would copy what you have there currently and save it in a text file. Then paste this in and see what happens.

Posted 2 years ago #
wassim
Member

where should we paste the css file?

Posted 2 years ago #
Franky
Key Master

See http://www.e-dynamics.be/wordpress/?cat=30

Posted 2 years ago #
wassim
Member

i created a file eme.css pasted the css code there

but nothing happened ....

Posted 2 years ago #
wassim
Member

is it recquired to use a particular theme or can we use this with any theme?

Posted 2 years ago #
wputler
Member

I just add the css changes to my theme's css (actually, I always create a child theme and make all my changes there so nothing get written over).

Posted 2 years ago #
bdavids3
Member

This should be the default when you install the plugin. I think this would make a lot of people happy.

Posted 2 years ago #
Franky
Key Master

No css change gets overwritten at all. See http://www.e-dynamics.be/wordpress/?cat=30

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.