Images help

153 views
Skip to first unread message

Edward Veal

unread,
Jul 23, 2018, 8:13:13 PM7/23/18
to TiddlyWiki
I am looking for how to add images to a tiddler. Can someone provide me some assistance?

Ed

TonyM

unread,
Jul 23, 2018, 8:36:06 PM7/23/18
to TiddlyWiki
Ed,

Perhaps explain a little more what you want to do.

To respond to you open question, here are a few notes

  • Drag and drop images or use the import button to get them into tiddlywiki
  • Research the canonical uri and more for referencing external images
  • Add an icon field to any tiddler and provide an Icon tiddler title for it to display with the title
  • Transclude an image tiddler in your tiddlers text {{imagetiddler}}
  • Use the image widget https://tiddlywiki.com/#ImageWidget
  • Or follow these wikitext instructions https://tiddlywiki.com/#Images%20in%20WikiText

Regards
Tony

Edward Veal

unread,
Jul 25, 2018, 3:40:03 PM7/25/18
to TiddlyWiki
I simply want to add an image to a tiddler.

Here is a copy of the code from the tiddlywiki main page that I can't seem to figure out. 

<a href="https://www.youtube.com/c/JeremyRuston" class="tc-btn-big-green" style="background-color:#e52d27;" target="_blank" rel="noopener noreferrer">
{{$:/core/images/video}} ~TiddlyWiki on ~YouTube
</a>

I presume that I can put images in this dir and then link to them. However I am not finding the :/core/images/ path in my install. 

Ed

Mark S.

unread,
Jul 25, 2018, 4:59:19 PM7/25/18
to TiddlyWiki
Those names are confusing, aren't they? The names of various system tiddlers in TW LOOK like file paths, but they're not.

There's no directory /core/images/video. If you type (or copy) the text $:/core/images/video into a tiddler and preview it, you will see a link to. If you follow the link, you will come to a tiddler that has a SVG image as its contents.

To get an image into TW, you need to either drag and drop the image into your TW (not recommended except for very small images), or use the [img[]] wikitext or the <$image> widget to refer to images that are external to the TW. There are different ways to do it, and some of them will depend on how your are running TW (as a free-standing file or under node.js). See Tony's prior post for pointers what to do.

-- Mark

Edward Veal

unread,
Jul 26, 2018, 12:57:09 PM7/26/18
to tiddl...@googlegroups.com
Mark, 

Thank you for the information this is finally heading me on the right path. I will review Tony's post as I am using the free standing file version. 

Ed


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9b067565-b382-4d66-b3aa-95c57c9dcb95%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--
Edward Veal
Library Technology Consulting: Opening the future together

Edward Veal

unread,
Jul 26, 2018, 2:30:10 PM7/26/18
to tiddl...@googlegroups.com
After further investigation I am still stumped as to how I get an image that is local to my machine to display within a Tiddler. I have no problem getting online images to display. I don't want to rely on having an internet connection to be able to add a photo or other image to a Tiddler. This is a deal breaker for me and if I can't figure it out I will be moving on to other tools. 

Ed

Lost Admin

unread,
Jul 26, 2018, 2:55:50 PM7/26/18
to TiddlyWiki
I'm not sure if you tried this. In case you did not:

  1. Open your tiddlywiki in your browser.
  2. Open your file manager and navigate to the folder that contains the picture you want in Tiddlywiki.
  3. Drag the picture onto the tiddlywiki in your browser. You should see a green bar at the top of the browser page that says, "Drop here (or use the Esc key to cancel)".
  4. Drop the picture there.
  5. This should create a new tiddler with with the words, "These tiddlers are ready to import:" near the top.
  6. Press the import button.
  7. Save your tiddlywiki.
You should now have a tiddler with a name that is the filename you dragged.

You can then treat it like a tiddler that is an image.

Note: The image is a copy of the image file encoded in base64 (I believe) and is a part of the tiddlywiki file. Adding many large images can make loading tiddlywiki very slow.

Edward Veal

unread,
Jul 26, 2018, 5:07:03 PM7/26/18
to tiddl...@googlegroups.com
Thank you that was exactly what I needed. I don't know where those instructions are but this works wonderfully. 

Ed



For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages