Image visability and user-friendliness

278 views
Skip to first unread message

Kelli Jae Baeli

unread,
Jul 2, 2019, 7:54:17 PM7/2/19
to TiddlyWiki
As a recovering OneNote user, i really need to place images in tiddlers regularly, and be able to see them, and it seems that's a feature that doesn't exist. I hoped it would be as simple as uploading into a tiddler, but i see that it would be cumbersome to overload one file with the number of images i will need.

By way of explanation, I am using this for personal and business, but will probably not be sharing any of it. I wanted something to keep track of a wide range of complex information, and maintain control over it, without fear that some software company was going to close down or change things adversely, or charge me stupid amounts for the privilege of using their precious software.
{sorry...Ms. Betty Bitterness just took over. I'm back now}
So...I'm an Indie Author and publisher, and as such, i need information about book files, to include a thumbnail of the covers. I also take screenshots of rankings and publication data...I suppose I could stop doing screenshots for some things, but that's always been a go-to method of saving info from other sites. Maybe there's another way. Still need those covers though.
I hope this won't  be a deal breaker for me, as i think TW is exactly what I've been needing. Hopefully there's a workaround. i would think it's odd not to have that ability, since it's all html/css and that's meant for webpages, which are full of images...but then, this TW application is being used differently i suppose. I understand too many images would bloat the file and cause issues, but I hope there's a way to fix it. Currently also working on the issues with many html files and where they're getting saved, but having an answer to this one would also be a great help.
Appreciate any insight, here. Thanks.

Using TW Desktop, Windows 10, Firefox.

Mark S.

unread,
Jul 2, 2019, 8:51:51 PM7/2/19
to TiddlyWiki
You can drag and drop images into your TW (at least on Firefox ... don't know about the others).

On Firefox, you can also use the built-in screen shot tool and copy the text to the clipboard. Then go to your TW and paste. Import. Rename.

These methods are easy, but in the past they came with the caveat that images will quickly bulk up your TW file and slow it down. TW 5.1.20 & prerelease has indexing built in, allowing much larger files, though performance is still going to depend on things like system RAM. You might want to experiment with the prerelease and see how it works for you. (https://tiddlywiki.com/prerelease/)

Another approach is to use node.js and lazy-loading, so image files only have to be loaded when needed.

Good luck

TonyM

unread,
Jul 3, 2019, 7:21:24 AM7/3/19
to TiddlyWiki
Kelli

I am confident you can do what you want with tiddlywiki and if you scale it up and start to hit performace issues there are plenty of tips and tricks like external images, html etc.. To build quite a large resource. Fortunaly with tiddlywiki you can benefit from website technologies yet use your own disk, and it is easy to import and export, move to a server etc... So you will be future proofed.

Not with standing the above I suggest some forthought on how you organise your information and look at multiple wikis in each major area. Knowledge and information management is quite a complex field but with the tiddlywiki platform you have more power and choices than anything else I have used.

Remember with tw files or folders another piece of information is only a html link or drag and drop away. I have wikis that link to wikis and bundles of tiddlers for tools I want in more than one tiddler. Being organised is a good start but not essential.

Sure tiddlywiki is an investment in time but it continues to return more all the time to me, and the community is great.

I have being using the classic and tw5 versions for almost 10 years and just build what I need when I need it.

Regards
Tony

PMario

unread,
Jul 3, 2019, 3:37:57 PM7/3/19
to TiddlyWiki
Hi Kelli,

Welcome to the club!

The easiest way is, to store your wiki.html file in a directory and your images in an eg: \images subfolder. 

If you want to use them in TW just

 - create a new tiddler. eg: test.jpg
 - create a field named: _canonical_uri
    - with the value: .\images\test.jpg
 - set the type field to: image/jpeg
 - save - done

Images stored in this way can accessed directly from the browser, without any server, as long as the file is accessed from a local PC.

have fun!
mario

PS: We should definitely create a "_canonical" .. drop area for external files, for the lazy folk, like me ;)


Mark S.

unread,
Jul 3, 2019, 4:04:40 PM7/3/19
to TiddlyWiki
You omitted that you also have to save an image file to .\images and copy the name.

It's a lot of steps, especially compared with other products like Evernote. Dragging and dropping the images, would be the most straight-forward approach, and, if I understand correctly, should be feasible with the changes coming in 5.1.20. You could even use a TW on node to collect the data, and then use Bob or the tools in TW to extract and externalize the data when you have more time. But of course, you would have to be running node/Bob at least once in awhile.

The problem with external files is that it becomes messy the minute you want to organize anything. For instance, if you want to move all of 2019's files to images/2019, you'll have to find some way to find the corresponding tiddlers and then rename the _canonical_uri contents. Another problem with the _canonical_uri approach is that the path can not be easily redirected. So, for instance, you might want \images on your desktop machine, but a path that leads to a google drive folder on a mobile device. The workaround is to present all your external images through a macro, where the base path can be changed as needed. But wouldn't it be great if a base-path were already built in?

Jed Carty

unread,
Jul 3, 2019, 5:32:52 PM7/3/19
to TiddlyWiki
If you are using everything locally and you are managing a lot of wikis than I suggest you try out Bob. I made it to manage a lot of wikis. Also it can help a lot with managing images, there is a plugin for it that saves the images externally and creates a _canonical_uri tiddler for it automatically on import.

TonyM

unread,
Jul 3, 2019, 5:38:32 PM7/3/19
to TiddlyWiki
Mark,

I had considered in the past allowing images to be imported into tiddlers but providing a mechanism to export them to \images leaving behind the _canonical_uri contents, if done with a batch process even easier. On a node server it may be more complex.

Regards
Tony

Kelli Jae Baeli

unread,
Jul 17, 2019, 3:03:35 PM7/17/19
to TiddlyWiki

2019-07-17 13_51_31-TiddlyDesktop Backstage — behind the scenes of TiddlyDesktop.png

2019-07-17 13_50_45-G__TiddlyDestop html_Literati.html_backup.png

Thank you, Mario. I have read all the documentation I can find, and there are some serious shortcomings for those of us who are not geeks, as it were.....so that's why I'm still unclear about a few things. I only have a few more issues to fix before i can actually get some work done in tandem with TiddlyDesktop.
To that end...

I think I only understood part of your instructions--it's unclear how it then achieves the end result. As you can see from the screenshots, I created the test tiddler as you said, and i also created a subfolder on my hard drive, where my html is. But now, i'm not sure how that gets images into tiddlers. How do I load an image there? I assume I create a tiddler like that with whatever image, whatever name, with those settings, each time i need an image, but not sure how to get the image THERE.

And then, what? does it save the uploaded image to that images subfolder, and pull from it later when i need it? How? DO i click on a link in that tiddler, or what? (to access an image later).

Kelli Jae Baeli

unread,
Jul 17, 2019, 3:15:05 PM7/17/19
to TiddlyWiki
holy crap, you guys. this mostly sounds like BLAH BLAH BLAH to those of us who don't do this sort of thing. I love the idea of TW, but if i can't get it to handle the simple organizational and data management things i need, such as an easy way to have a small thumbnail image (like a book cover included in book data) i might have to do without and find another way.

I have many thousands of files i have to manage. Just today, i ran my duplication finder and got rid of 400 THOUSAND duplicate files. That happens because i have so many things to keep track of, and most programs just don't handle it well (take that back, One Note did handle it very well, but Microsoft screwed it up with their proprietary bullshit and their extortion of funds (another reason i quit using Word/Excel/etc). Now i can't and won't use them for that reason.

But I'm still left with a slew of complex information that i need to streamline and organize somehow, and a business to run that does not slow down for this stuff. Which is why i was excited about TW. I don't have a problem dealing with a learning curve, but i do have a problem with documentation that is not written for everyone, instead of just for geeks. (I don't mean GEEKS in a derogatory way. I love and respect geeks. But hey, not all of us are that way. We have strengths in other areas)
I'd love to pilot that spaceship, but alas, my experience is with terrestrial CARS.

Mark S.

unread,
Jul 17, 2019, 5:04:28 PM7/17/19
to TiddlyWiki
Do you have an image called "test.jpg" in the images folder below where your TW file is? I'm sure PMario did not mean to imply
that a file "test.jpg" will magically appear in the images directory. Your image of your directory doesn't show the names of any
image files, so it's hard to give literal advice. If you do have "test.jpg" in the images sub-directory, then when you close the tiddler
(leave the edit mode) the image of the file should appear.

You can then apparate that image from any other tiddler by transclusion:

{{test.jpg}}

Substitute the name of your image file wherever it says "test.jpg" above, including in the _canonical_uri field.

On a side note, the last time I checked, OneNote was still free. Did they change that?

Good luck!

A Gloom

unread,
Jul 17, 2019, 8:20:36 PM7/17/19
to TiddlyWiki
take a look at this example tiddler, drag and drop the .tid file onto your TW or use import in the

TW is very customizable whin it comes to combining text with other multimedia

If you don't mind working with some html-- typing in between div tags-- this makes a tiddler into a grid for displaying text and multimedia in the same page, side by side if desired, the borders can be removed or altered to taste. For images you'll have to go into edit mode and enter your image files names and paths.  I could do something to reduce the pre-existing code clutter but it would take away ability to custom fine tune each tiddler and its blocks.


image display in tiddler.tid

TonyM

unread,
Jul 19, 2019, 12:51:45 AM7/19/19
to TiddlyWiki
As is evident from your snapshot you are still using tiddlydesktops backstage. It is not for this use. Stop doing it and follow the instructions already shared on building your own wiki. With all due respect you are doing it wrong and you can not expect effective support if you are not following the standard practice.

I know no other way to say this but directly. I explained its not your fault you have taken a wrong path, but you have.

My offer still stands to help you with a screen share if you give me control or I do a presentation for you.

Regards
Tony

Stobot

unread,
Oct 10, 2019, 9:38:41 AM10/10/19
to TiddlyWiki
I know this thread is a little old now - but I still can't figure out how to install the ServerImages plugin - has anyone done it? I'm using BOB.

Ed

unread,
Oct 10, 2019, 6:09:51 PM10/10/19
to tiddl...@googlegroups.com
Hi Kelli Jae Baeli,

I certainly would second that, please do try-out Jed's software,
in due time.Bob has a learning curve for the uninitiated and Jed
is still making changes for the better, but the potential is great!

Cheers! Edm.

Op woensdag 3 juli 2019 23:32:52 UTC+2 schreef Jed Carty:

Jed Carty

unread,
Oct 11, 2019, 4:13:53 AM10/11/19
to TiddlyWiki
stobot,

I have it working, but I think that I am using modified versions that I never got around to putting online anywhere accessible.
The different versions of ServerImages and Bob use slightly different paths which makes them not play well together. I will try and push out new versions of Both today to make things work.

Stobot

unread,
Oct 11, 2019, 6:25:48 AM10/11/19
to TiddlyWiki
Awesome - thanks Jed,

More basically though for when it *is* available. The only plugins I'm used to are kind of drag and drop from other tw sites. I don't understand how to install from github. Do I just drag and drop all the .js ones over? Copy and paste the .js ones into my tw?

Jed Carty

unread,
Oct 11, 2019, 3:30:18 PM10/11/19
to TiddlyWiki
If you are using BobEXE the server images plugin should be there, you just have to enable it using the Bob interface. 

Go to $:/ControlPanel -> Bob Settings -> This Wiki -> Manage Plugins then click the `Update Plugin List` button, check the plugins you want to active, click the `Save Plugin Selection` button then refresh the page.

For getting plugins from GitHub/GitLab there is an interface for that too, but it hasn't been extensively tested and is poorly documented.

Go to $:/ControlPanel -> Bob Settings -> Server -> Fetch Plugins to see it

I will try and get the publicly available plugin repo I have updated so that you can fetch the plugins using the TWederBob plugin (also included in BobEXE)
Reply all
Reply to author
Forward
0 new messages