JLiki 8: Linking Images

by JL Beeken on 7-20-2008

As explained in JLiki 6, there are two ways of adding content to your wiki; directly through tiddlers or through linking files. Sometimes you’ll want to add a photo to a tiddler. And sometimes you’ll want to link to external albums and other documents. So it’s time to start talking about making links.

First, you need to think about where you’re going to gather your material. Previously, I made three folders; docs, images, and albums.

Linking Images, TiddlyWiki

An idea I like much better (since I’m starting over anyway) is to make a folder for each person in my MainMenu, using a similar format for their names so I don’t have to keep wondering which way I wrote it. Later I can add folders for other people as needed. That way I can easily see what I’ve collected for each person and look at the contents for different ways of arranging it in my tiddlers. (See JLiki Postscript for an even better idea: narrowing it down to only the main male or female lines.)

I’m not trying to recreate the ancestral indexing of my C-drive. If I did that I’d need an 80GB flash-drive. (Will think about that later.) But there are some documents and photographs that will work well in telling my story. As I’m browsing around my hard-drive I can send copies over to the appropriate folders and more easily focus on the contents there.

Basically, the process is:

Write a summary for each person and gather the relevant files. Or gather the files and then write the summary. Then write or link them into the wiki.

There’s no point getting into a foofaraw over folder and file names and arrangements. People have many different views of what works best for them and the subject has already been beaten to death in many a forum. Please do what suits you. The point is that you need to be able to gather and sort your information, and link some of it into your tiddlers without burning too many brain cells.

Starting with photos, I have one for the Gene Beeken/Baseball tiddler. All padded up and looking like your typical sulking adolescent being made to stand for a picture. Little did he know that this moment would matter to his grandchildren 100 years later, I’m sure.

All I have to do is make a copy, re-size it and put it in his folder. The wiki will take pictures exactly the way they are and I find resizing before linking the easiest and most space-efficient way to do it. Size is all in the eye of the beholder so whatever looks good to you.

The file path is:


This file-path is used for any photo you’re linking into your wiki.

Specifically, in this case:


I type that into the Gene Beeken/Baseball tiddler, and voilà, the picture is there. Add in any accompanying notes and the Gene Beeken/Baseball tiddler is done. Until I find the newspaper clippings.

TiddlyWiki accepts JPG, PNG, BMP or GIF, but not TIFFs.

These are relative paths rather than specific so it doesn’t matter where you keep your wiki folder. If you put the whole project on a flash-drive and mail it to someone they should be able to plug it in and go.

Time-out. If your eyes glaze over when you see URLs and computer code, please resist the urge to run for the hills. For anyone who doesn’t do code like breathing, make a new tiddler called LinkCodes and put it at the top of your MainMenu. Put anything of interest there for reference so you can copy and paste it when you need to. If you don’t want to do that you can wait another week and I’ll tell you how to import mine.

If you don’t resize the picture before linking to it, to resize using html, the code is this:

<html><img src="file:foldername/filename" style="width: 100px; "/></html>
<html><img src="file:foldername/filename" style="height: 300px; "/></html>

(altering px to the desired width or height, not both)

There’s a third way to resize using the ImageSizePlugin. I’ll talk more about plug-ins later.

You can float pictures left and right of the text by putting < or > before ‘img’ like this:


If HTML is beyond you, you can add a white border to the width of a picture that will keep the text from running right up against it, and on a white background you’d never know. Otherwise, pictures are either above or below your text.


Or you can do this:

<html><img style="float: left;" src="file:foldername/filename" hspace="15"></html>

where hspace defines the pixel distance between your picture and the text on the right. You would also add

width: numberpx; or height: numberpx;

before ‘float’ if you’re resizing at the same time. Or you can go the other way and float right.

For those who know how, you can use html anywhere you want in your tiddlers, just wrap the code between <html> and </html>.

For the sake of those who don’t know how, I’m trying not to turn this into a coding nightmare as it would just be a distraction from the main event. You don’t have to know much at all to make a perfectly fine wiki, but those who do can fly ahead with more options. I’m sure it can also be done with CSS but I’m not even going there.

For everyone else, try linking one photo and see how it works. When you’ve done it once you’ll see it’s easy and get over your fear of a foreign language that looks even worse than French.

I usually link photos directly into tiddlers if there’s only one or two. If there’s more I might make an album instead and link to its index file. In this case it looks like any other hyperlink. WW1 Photos. Don’t bother clicking on it. It’s a fake. What I would do is put my WW1 notes into the Gene Beeken/WW1 tiddler and make a link to the album.

[[Name of link|file:foldername/name of album/index.html]]

In this example:

[[WW1 Photos|file:GeneBeeken/WW1/index.html]]

If you haven’t tried it, jAlbum is very good album-creating software and free. It runs on any system that can run Java and does it in 32 languages. Chances are it’ll work for you. Albums can be made with little effort or customized to the nth. Since most of my photos already have IPTC-embedded captions I appreciate not having to re-do those as they can be automatically included in the albums or edited within the software. If you need to add captions, there’s a screen for arranging and annotating your pictures right there.

There are many other album-producing programs: Adobe Elements, XnView, Studioline, Picasa. Wherever you find the index file in the album, that’s what you want to link to.

As I mentioned before, the downside of linked files is that they can’t be searched as if they’re part of the wiki. The wiki can only search itself. If you have Copernic you can set it up under Tool/Options/Files to index any part of your computer and search it. If you’re not running a Windows system there’s probably an alternative.

As soon as it finished indexing, I searched for a phrase I know to be embedded in a photo and it brought it up in the Search results. Brilliant, I must say. I’m not saying this would ever be necessary, just that it’s an option.

Here’s something for your further entertainment. If you want to put a background image into your wiki, add this to your StyleSheet tiddler:

body {background-image: url(file:filename);
 background-repeat: repeat;}

For a pattern, make a small square of something 100 x 100 pixels. For a horizontal gradient, make a strip 20 pixels x 3000. (That should cover most high-res widescreens.) Put it in your wiki folder and link it in.

Next: JLiki 9, linking documents

{ 0 comments… add one now }

Leave a Comment

Powered by sweetCaptcha

Previous post:

Next post: