Thursday Sep 06, 2007

Announcing Planet OpenSSO

If you've been paying attention really closely, you might have noticed Tatsuo's entry concerning Planet OpenSSO. This is a new blog aggregation, running on Sun's new Roller Planet infrastructure, collecting together the OpenSSO-related posts from (currently) 10 Sun engineers. I'll add feeds as and when I notice them - please do leave a comment here if there is one that you'd like to see included. Note that, to keep things on-topic, I'm using Roller's tagging feature to filter only entries with the 'opensso' tag, so the signal-to-noise ratio should stay pretty high. Go check it out.

Wednesday Jun 27, 2007

Blog Bling - Part 2 - Tag Cloud

Back in version 3.1, Apache Roller added support for tags. After Dave Levy blogged about tag clouds, I added one, based on his code:

#set($mytags = $model.weblog.getPopularTags(-1, 100))
#foreach ($tag in $mytags)
    #if ($tag.count > 2)
        <a class="tag s${tag.intensity}" href="$url.tag($tag.name)"
            title="$tag.count">$tag.name</a>
    #end
#end 

The code is quite simple - we create a set of popular tags, and, for each tag, if there are more than two blog entries with that tag, we create a link. The link's class is s1, s2...s5 based on the number of entries with that tag ('tag intensity'). The classes control the font size of the link:

<style type="text/css">
   .s1 {
   font-size:60%;
   }
   .s2 {
   font-size:80%;
   }
   .s3 {
   font-size:100%;
   }
   .s4 {
   font-size:120%;
   }
   .s5 {
   font-size:140%;
   }
</style>

That's all there is to it. I can link to all entries for a given tag - for example, http://blogs.sun.com/superpat/tags/opensso; there are even RSS feeds per tag - http://blogs.sun.com/superpat/feed/entries/atom?tags=opensso. You can also combine tags to get an intersection - http://blogs.sun.com/superpat/tags/opensso+saml. I've completely moved from categories to tags now - "It just works".

Tuesday Mar 27, 2007

Blog Bling - Part 1 - Gutter Images

