How to Embed an Image?

[Aidan Grey]

I'm a noob, ish, and not having any luck undersdtanding what details I've been able to find.

Specifically, I have a few images I want to embed in my TW, so that internet access is irrelevant. Most are imgur or other websites, but a couple, I need to see and work with them whether I have access or not. 

How do I do that? I am using the "new" TiddlyWiki, not the classic (though I used to use the classic, years ago). Generally, in Firefox or Chrome.

[Jed Carty]

There are two ways, one is to make the image part of the tiddlywiki html file, which can slow down loading if there are too many. If you are always going to have access to the local file system (either on the same computer or through some service like dropbox) you can link to a local copy of the image.

Either way you need a local copy of the image.

To embed the image in your wiki you can either drag the file from a file browser into your wiki, or use the import function of tiddlywiki by clicking on the import button and then selecting the image file you want to include using the file browser.
To display the import button to controlpanel -> Apperance tab -> Toolbars tab -> Page Toolbar tab and then check the box next to the paperclip icon, the import icon should appear in the sidebar next to the home and save buttons.
Once you have imported the image like this it is a tiddler and is part of your wiki.

To embed a local image in your wiki it is easiest to use the _canonical_uri field. You put the image either in the same folder as your wiki or in a sub folder (I use a folder called images), then, assuming you are using a folder called images located in the same folder as your wiki, you make a new tiddler and give it a field called _canonical_uri and in that field put ./images/(imagename)
Where you replace (imagename) with the name of the image you want to display, complete with file extension. When you have done that the tiddler should display the image and it can be transcluded or displayed using the [img []] syntax or the image widget.

There is some more about this here. There should be two tiddlers open, one talking about images added to the wiki and one talking about local (external) images.

[Aidan Grey]

Thank you! That worked. The phrasing of some of these tuts leaves something to be desired.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/S8ieFgmorkw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Eric Shulman]

On Monday, March 30, 2015 at 12:31:39 PM UTC-7, Jed Carty wrote:

There are two ways, one is to make the image part of the tiddlywiki html file, which can slow down loading if there are too many. If you are always going to have access to the local file system (either on the same computer or through some service like dropbox) you can link to a local copy of the image.

Here's how I do *both* embedded and local images... without any need for setting "_canonical_uri":

1) place your image files in a local sub-folder called "images/"

2) drag and drop the files into your TiddlyWiki to make base64-encoded binary tiddlers (the image filenames will be the tiddler titles)

3) rename each binary tiddler to add "images/" to the beginning of each title

4) use "[img[images/filename.ext]]" syntax to embed the images in your content

Because the images are stored as tiddlers, the [img[images/...]] syntax will display the internal base64-encoded images.  However, if the document starts to get too big, you can always just *delete* some or all of the images tiddlers... the embedded [img[images/...]] will then simply use the external, local image files instead, without having to change your content.

Note that the "images/" prefix on the tiddler names is simply to allow you to keep the images in a subfolder.  If you keep your images in the same folder as your TiddlyWiki document, then you can drag and drop the images, skip the renaming, and just use "[img[filename.ext]]" to embed them in your content.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

"Inside TiddlyWiki: The Missing Manual"

https://www.indiegogo.com/projects/inside-tiddlywiki-the-missing-manual/x/8816263

Note: the IndieGogo funding campaign has ended,

but direct fundraising continues below...

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact