Inserting a picture in a Tiddler

[Surya]

Hello,
for the first a huge THANKYOU to the developers of TiddlyWiki and to the developers of all the plugins!

My question: How do I insert a picture in a Tiddler so that I can see it? And after synchronising I want to see this picture in the Tiddler on Android too.

I did it with [img[file:///pathtomyfile/titleofthepictue.jpg]]. But I can see only the symbol for a broken picture. I tried it with different pictures.
I synchronise over TiddlyDrive to Google Drive. From there I start always my Wiki.

Thankyou for your help!
Have a good day,
Bettina

[TonyM]

Search in tiddlywiki.com for image you should find your answer.

It's 1am here in Australia. I'll give a better answer tomorrow if no one helps you before then.

You can drag an image file into tiddlywiki and import it then reference it with a transclusion in a tiddler like this {{imagetiddlername}}

External images are a little more tricky.

Tony

[BurningTreeC]

does a relative path work?

like [img[../../picfolder/image.jpg]] - relative to the folder where your tw.html is?

[Mark S.]

The problem is that you need the same address on both platforms. If you're not physically synchronizing (copying the files between devices) then you need the same web address.

For google drive, look at the last (bottom) post here: https://stackoverflow.com/questions/15557392/how-do-i-display-images-from-google-drive-on-a-website

Even though it's the last post, it's the best because the other's were written before Aug. 2016 when Google changed it's policies.

This post tells you how to create an address to google drive that will work on more than one device.

If you are physically synching (not using a cloud address), then you need either to (1) put the files in the same place relative to your TW file and then use a relative path (e.g. "files/mypath/myfile.jpg") or to use a set of macros that will allow you to change the base bath ("files/mypath/") part depending on where the files are located. I've made macros like this, but in reality performance on a small device is so poor that I rarely use it.

-- Mark

[Stan001]

Hello Bettina,

More about linking images into tiddlers with some automation.

https://groups.google.com/forum/#!msg/tiddlywiki/x0t6t1dAKw4/MTym9MUXEQAJ;context-place=searchin/tiddlywiki/Stan%7Csort:date

Take care, 

St.

[Surya]

Hi,

 

thankyou all for your really fast answers :-)

@BurningTreeC: Now that works- after I found the possibility of importing pictures :-)

@Mark S: Unfortunately I didn't understand anything in that link you wrote. I googled and googled for this PHP, but really understood just nothing....

@Stan001: That sounds really great. I also don't want my TiddlyWiki get too big. But unfortunately I didn't understand how to do it. And because I have to build two TiddlyWikis with hundreds of notes in fast time, I couldn't spend so much time for just trying to understand what they are talking about in that link. But maybe one time I'll go back to that and try to learn it....

@TonyM: I didn't find it there. But I tried then again all the buttons in the sidebar. And there was the solution: Over "importing different types of files (i.e. text, images, TiddlyWiki or JSON)".

@all TiddlyWiki-Beginners:

• Klick this "Import"-Button (the button is a paperclip) on the sidebar. If it is not visible, klick the down-arrow for more possibilities, there it should be shown then.
  
• In the PopUp-Window choose your file, double-click it or click on "open".
• Wait until the "Import"-Tiddler opens.
• In the "Import"-Tiddler click on "Import"
• Wait until the "Import"-Tiddler shows the (blue) link of that picture
• For an example, you have a picture called "picture.jpg"
• Now you can in any other Tiddler link it with [[picture.jpg]] or show it with {{picture.jpg}} or [img[picture.jpg]] or show it left-aligned with the size 30% <<image-left "picture.jpg" width:"30%">> 
• You can see that picture now everywhere (Desktop-PC, Smartphone, Tablet), where the TiddlyWiki is synchronized with. I use my TiddlyWiki on Chrome / Linux with TiddlyDrive & Google Drive and on Android (Smartphone & Tablet) also with Google Drive.

Again thankyou all and see you in my next coming questions ;-)

Bettina

[Mark S.]

The problem with this approach is that you can quickly inflate the size of your TW. Depending on the power of your device, somewhere between 6 and 30 megs your TW will become unusable. That is why it is better to link to images outside your TW, either on your device or in the cloud.

-- Mark

[Surya]

Hi Mark,

you're right, I really don't want my Wiki become too big in size. But I don't have the time at the moment for going deep in the other solutions- I really don't understand nothing there. I am a poweruser with my computer, but a simple one ;-)

