Integrating Highslide JS into Movable Type

I had been intending to put some photos in this blog from time to time. However Movable Type does not provide any tools beside a simple thumbnail and pop-up window options.

But I wanted something cooler than that such as overlays and in-window-pop-ups provided by Highslide.

However, it is not straight-forward to put Highslide galleries into Movable Type. I googled a bit over the weekend and I could not find any plug-ins offering a solution. Well, except for a japanese blog, where a solution was described, but in japanese. With the help of Google Translate and some common sense I was able to come up with a solution, which I also used on the two posts with Prague photos.

Here it is:

Go to /lib/MT/Asset folder inside where your MT installation lives on your server. This is cgi-bin/mt by default.
Backup Image.pm in this folder, and open the original file in your favorite text editor.

Find the following lines inside the as_html subroutine:

if ( $param->{thumb} ) {
$text = sprintf(
        '<a href="%s"><img alt="%s" src="%s" %s %s/></a>',
        MT::Util::encode_html( $asset->url ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $thumb->url ),
        $dimensions,
        $wrap_style,

And change them into:

if ( $param->{thumb} ) {
$text = sprintf(
    '<a href="%s" class="highslide" onclick="return hs.expand(this)" >
    <img alt="%s" src="%s" %s %s/> </ a> ',
    MT::Util::encode_html( $asset->url ),
    MT::Util::encode_html( $asset->label ),
    MT::Util::encode_html( $thumb->url ),
    $dimensions,
    $wrap_style,
);

This causes all your thumbnails to become Highslide links. This is what I wanted anyway but if you don’t want this, undo your changes and start looking for another solution.
Now you just have to insert your Highslide scripts and configuration between the <head> and </head> tags in the templates where you want to be able to use Highslide. If you want to be able to insert Highslide thumbnails in all pages and entries, it is best to put the Highslide scripts into the default “HTML Head” template of you Movable Type installation. I am not providing any code for this since it depends on your Highslide installation and configuration. Look at the source of this page to get an idea…
Now all images with thumbnails should show Highslide thumbnails and enlarge if you click on them. Other images are not affected.

Integrating Highslide JS into Movable Type

Categories:

Tags:

1 Comment

Leave a comment

Search

Pages

Categories

Monthly Archives