Mephisto - thickbox install

Having thumbnail images on your article will reduce loading time and does not interrupt the 'flow' of the page. However, linking to a full sized picture can mean multiple browser tabs or, worst of all, opening them in the same page.

Thickbox opens the full sized image in the same page 'on top' of the article. Clicking anywhere in the image will then close it to allow the reader to carry on uninterrupted.

To begin, log into your VPS and navigate to your Mephisto directory:

cd ~/public_html/mephisto_install/

Next, using subversion, check out the plugin:

script/plugin install
http://svn.appelsiini.net/svn/rails/plugins/filtered_column_thickbox_macro/

The install script will automatically place the plugin files inside the vendor/plugins directory and place the required javascript and css files in the relevant directories.

To allow Mephisto to use the thick box plugin, you must add links to the javascripts and stylesheet, so log into the Mephisto Admin Area and click on the 'Design' tab and then the layout.liquid link.

In the header section of the template, you need to place these three lines:

{{ 'thickbox' | stylesheet }}
{{ 'jquery' | javascript }}
{{ 'thickbox' | javascript }}

Using liquid syntax, the first line loads the thickbox stylesheet and the second two load the required javascripts.

Using Thickbox

When drafting an article in Mephisto, upload an image in the usual manner. This will automatically create a very small thumbnail image for previews within the Mephisto Admin Area and a normal sized thumbnail (as well as the original full sized image).

Now, when you are writing an article, any images go between starting <filter:thickbox> and finishing </filter:thickbox> tags.

The normal thumbnail image is displayed in the published article and, if clicked, the plugin will show the full sized image 'on top' of the article and, if clicked again, will close it.

Image captions are always a good idea and these are placed after the image url as follows:

<filter:thickbox>
http://www.example.com/assets/2007/5/10/image1.jpg Image Caption
</filter:thickbox>

Grouping images together for a slide show can be useful and this is done by adding group="somename" to the opening tag and adding multiple images between the tags:

<filter:thickbox group="imagegroup">
http://www.example.com/assets/2007/5/10/image1.jpg Image 1 Caption
http://www.example.com/assets/2007/5/10/image2.jpg Image 2 Caption
</filter:thickbox>

Thickbox will automatically add 'next' and 'prev' links to multiple images.

Naturally, you are not limited to images with Thickbox, you can use other files and documents. Further information on Thickbox can be found on the official demonstration page.

Plugin author: Mika Tuupola

PickledOnion

Digg it | del.icio.us | reddit | StumbleUpon