I searched now for months for a program for writing notes with pictures, tags and formatting, working & synchronizing between Linux and Android. The last 8 weeks I didn't do anything else- working, sleeping, eating and searching / trying programs for notes. There are some great ones, but always something important were missing. I have to build these two Wikis inbetween the next month, and I know, it will be a lot of work....

That's why I cannot google now for days and days for learning the other solutions (PHP and from the link of Stan).

But I am sure, I will do that one time....

Bettina

[TonyM]

Surya,

You have come to the right place but at the wrong time. Tiddlywiki can meet your requirements for sure, but you need to invest a little time and ask the community. 

Perhaps identify how small you can make the image files as a set and see what the total size adds up to. Then either place it in a images folder below or embed them. If using an images folder use dropbox or drive/google drive as tiddlywiki access.

If you decide to use tiddlywiki now just get a tool to reduce the size and quality of your images enough and packing them in a tiddlywiki may be fine. Just use drag and drop once you have your smaller files then organise with tags, lists and transclusion in other tiddlers.

Regards

Tony

[Mark S.]

I've been looking for an information system that does all those things on multiple platforms also. And yes, there's always something missing.

What I'm saying about space is that, with only say 10 regular resolution images, you could bring your tablet or phone-based TW to a halt.

The simplest solution doesn't require any googling. Just put your images in a folder below where your TW is. Let's call it "images". Then just refer to your pictures like:

  [img[images/mypicture.jpg]]

Good luck,
Mark

[Riz]

Your best bet is to embed via canonical uri field and relative linking. It is also the recommended practice.

Refer: https://tiddlywiki.com/#ExternalImages

[Mark S.]

I've tried really hard to understand the point of the _canonical_uri. Everything from the excessively verbose and technical field name to the double-referencing seems to be designed to make linking images more complicated and user unfriendly than it has to. Removing the text field means you have to add your own description field to annotate the image.

About the only advantage is, if you have an image you use more than once, you can quickly re-reference a new file name. But for note-taking, I almost never repeat an image, and I imagine most other people don't either.

Now if the _canonical_uri had a way to switch it's base path address, that would be a real plus.

Better than _canonical_uri is to use a macro where you can change the base path address as you move from platform to platform.  Actually, if you put Tobias' ximg macro in a tiddler, then you can transclude the tiddler just like a _canonical_uri, but in addition be able to change the base path as needed.

-- Mark

[Surya]

Hi,

I made a test now. Most of my pictures in TW will have the size about 150x190 px (about 25KB). This seems to be the smallest size for a view of the picture in TW on desktop and on Android devices is okay.

Importing such a picture increased my TW-file over 0,1MB.

Yeah, Tony, I am almost sure, TW will fit all my needs- maybe even a bit more ;-) And I am really happy about this, after searching and trying so many programs for such a long time....!!! :-)))

I don't know, but I guess, that the solution with such a canonical uri field sounds, like I could learn it- maybe... ;-)

Maybe, someone of you could explain it to me with pictures, Where do I have to do What? Maybe even in german?? My english is... well... a bit simple ;-) I always understand only half of the explainings.

Of course I read the  https://tiddlywiki.com/#ExternalImages (and many other explanations). But I understand only half of it.

Okay, step by step with that link above:

Manually Creating External Images
To manually create an external image just create the tiddler with the appropriate image content type, and add a _canonical_urifield with a URI pointing to the actual image location. 

>>Please tell me step by step, what to do where and how- for the best with pictures please.

Thanks :-)

Bettina 

[Stan001]

Hello Bettina,

I agree with you 100%. - Do not worry it is not just you who misses pictures and mainly the context. - May be I am slow, not experienced enough or whatever, ... but lots of tips, plugins, explanations are wasted on me. A typical example is https://tiddlywiki.com/#ExternalImages. I cannot figure it out within reasonable time and effort. - Does it apply for server version, local version, not a simple example... - I do not ask for explanation, rather pointing out the pattern which happens to me quite often.

I love wiki and use it for many many years and will continue doing so until it proves unusable. At the same time I am not a coder and do not wish to be.

A good day to All.

St.

[Mark S.]

So verwenden Sie "External Image"

(1) Mache einen neuen Tiddler

dann ...





Kannst du verwenden die Tiddler wie {{New Tiddler 2}}  wenn du brauchst ein "Image".

Ich spreche Deutsch nicht, ja?

-- Mark (mit hilfreich aus google, leo.org, verbix.com, duolingo.com)

[Surya]

Well, maybe, we both (and perhaps many more people?) get now a good step by step explanation to do it....

 

HOPING....

