Recent Changes - Search:

Cookbook

PmWiki

pmwiki.org

ThumbnailLinkToImage

Summary: Produce a thumbnail link to a full-sized uploaded image that, in turn, links back to the page.
Version: 20060315
Prerequisites: Designed for PmWiki 2.1
Status: Pending code review by Pm
Maintainer: Hagan Fox
Categories: Images

Description

With this recipe you can easily create a thumbnail link to a page that displays a full-size image, which in turn links back to the page containing the thumbnail link. Use several thumbnail links on a page to easily create an image gallery.

By default the thumbnail image will be 80px high. You can specify another height or a width, or both if you want to change the aspect ratio of the thumbnail.

Installation

Download the thumblink.phpΔ script and place it in your cookbook/ directory, then tell PmWiki to use it by putting the following command somewhere in your local/config.php configuration file:

## Enable (:thumb <image_filename>:) markup that displays an image.
include_once("$FarmD/cookbook/thumblink.php");

Note that you can use the "$FarmD/" part of the command even if your wiki is not configured as a WikiFarm. Be sure to use double quotes ("), not single quotes (').

Usage

Basic usage is just to do

(:thumb <image_filename>:)

The default thumbnail height is 75 pixels. A proportional width will be provided by the browser. Optionally you may specify a different width, a height, or both as in

(:thumb <image_filename> width=120:)

or

(:thumb <image_filename> height=100:)

or

(:thumb <image_filename> width=120 height=90:)

Notes

The script's code needs to be scrutinized by Pm and/or someone else who knows the PmWiki internals well (because I don't). Use at your own risk until then.

For this release, the image must be capable of being displayed with "Attach:<image_filename>" without specifying any group or page. (Attachments can be by site, group, or page. The default is by group, meaning the image just needs to be uploaded in the same group.)

This recipe cannot be used together with ThumbList as they both have the same command (:thumb:).

Possible enhancements

  • Somehow use an #anchor to reduce scrolling.
  • Use JavaScript?
  • Captions?

Comments

This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.

This misses the point of thumbnails, namely to provide a smaller preview so that not the whole, big image file has to be transferred.

Suggestion: Change it so that the thumbnail gets a set prefix.

One would have to upload the thumbnail separately, though. Anke March 23, 2006, at 04:58 AM

I have to respectfully disagree that the point of using thumbnail image links is to preserve bandwidth by having a second version of an image in a smaller size. The main point is to preserve page area in the layout (pixels in the browser's viewport), not bandwidth. That's not to say preserving bandwidth isn't sometimes important or using a separate thumbnail image isn't desirable. :-) Ideally the web server should create the thumbnail image automatically. --Hagan

I vote for saving bandwidth. My parents live at the lake and rely on dialup. --Susan

Customise the image page
I wasn't happy with the image appearing on a blank page, so I customised the page that the full size image appears on. In thumblink.php, near the bottom, you'll find a line which reads:

if (!$text) $text = '(:noleft:)(:noright:)(:notitle:)(:noheader:)(:nofooter:)'

After some experimentation, I found that you can remove the (:no*:) markup to have certain sections of your wiki appear on the page. Ex. I wanted my left menu bar to appear, so I removed (:noleft:). I also wanted a link on the image page to let the visitor know they can click the image and be taken back to the gallery page. So, I replaced the above "if" line with the following:

if (!$text) $text = 'Click the below image to return to the gallery[[<<]]'

Contributors

Update Me Pm, Much of the code started out as code that was appropriated from the PmWiki core. I'm especially concerned about the code that follows "// TODO: I don't know what this does!". -Hagan

Edit - History - Print - Recent Changes - Search
Page last modified on May 29, 2008, at 04:32 PM