Improving documentation on adding images

[anavarre]

I'm new to TiddlyWiki, so please bear with me as I feel really dumb filing this issue already :-)

I can't seem to be able to add local images to my TiddlyWiki instance. I volunteer to improve the documentation when I know how to actually easily include images.

• Server is running on 127.0.0.1:8080 over node.js
• Notes are under version control (Git)
• Tree is such as below:

kb
-- kb/.git
-- kb/tiddlers
-- kb/tiddlywiki.info
------ kb/tiddlers/test.jpg
-------- kb/tiddlers/img/test.jpg

Above, please note that I've added the same image (test.png) in two different locations to rule out possible incompatibilities with subdirs.

Tried:

[img[test.jpg]]
[img[img/test.jpg]]
[img[tiddlers/img/test.jpg]]
[img[http://127.0.0.1:8080/test.jpg]]
[img[http://127.0.0.1:8080/img/test.jpg]]
[img[http://127.0.0.1:8080/tiddlers/img/test.jpg]]

None of this worked nor by trying to use the HTML <img> tag either. I also tried variations (jpg, jpeg and png images) and I'm never able to get them to show so I'm a bit at loss and wonder what I'm doing wrong.

FYI I read the notes Images in WikiText and ExternalImages on the official site but it didn't help me it seems.

[tobibeer]

Correct me if I am wrong, but... the (kinda weird) thing is, to access external images you need the _canonical_uri thing: http://tiddlywiki.com/#ExternalImages

Alternatively, what you may need to use instead is actully the native html <img/> tag and its source attribute, e.g:

<img src="img/test.jpg" alt="test"/>

[anavarre]

That's the thing. Ideally I wouldn't want to access external images at all (this was only to test things). Plus, the documentation about external images would make me avoid them as much as possible.

using them breaks the single file pattern of TiddlyWiki.

I did try the <img> HTML tag before and it didn't work. I always end up with a broken image in the tiddler.

[tobibeer]

using them breaks the single file pattern of TiddlyWiki

that pattern is definitely not for me, I actually don't care about it at all so long as I can summon whatever tiddlers / contents I like to have a gathering in my TiddlyWiki

I did try the HTML tag before and it didn't work. I always end up with a broken image in the tiddler

can you be more specific? what / how exactly did you try?

[anavarre]

I think a screenshot might better explain everything:

[Jermolene]

Hi @anavarre

There's a couple of things going on.

First, to add a jpg/png image to a wiki folder you need to add an accompanying .meta file to provide the metadata fields associated with the image (eg, it's tiddler title). See how the images in the tw5.com wiki are stored for an example:

https://github.com/Jermolene/TiddlyWiki5/tree/master/editions/tw5.com/tiddlers/images

Secondly, external images are not yet supported in the client-server configuration:

#1000

But lazily loaded images are supported:

http://tiddlywiki.com/#LazyLoading

[anavarre]

Aha! Still no bueno, but I hope we're on the right track. I've added a test.jpg.meta alongside test.jpg - Content of the file looks like this (source field seems optional):

title: test.jpg
type: image/jpeg
tags: picture

Then tried the below variations without more luck:

<img src="img/test.jpg" alt="test"/>
<img src="test.jpg" alt="test"/>
[img[img/test.jpg]]
[img[test.jpg]]

Looks to me that TiddlyWiki needs the relative path anyway so I shouldn't be able to link to the test image without having ''img/" in the path. Tried that out of despair, TBH ;-)

I have to run now and will come back to this tomorrow. I'd like to thank you both for your time already!

[Jermolene]

Try {{test.jpg}}

—
jeremy.ruston@gmail.com

On Fri, Dec 12, 2014 at 6:32 PM, Aurelien Navarre
notifications@github.com wrote:

Aha! Still no bueno, but I hope we're on the right track. I've added a test.jpg.meta alongside test.jpg - Content of the file looks like this (source field seems optional):

title: test.jpg
type: image/jpeg
tags: picture

Then tried the below variations without more luck:

<img src="img/test.jpg" alt="test"/>
<img src="test.jpg" alt="test"/>
[img[img/test.jpg]]
[img[test.jpg]]

Looks to me that TiddlyWiki needs the relative path anyway so I shouldn't be able to link to the test image without having ''img/" in the path. Tried that out of despair, TBH ;-)

I have to run now and will come back to this tomorrow. I'd like to thank you both for your time already!

Reply to this email directly or view it on GitHub:
#1222 (comment)

[anavarre]

Unfortunately this didn't work either (note that variations with {} don't even return a broken image). I've attached a screenshot to show all path/method variations.

If we step back a bit, could this not be related to the way I'm trying to add images but to some other configuration issue instead?

[Jermolene]

Hi @anavarre

If you've successfully added the image with the title "test.jpg" then you should be able to see "test.jpg" listed in the "All" tab of the sidebar.

Secondly, the fact that you've put the image in a folder called "img" inside the "tiddlers" folder is ignored; the title of the tiddler is as given in the .meta file, and doesn't reflect the directory from which it was loaded.

Thirdly, with an image loaded in this way, the only syntax that should work to display it are the following:

[img[test.jpg]]
{{test.jpg}}

Fourthly, it looks like maybe you've got a blank line at the start of the .meta file, which is incorrect.

[anavarre]

you should be able to see "test.jpg" listed in the "All" tab of the sidebar.

If you're talking about the More tab in the sidebar, then the All vertical tab, then, perhaps this is my issue. I don't see the test.jpg file listed there.

Secondly, the fact that you've put the image in a folder called "img" inside the "tiddlers" folder is ignored; the title of the tiddler is as given in the .meta file, and doesn't reflect the directory from which it was loaded.

I'm not sure I parsed that right. As I understand:

• Images should not be put into an img folder but just under the tiddlers directory? If yes, how does that scale when you have thousands of images? (per this folder organization, I'm under the impression that an images folder would not be ignored, correct?)
• the title of the tiddler is as given in the .meta file do you mean there has to be a 1:1 naming relationship between the image file and the tiddler? If so, what happens when you have several images to add to a tiddler? Also, in your example, I understood that title: Motovun Jack.jpg references the filename, not a tiddler's title?

Thirdly, with an image loaded in this way, the only syntax that should work to display it are the following

Ack.

Fourthly, it looks like maybe you've got a blank line at the start of the .meta file, which is incorrect.

This is an artifact of minimizing the shell prompt. There's no extra line/space that would be an issue here.

[anavarre]

BTW I tried putting the test.jpg and test.jpg.meta files directly under the tiddlers dir but this didn't make any difference.

Didn't think it would be so complicated to add an image. Very sorry to bother you like that.

EDIT: aha, I tried something that I was fairly certain wouldn't make any difference. Restarted the node.js server and now I am seeing the image both registered in the All vertical sidebar...and on the test tiddler.

I'm still trying to understand what is happening here and I'll brb with more as soon as I've performed a few additional checks.

[Jermolene]

Didn't think it would be so complicated to add an image. Very sorry to bother you like that.

If it's any consolation, adding an image to a Node.js wiki is easy. It's not previously something that we've had trouble with, so I'm assuming that there's something really basic going wrong that I'm missing.

I'm not sure I parsed that right. As I understand:

Basically, you can organise the contents of the tiddlers folder into subfolders as you like, but the pathnames from which tiddler files are loaded do not affect the title of the tiddler. The title is specified in the .meta file in the case of images, or in the .tid file for ordinary tiddlers.

do you mean there has to be a 1:1 naming relationship between the image file and the tiddler

No. The filename of the image is not related to the title of the tiddler.

Also, in your example, I understood that title: Motovun Jack.jpg references the filename, not a tiddler's title?

No, the title field specifies the title of the tiddler. The filename is ignored. It just happens that in that example the filename and the tiddler title are the same.

I guess to take this further it may be useful for you to share a repo/gist with the content of your wiki folder so that I can look it over?

[anavarre]

@Jermolene many thanks for the additional clarification. Please refresh the issue page and have a look at my updated comment above :-)

Overall good news and a node.js server WTF I'm not currently able to explain.

[Jermolene]

Ah, good to hear @anavarre. Other people have certainly been caught out by expecting changes in the filesystem to be dynamically loaded without a restart.

If you do need to add tiddlers to a running instance you can use the HTTP API to make changes.

[anavarre]

Other people have certainly been caught out by expecting changes in the filesystem to be dynamically loaded without a restart.

Oh, this is normal behavior, then? I've been living under the promise that node.js was all about real-time. Would that be any relevant to try and improve the TiddlyWiki documentation by stating that images not being displayed might be because the node.js server needs to be restarted first?

[Jermolene]

Oh, this is normal behavior, then? I've been living under the promise that node.js was all about real-time.

It's how TiddlyWiki was designed. The best, most general way to interact with a running wiki is via the HTTP or JavaScript API, rather than manipulating the file store directly (which we may also support in the future).

Would that be any relevant to try and improve the TiddlyWiki documentation by stating that images not being displayed might be because the node.js server needs to be restarted first?

Yes, except that this isn't just about images, it applies to any modification to the contents of the wiki folder.

[anavarre]

Submitted a PR #1227 - See you there.

Once again, many thanks for your patience and understanding here. Very much appreciated.