I would be happy, if my question would lead to make some more people happy and learn good solutions :-)

[Surya]

:-)))))))

DANKE für Dein (gutes) Deutsch!!

Hey, ich freu mich :-)))) 

Und werde die Beschreibung gleich testen... :-)

[Surya]

Okay, I tested it now.

Should that new tiddler show than the image as an image? If yes, I did something wrong.

The full path of an example picture on my local desktop is 

file:///home/b/m/t/e/f e/b/image.jpg

. I tried it also with

///home/b/m/t/e/f e/b/image.jpg

and with

/home/b/m/t/e/f e/b/image.jpg

and I also uploaded the picture to GoogleDrive, there I got a shareable link with right-clicking and put the link in the path-field of that new tiddler.

But I none of these three ways the new tiddler showed me the picture as an image. I waited until the Wiki saved automatically over TiddlyDrive. Or should I have waited longer?

Or does such a tiddler doesn't show the picture as an image?

If yes, what do I have to do then, when I want to see the picture as an image in another tiddler?

[Mark S.]

On Monday, December 18, 2017 at 12:45:25 PM UTC-8, Surya wrote:

Okay, I tested it now.

Should that new tiddler show than the image as an image? If yes, I did something wrong.

Yes. Ja. Jes. Sí.

The full path of an example picture on my local desktop is 

file:///home/b/m/t/e/f e/b/image.jpg

. I tried it also with

///home/b/m/t/e/f e/b/image.jpg

and with

/home/b/m/t/e/f e/b/image.jpg

 

Can you show a screen shot of your tiddler in edit mode?

Danke,

Mark

[Surya]

Die Screenshots:

[Birthe C]

I think you forgot to set the content type 

Den mandag den 18. december 2017 kl. 22.26.42 UTC+1 skrev Surya:

Die Screenshots:

[Mark S.]

Ich bin dumkoff.

You need to specify image type ...




In the type

On Monday, December 18, 2017 at 1:26:42 PM UTC-8, Surya wrote:

Die Screenshots:

[Mark S.]

Yes. In my defense, that step isn't mentioned in "ExternalImages" at Tiddlywiki.com either ;-)

Thank you,
Mark

[Surya]

You're right.

I edited it now in all 4 examples.

Result: Now it shows an image, BUT: It's only the symbol of a broken image....

This image isn't broken, but nevertheless I'll try it with another one. 

[Surya]

I tried it again with two other image- the same result = broken image symbol....

Ahhh... maybe, it is because the image type in TW is called jpeg, but my pictures have the ending jpg?? 

[Mark S.]

No, it should work even if you chose "png".

It has to be a path issue.

This one should work:

/home/b/m/t/e/f e/b/image.jpg

If you put this in your browser address bar and enter, does the picture show?

-- Mark

P.S. The googledrive one will probably not work because it is in a frame. Since 2016 Google has tried to prevent their service being used as a file server (dropbox made the same change).

[Surya]

My browser made automatically the name

file:///home/b/m/t/e/f e/b/image.jpg

Didn't matter, how I inserted it (with or without "file://").

And: Yes, I could see the image then :-)

But, still in TW it doesn't work.

I will try another thing: Save, close and reopen the Wiki... 

[TonyM]

Mark,

Is it not the case that references to files outside the browsers download directory etc... is restricted?

As for websites do they not need to be under the the tiddlywkis location unless they can be references using a URL at an address hosting the file?

I may be wrong, but it would explain some of this

Regards

Tony

[Birthe C]

I tested and it works for me no matter where I have the folder with the image if I wrote the path correct.

It will not be easy to move the tiddlywiki though.

Birthe

[Mark S.]

No -- the restriction generally only applies to saving files and finding file paths. But since Surya is on linux it's possible the browser doesn't have rights to some particular directory. That's why I suggested testing the path in a browser tab.

-- Mark

[Surya]

So, what can I do now to get it work?

How can I find out if it is like this?

>>>But since Surya is on linux it's possible the browser doesn't have rights to some particular directory. That's why I suggested testing the path in a browser tab. 

 

And what to do then?

[Birthe C]

Hi Surya

You were able to see your image in the browser, you did test that.

I think you have to look into your path. When I tested it none of my folders had any spaces in their names. Browsers changes the way they are written filling out the spaces with %20. Also never use special characters, I always have to be careful myself being danish (æ,ø and å). Also remember it is case sensitive.

Really I think you problem is down to folder names with multi words and spaces between them.

Birthe

[BurningTreeC]

I think that, too

I'm also on linux and tested with some files and folders with spaces.