As you can probably see (click here if you're reading this via RSS, so you can see), I have a whole bunch of customizations and widgets on my blog page. I often get email from folks asking 'how did you do that', so I thought a short series on my various tchotchkes might be in order.

I use a heavily modified version of Apache Roller's Sotto theme. Some of my customizations are peculiar to the Sotto theme, others to Roller, while some will work on any web page. Your mileage will vary, so take from this what you will.

So... working down from the top of the page, the first customization you come across is the 'gutter' - that row of images near the top of the page. The standard Sotto gutter looks like this (from Sandy's blog@sun):

While the standard images are quite decorative, they're not really me. I swapped them out for the following:

Customizing the images requires a little (but not much!) knowledge of CSS, so it's quite instructive to look at how it is done.

The standard Roller Weblog template for Sotto (Preferences/Templates/Weblog/Edit) contains the following:

<div id="gutter">
  <span id="gutterimage1">&nbsp;</span>
  <span id="gutterimage2">&nbsp;</span>
  <span id="gutterimage3">&nbsp;</span>
  <span class="floatSpacer"></span>
</div>

So, what's happening here? We have a <div> element with id="gutter", three 'non-breaking spaces' (&nbsp;), each within a <span> element and another empty <span>.

Let's look in the default Sotto CSS file to see what all those id attributes mean:

#gutter
{
  border-top: 0.1em solid #ddd;
  border-bottom: 0.1em solid #ddd;
  /\*background: #eee;\*/
  height: 52px;
  background: #eee url(../images/bannerBackground.gif) repeat-x;
}
#gutterimage1
{
  float: left;
  margin: 0px;
  width: 75px;
  height: 50px;
  border: 1px solid #ccc;
  background: url(../images/daisy.jpg) no-repeat;
}
#gutterimage2
{
  float: left;
  margin: 0px;
  width: 75px;
  height: 50px;
  border: 1px solid #ccc;
  background: url(../images/clouds.jpg) no-repeat;
}
#gutterimage3
{
  float: left;
  margin: 0px;
  width: 75px;
  height: 50px;
  border: 1px solid #ccc;
  border-right: 2px solid #ccc;
  background: url(../images/prairie.jpg) no-repeat;
}
/\* Further down the file... \*/
.floatSpacer
{
  clear: both;
  overflow: hidden;
}

Now we can see what is happening. The #gutter ID selector sets top and bottom borders, height and a background image for the gutter area as a while. The three #gutterimage ID selectors set the properties of the individual images: float to the left, no margin, width, height, border and background - ah ha - this is what we need to change to customize those images. The floatSpacer makes the gutter's borders work properly - this page gives a good explanation if you're interested in the technicalities.

To change the images, you have a couple of choices. Perhaps the simplest is to just define your own ID selectors and change the gutter image ID in the Weblog template itself, as Robin did:

<style>
<!--
#myimage1
{
  float: left;
  margin: 0px;
  width: 75px;
  height: 50px;
  border: 1px solid #ccc;
  background: url(/roller/resources/racingsnake/arch2-sm.jpg) no-repeat;
}
/\* ...more images defined... \*/
-->
</style>
<div id="gutter">
  <span id="myimage1">&nbsp;</span>
  <span id="myimage2">&nbsp;</span>
  <span id="myimage3">&nbsp;</span>
  <span id="myimage4">&nbsp;</span>
  <span class="floatSpacer"></span>
</div>

If you want to keep the same gutter height, you'll need to size your images accordingly and set the size in the CSS.

Since I had a number of other customizations in mind, I copied the Sotto default.css and changed the properties in place:

#gutterimage1
{
  float: left;
  margin: 0px;
  width: 75px;
  height: 50px;
  border: 1px solid #ccc;
  background: url(/roller/resources/superpat/SmallPat.jpg) no-repeat;
}

If you hover the mouse cursor over the images on my page, you'll notice that there is popup text for each one. I was lazy here - rather than figuring out how to do it in CSS, I just put a title attribute on each <span> element:

<div id="gutter">
  <span id="gutterimage1" title="Me">&nbsp;</span>
  <span id="gutterimage2" title="My beloved">&nbsp;</span>
  <span id="gutterimage3" title="Rascal &#35;1 - Tom">&nbsp;</span>
  <span id="gutterimage4" title="Rascal &#35;2 - Alex">&nbsp;</span>
  <span id="gutterimage5" title="1996 Porsche Carrera 4 Cabriolet">&nbsp;</span>
  <span class="floatSpacer"></span>
</div>

And that's all there is to it. Next time I'll look at the tag cloud - the group of links just below the gutter. Until then - happy blogging!

Monday Jan 08, 2007

From Categories to Tags

I finally got round to completing Superpatterns' migration from categories (exactly one category per post) to tags (zero or more tags per post). You can see the tag cloud at the top of the page (if you're reading this through syndication you'll have to visit my actual web page to see this). The size of each tag name in the tag cloud relates to the number of blog entries with that tag. If you still want to navigate by categories, they are listed in the dropdown near the top of the column on the right.

Thanks to Rich Sharples for the category chooser tip and to Dave Levy for the tag cloud idea.

Monday Dec 04, 2006

Roller Tip: #showNextPreviousControl()

I noticed that, although there is a set of links at the top of my blog page to navigate by pages of content (that thing that says "<< Prev | Main | Next >>", or something similar), there isn't one at the bottom. It seems logical that, when you get to the bottom of a page of content, you'd want to go to the next without scrolling all the way up to the top of the page.

There used to be a macro, #showNextPreviousLinks(), that did this, but it now outputs just

   <!-- 
   showNextPreviousLinks() is no longer needed as next/prev links are 
   built-into the  macro.
   -->

I guess #showWeblogEntries() is supposed to go in that double-space gap between 'the' and 'macro'. BTW - thanks to the Roller team for doing this and not just silencing the macro - quality code!

A bit of googling searching using the Google search engine, tells me that there is a shiny new macro, called by #showWeblogEntries() that does exactly what I want - #showNextPreviousControl(). Slip it in after #showWeblogEntries() and there they are - navigation links at the bottom of the page. Cool!

About

superpat

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today