Typo macros explained

typo:code

You can use to include syntax-highlighted code blocks. Example:

<typo:code lang="ruby">
class Foo
  def bar
    "abcde"
  end
end
</typo:code>

This uses the Ruby Syntax module.

Options:

• lang. Sets the programming language. Currently supported languages are ruby, C, Delphi, HTML, RHTML, Nitro-XHTML, CSS, Diff, Java, * Javascript and yaml. Other languages will format correctly but will not have syntax highlighting.
• linenumber. Turns on line numbering. Use linenumber=“true” to enable.
• title. Adds a title block to the top of the code block.

Flickr integration

You can use to display images from Flickr. Example:

<typo:flickr img="31367273" size="small"/>

will produce an tag showing image number 31367273 from Flickr. This image will be linked to the Flickr page for this image, so you can zoom in and see larger versions. It will also have a comment block attached if a description has been attached to the picture in Flickr.

This macro takes a number of parameters:

• img The Flickr image ID of the picture that you wish to use. This shows up in the URL whenever you’re viewing a picture in Flickr; for example, the image ID for http://flickr.com/photos/scottlaird/31367273 is 31367273.
• size The image size that you’d like to display. Options are:
• square (75×75)
• thumbnail (maximum size 100 pixels)
• small (maximum size 240 pixels)
• medium (maximum size 500 pixels)
• large (maximum size 1024 pixels)
• original
• style This is passed through to the enclosing
  that this macro generates. To float the flickr image on the right, use style=“float:right”.
  caption The caption displayed below the image. By default, this is Flickr’s description of the image. to disable, use caption="".
  title The tooltip title associated with the image. Defaults to Flickr’s image title.
• alt The alt text associated with the image. By default, this is the same as the title.

Lightbox

You can use to display images from Flickr or a provided URL which, when clicked, will be shown in a lightbox using Lokesh Dhakar’s Lightbox Javascript

Example:

<typo:lightbox img="31367273" thumbsize="thumbnail" displaysize="original"/>
<typo:lightbox src="/files/myimage.png" thumbsrc="/files/myimage-thumb.png"/>

The first will produce an tag showing image number 31367273 from Flickr using the thumbnail image size. The image will be linked to the original image file from Flickr. When the link is clicked, the larger picture will be overlaid on top of the existing page instead of taking you over to the Flickr site. The second will do the same but use the src URL as the large picture and the thumbsrc URL as the thumbnail image. To understand what this looks like, have a peek at Lokesh Dhakar’s examples. It will also have a comment block attached if a description has been attached to the picture in Flickr or the caption attribute is used.

For theme writers, the link is enclosed in a div tag with a “lightboxplugin” class. Because this filter requires javascript and css include files, it will only work with themes using the <%= page_header %> convenience function in their layouts. As of this writing only Azure does this.

This macro takes a number of parameters:

Flickr attributes:

• img The Flickr image ID of the picture that you wish to use. This shows up in the URL whenever you’re viewing a picture in Flickr; for example, the image ID for http://flickr.com/photos/scottlaird/31367273 is 31367273.
• thumbsize The image size that you’d like to display. Typically you would use square, thumbnail or small. Options are:
  square (75×75)
• thumbnail (maximum size 100 pixels)
• small (maximum size 240 pixels)
• medium (maximum size 500 pixels)
• large (maximum size 1024 pixels)
• original
• displaysize The image size for the lightbox overlay shown when the user clicks the thumbnail. Options are the same as for thumbsize, but typically you would use medium or large. If your image files are quite large on Flickr you probably want to avoid using original.

Direct URL attributes:

• src The URL to the picture you wish to use.
• thumbsrc The URL to the thumbnail you would like to use. If this is not provided, the original picture will be used with the width and height properties of the tag set to 100×100.

Common attributes:

• style This is passed through to the enclosing
  that this macro generates. To float the image on the right, use style=“float:right”.
• caption The caption displayed below the image. By default, this is Flickr’s description of the image. to disable, use caption="".
• title The tooltip title associated with the image. Defaults to Flickr’s image title.
• alt The alt text associated with the image. By default, this is the same as the title.