You need to replace the spaces in the filename with %20

The browser does that automagically - but tw not.

the best thing would be to name folders and files WITHOUT spaces, you could use _ instead of spaces - so you won't have to replace spaces with %20

That avoids having problems like this one

if you have a lot of files I can provide a bash script to replace all spaces with underscores in their names

[Mark S.]

I think it's a pathing (not a real word). Probably a simple thing.

If you have the image displayed in your browser tab, then select the url (address) and copy that. Paste that value into _canonical_uri. When you copy from the address bar, the browser will change spaces to %20 for you and you know for sure the path is right.

Then we get to the issue of how to start the address -- e.g. file:/// or file:// or just /  . In the past it is has varied from platform to platform and browser to browser.

This is why I prefer to use relative path and put it below the tiddlywiki:

  mytiddlywiki.html

Images

myimage.jpg

Then the path is always Images/myimage.jpg -- very simple and you can zip the top directory and use it again somewhere else on any platform.

Viel Glück!

[Surya]

Hi @ all,

I made everything now....

The full path of tested picture is without any spaces now, and has only normal letters (lowercase and uppercase).

I copied it from my file-explorer into the _canonical_uri-field.

I copied it into the adressbar in the browser (the browser showed the picture as a picture) and from that adressbar into the _canonical_uri-field.

I copied the picture into different folders on my desktop (home/Bettina/myhome/Downloads), (home/Bettina/Desktop) and copied these pathes into the _canonical_uri-field.

Nothing worked....

What does "case sensitive" mean? Maybe I am doing something wrong with that?

How can I do this?:

I prefer to use relative path and put it below the tiddlywiki:
  mytiddlywiki.html

Images

myimage.jpg

I have my TW-file on GoogleDrive (because I want it to save automatically and not to download it always with "file1", "file2" and so on).

But someone wrote here, that pictures from GoogleDrive doesn't work in the _canonical_uri-field?!?

???

Bettina

[Mark S.]

Can you export one or more of your _canonical_uri tiddlers and post it here? If it's not personal?

Click on the down arrow in the right-hand corner of the tiddler.

Click on export tiddler

Choose "tid"

Save to your disk

Good luck,
Mark

[Surya]

In this Tiddler I put the path name from my file-explorer from the computer:

Which trials should I post here too? Because if I would post here all possible trials, it would be quite a lot with all possible trial-combinations....

[Mark S.]

A silly question -- you know you have to save the tiddler (stop editing it) to see the result?

I used virtual box to try your tiddler in a linux environment with your exact path and tiddler (I granted 777 all the way down). I downloaded a file and renamed it to your file name. The attached shows the tiddler in edit and display mode. It seems to work fine.

Suggestions, anyone?

-- Mark

[Surya]

;-))) Ähhh, yes, I saved it and waited until the Wiki completely saved to GoogleDrive.

That finished Tiddler you show (the 2. one) does not show my picture.... 

[BurningTreeC]

isn't this a case for a teamviewer session?

I'm offering my support

Am Freitag, 15. Dezember 2017 11:03:57 UTC+1 schrieb Surya:

Hello,
for the first a huge THANKYOU to the developers of TiddlyWiki and to the developers of all the plugins!

My question: How do I insert a picture in a Tiddler so that I can see it? And after synchronising I want to see this picture in the Tiddler on Android too.

I did it with [img[file:///pathtomyfile/titleofthepictue.jpg]]. But I can see only the symbol for a broken picture. I tried it with different pictures.
I synchronise over TiddlyDrive to Google Drive. From there I start always my Wiki.

Thankyou for your help!
Have a good day,
Bettina

[Surya]

Hi,

you're really great- you all :-)) Thanks for all your help :-)

@BurningTreeC: Yes, I would like to have your support :-)

Thanks in advance! 

[Birthe C]

Surya is right about Tiddlywiki on Google drive not showing images. I just tested with my own TW.

Surya now you learned me something, I had never tried tiddlywiki on Google drive before ;-)

Birthe

[Mark S.]

Wait -- maybe I'm asking the wrong question. Your TW, are you viewing it as a local file (the url bar says file:///....mytw.html) or directly on google drive (http://google.drive/something/mytw.html).

Thanks!
Mark

[Surya]

@Birthe: :-))

@Mark: I open GoogleDrive, go to the Wiki, click with right and click on "Open with Tiddly Drive".

[Mark S.]

Oh that's it. You can't view local files from a web address. You can't view images from googledrive as images. You might be able to view them in a frame:

