The Thumbnail Plug-in allows Fluid users to display any image or link content on any webpage in a Cover Flow or iPhoto-like display. The content displayed by the Thumbnail Plug-in is configured using URL Patterns and CSS Selectors. By default, the Thumbnail Plug-in includes a small set of Patterns and Selectors for some popular websites. Users can add additional Patterns and Selectors themselves or edit the default set. Advanced users can also use XPath Expressions instead of CSS Selectors to select page content for display.

To configure the plug-in, launch any Fluid SSB, open the Preferences window, and click the icon for the Thumbnail Plug-in preference pane.

[figure1 popup]

The Plug-in should appear in: popup menu specifies the position the Plug-in will appear in the SSB. Choose from Drawer, Split Panes, Utility Panels or HUD Panels.

[figure2 spinner]

The Maximum number of thumbnails chooser limits the number of thumbnails displayed by the Plug-in. Limiting the number may be beneficial for memory or performance concerns.

The table below contains the default set of URL Patterns and CSS Selectors for generating thumbnails on popular websites. The + and - buttons below the table allow removing and inserting table rows.

URL Pattern Syntax

URL Patterns allow matching of large groups of similar URLs with a single, simple pattern. Every character in a URL Pattern simply matches itself except for the special character "*", called "Star". Star will match any number (including zero) of any character in the portion of the URL in which it is placed. Star is what gives URL Patterns their power and makes them useful.

For example, the URL Pattern:

*fluidapp.com*

will match all of the following URLS (and many many more):

• fluidapp.com
• www.fluidapp.com
• http://fluidapp.com
• http://fluidapp.com/
• http://www.fluidapp.com/
• https://www.fluidapp.com/
• https://de.fluidapp.com/
• http://fluidapp.com/community

but will not match any of these URLs:

• http://fluid.com
• http://fluid_app.com
• http://fluidapp.org
• http://fluidapp.net

CSS Selector Syntax

CSS is a W3C specification for styling HTML (and XML) content supported by WebKit (the rendering engine on which Fluid is built). Part of the CSS specification is the CSS Selector syntax which provides the ability to select specific portions of HTML or XML documents. The Thumbnail Plug-in uses CSS selectors to target portions of the current page\47s HTML content for display as thumbnails in Cover Flow or an iPhoto-like display.

Most HTML content consists mainly of Elements and Attributes. Elements markup text by enclosing portions of the content with tags like:

\46lt;p\46gt;I am \46lt;i\46gt;very\46lt;/i\46gt; \46lt;b\46gt;hungry\46lt;/b\46gt;.\46lt;/p\46gt;

The \46lt;p\46gt; tags makeup a p Element (for paragraph), and the \46lt;i\46gt; and \46lt;b\46gt; tags make up i and b elements (for italic and bold).

Attributes provide extra information (or metadata) about Elements. For example:

\46lt;img src="foobar.jpg"\46gt;

Here, the img Element has a src Attribute. As one might guess, an HTML img Element places an image in the HTML content, and the src Attribute specifies the image resource to be displayed.

HTML links are created with the a element (for anchor). All a Elements require an href Attribute which specifies the link\47s endpoint URL. For example:

\46lt;a href="http://fluidapp.com"\46gt;

Will create an HTML link to the Fluid website.

So much for HTML. Now on to some CSS Selector examples. The following CSS Selector will match any a element on the current page:

a

The following CSS Selector will match any a Element with a title Attribute with a value of foo on the current HTML page:

a[title="foo"]

Match any img Element with a width Attribute with a value of :

img[width="200"]

In CSS selectors, there are two very special Attributes id and class. id attributes are supposed to uniquely identify elements on the current page (although page authors sometimes break this rule). And class attributes are supposed to place related elements into groups. Because these two attributes are so common and serve such important purposes, they have special shortcut syntaxes in CSS Selectors.

The following CSS Selector will to match any Element with a id Attribute with a value of foo:

#foo

Match any Element with a class Attribute with a value of bar:

.bar

The name of the Element to be matched can also be added to these Selectors.

Match any a Element with a id Attribute with a value of foobar:

a#foobar

Match any Element img with a class Attribute with a value of baz:

img.baz

Finally, to specify the content to be displayed by the Thumbnail Plug-in provide a CSS Selector that matches an a or img Element on the current page. The value of the href Attribute of any matched a Element and the value of the src Attribute of any matched img Element will be displayed as thumbnails in Cover Flow.