<iframe src=http:/....linke to my image on google drive />

Mark

[Surya]

Unfortunately.... broken picture-symbol....

Did I do it right?:

Right-clicking on the picture in GoogleDrive, clicking on "Get shareable link", copied that link (https://drive.google.com/file/d/1mx-Zaw4rM3l4wUN9oKZ9stc6AJgZa5xr/view?usp=sharing) and wrote it like this in the _canonical_uri-field:

<iframe src=https://drive.google.com/file/d/1mx-Zaw4rM3l4wUN9oKZ9stc6AJgZa5xr/view?usp=sharing />

Type of the Tiddler: image

Or anything wrong?

[Birthe C]

Ich denke, Mark hat sich trotz Google Drive einen Strohhalm geschnappt. Sie teilen nur einen Link zur Datei auf Google Drive. Sie erlauben uns nicht, die Bilder zu zeigen. Dropbox hat das gleiche getan.

Birthe

[Mark S.]

It looks like GoogleDrive blocks that. Maybe someone will know a fix.

I see that there is unofficial software for GoogleDrive to work on Linux like it does on Windows/Mac. Perhaps if you install that then you can work with TW on your desktop and have it save to GD. But then you have the problem of how to save your TW file. The default save mechanism works everywhere.

Sorry I could not help more ;(

Mark

[Mark S.]

Ok. This works.

Go on top of your image in GD and right click. Copy the image address.

You can use THAT address in <iframe> or _canonical_uri.

BUT ... I don't know if it works forever, or just until google refreshes.

-- Mark

On Tuesday, December 19, 2017 at 1:31:22 PM UTC-8, Surya wrote:

[Surya]

Hi and nice christmas holidays (or how do you say it in englisch?) :-)

I GOT IT :-)))) !!! .... almost.... ;-)

I moved from Chrome to Pale Moon Browser with my Wikis.

The whole story:
I moved from Firefox to Pale Moon Browser after the fucking big Update of Firefox.
But Chrome seemed to be the only way for me (that I could manage with my small computer know how) to handle my TiddlyWikis on Linux and Android simultaneously. With GoogleDrive and TiddlyDrive.
But Chrome got on my nerves- it was so slow and doesn't have good addons.
So I looked again, if I couldn't handle my Wikis with Pale Moon.
It works now with an older version of Tiddlyfox, syncing with GoogleDrive over Insync. On my Android devices I have GoogleDrive too and AndTidWiki and Autosync GoogleDrive.
Now everything is better now- especially much faster.
And: _canonical_uri - Images are working now :-))

My question now:
But: When I put the local path from my computer in the field, it can see the picture in the Wiki when opening the wiki on my computer, but it shows broken picture on my Android device.
With the links from GoogleDrive it shows only broken picture- on Linux and on Android.

When I make two picture-tiddler with _canonical_uri-field, one with the computer path and one with the Android-path and put both tiddlernames in the tiddler, where I want to see the picture, then I have of course one broken picture and one with the shown picture. In this way it works, but it doesn't look nice and it increases the size of the wiki.

Well, I could make two Wikis- one for the computer and one for Android. But that would make a lot more of work and I would have to open always both wikis on my computer and work always on both simultaneously. A bit hard....

Is there any other way, I can make the pictures visible on Linux AND Android?

Regards, Bettina

[Surya]

Okay,
I found an answer by myself too for:

Is there any other way, I can make the pictures visible on Linux AND Android?

I upload my picture to an free upload-service, so the picture gets an URL.
I don't need anymore an extra image-tiddler, I can insert the link directly into the wanted tiddler.
For right size and right position, I found out, how to do this:

<img width=120 src="URL-adress of the picture" align="left">

Everything is great, the picture has a smaller size, is on the left side and the text after the picture is on the right side of the picture.
But, the text is without any space just right of the picture, so it is a little bit hard to read it. And a list I made inside this text is a little bit inside of the picture (the bullets are inside the picture).
I tried now so many possibilites (googling and googling...), but nothing made a space between picture and text.
Could you please help me with that?
Thanks, Bettina

[Birthe C]

You could try

<img width=120 src="URL-adress of the picture" style=" float:left;padding: 0 1em 0 0;"/>
Your text goes here
<div style="clear:both;line-height:0px;"></div>

You have to clear not to have your image flow over the bottom border of the tiddler if the text is short.

Birthe

[Surya]

 Hi Birthe,

yeahhh, that it is :-)
Now everything with the pictures and the text around it is fine!

Thank you a lot!!

Thanks @all

Bettina