Image before Tiddler possible?

[peter....@hotmail.de]

Hello all!

I am fairly new to TiddlyWiki, but piece by piece I'm gettin into it.

There is one thing I would love to have in my personal Wiki. I use icons a lot in my daily pc routine, so I am searching for a code sniplett or a markup which alows me to add an image before the Tiddler text. Is this possible?

Thanks a lot!!!

[Hegart Dmishiv]

To simply insert an image in a tiddler, see Images in WikiText for the [img[path/to/image.jpg]] construct. There are other, more advanced methods using ViewTemplates, if that answer doesn't go deep enough for you.

If you want to add an image so that it appears below the tags and above the tiddler's text field, for instance, you can edit the list field of the $:/tags/ViewTemplate shadow tiddler to insert your chosen template tiddler which contains the image(s).

Hope this helps,

Hegart.

[c pa]

There are a bunch of images in the tiddlywiki core

You can list them by creating a tiddler with this as the text. You can place them into your text by copying the {{image name}} text into your tiddler. I personally haven't yet figured out how to remember the method to paste new images into TW but, once you get one in, you can transclude it into other tiddlers.

\define getImage(image)
$image$ `{{$:/core/images/$image$}}`<$transclude tiddler="$:/core/images/$image$" />
\end
<$list filter="[all[shadows+tiddlers]removeprefix[$:/core/images/]]">
<$macrocall $name="getImage" image=<<currentTiddler>> />
</$list>

[Mat]

Hi Peter,

it's funny (...I should probably say that with quotes around it) but there are a number of ways to go about it. If you clarify more what you mean, chances are we can help you zoom in on one of the better ways. For instance, what types of images are you referring to (you mention icons) and how many? One important thing to know is that because TW is a single html file, it will (just like for a "webpage") take longer time to load if there is a lot of heavy graphics in it. For this reason, it is generally recommended to include images as links rather than as actual embedded images. However, just like with the core icons, sometimes it just makes sense to really include them in the document. You can import an image by simply dragging and dropping it onto your TW in the browser window but, again, take care with bigger+multiple images. (BTW, I'm sure you know of image compression tools like tinypng.com which may be useful.)

And to insert the image "before the text" for just a few instances, the easiest way IF you've made the image into a tiddler, is to use transclusion, i.e

{{title of your image tiddler}}

<:-)

[peter....@hotmail.de]

Hi. 

Ok, sorry. Here some more informations.

This is a picture of an actual Tiddler with a picture which I inserted via [img[images/Book.png]]. The red arrow indicates what I want. The book icon should be in the same line as "Inhalt" (Tiddler-Title), but be the first object in that line. Something like an initial. 

The second picture shows the layout I wish to have. I added a line for Subtitle which I plan to add to in my header block... again without knowing how to archive that. If not, the size of the icon will be smaller

As the Tiddler-Title can't be edited in the edit window, it seems to be an stylesheet solution isn't it? Unfortunate I am not advanced for that in the moment. 

The Icon you see here is 100x100 pixel in size. Probably I am going to resize them to 50x50. So there are no plans for a huge amount of high-res pictures for every Tiddler. Only some tiny helping icons.

I will look into Transclutions. A first peek shows me some very interesting possibilities, but I am not shure if that gave me the look I want.

:)

 

[Evolena]

Hi Peter,

You can try to use the field "icon" for your tiddler, with the name of the tiddler containing your icon (see for example the tiddler TagManager; you can use any image, not only the built-in svg icons). It will be before the title, and resized to ~33x33px.

[peter....@hotmail.de]

Hello again. It has been a while since my last post.

Unfortunatelly my TiddlyDesktop was a little bit broken before I could try some of your advices.

I learned a lot about including pictures to tiddlers. But I am sorry so say none of your tips gave me the appearance I was looking for. Adding Pictures with the Icon tag was interesting, but at some point all the documentations became like black magic to me. I often got very confusing because of the mixture of different languages. I got the changes from tiddlywiki markup to html language in the examples I found, but if it comes to css/php...javascript??? I was out.

Nevermind. I figured out the most promising solution would be to create an individual stylesheet. This video (https://www.youtube.com/watch?v=Jva7Azqu0hs) gave me the basics of how to do it. But I don't know where to start.

The idea is to add a new div whith margin left before the tiddler-title. But how can I create such a new element?

Is it possible to add the icon I want for the tiddler via a tag? Or maybe a field? (What are fields. Some kind of variables?)

If someone is willing to help me a little, I am keen on getting that thing done. If anybody has a individual stylesheet to share with me I would be very gratefull. 

;)

[Mat]

Peter, do what Evolena suggested. To clarify;

1. Import your images.
   
2. In the tiddler you want to use it, create an icon field for it - i.e; in the tiddler edit view, you see the features to create new fields at the bottom. Type in "icon" as field name and the name of the image as field value and click "Add".
   
3. Save tiddler.

Easy peasy. And if you later update the image (i.e import a new image and give it the same title as the last image tiddler) it will automatically update in all the places you're using it.

<:-)

[peter....@hotmail.de]

WOW! Great, there it is.

Thank you all so much! Now I did one more step to master that black magic stuff!

^^

[peter....@hotmail.de]

Ok, additional question:

I try to enlarge the Icon via Stylesheet. So I made a new Tiddler with the Tag $:/tags/stylesheet and named it MyStylesheet

Then I searched the html tag and the css markings for the image. The html-code looks like below.

How exactly do I write my Stylesheet. I tried several variations but without any succes.

The red square in the picture below shows the position I would like the most. I am not a html pro, but I am afraid that this isn't possible with the embedding in the title container. 

So am I right. With the default Stylesheet a tagged icon will always position before the Tiddler-title? Does this mean I could define a new field named "Pictogramm" and tag my Symbol with it. Then I need to add that element to the tc-tiddler-frame container.

[Mat]

The use of the icon field likely brings some premade formats with it. 

It is a bit unclear for me exactly what it is you're asking, but here is an article I wrote on more general method for controlling the position and everything for a "hooked image", i.e it does not use the easy-peasy icon field method. BTW, the easiest way to experiment with this (and many other things) is probably by using the SideEditor plugin.

<:-)

[Jeremy Ruston]

Hi Peter

> How exactly do I write my Stylesheet

Here’s a very rough start. Try the following in your stylesheet:

---

body.tc-body .tc-tiddler-title-icon {
background: <<colour background>>;
position: absolute;
margin-left: -2em;
}

body.tc-body .tc-tiddler-title-icon svg,
body.tc-body .tc-tiddler-title-icon img {
width: 2em;
height: 2em;
}

---

Best wishes

Jeremy.

[peter....@hotmail.de]

Hi Mat,

Your Hooker Method is exactly what i am looking for.

Do you think it's possible to combine your hooked picture with some kind of field and gave them a position which is defined in a stylesheet? As far as I can see I would insert your code snipplet in every new Tiddler. 

I would prefer a little automated generation. Similar to the icon-method, I want to tag my pictogramms with lets say "Picto". While adding a new Tiddler, I add a field "Picto : somepictogramm.png". So it should be possible to create a Stylesheet for "Picto" with the coordinates top left of the Tiddlers Title?

[peter....@hotmail.de]

Jeremy thank you! Thats it.

You are great!

Now I am curious about a second symbol for the second headings with mats hooks.

[Rafael Oliveira]

Hi everyone, I'm bringing up this issue again because I also have this issue but with a small difference. I'm new here, in cases like this would it be better opening a new issue or it's ok to write on old ones like I'm doing now?

I have the same issue of peter but in my case I'd like to bring this image from a webpage... Like I'd normally do inside a tiddler with  [img[https://mypage/img.png]]. Is it possible to do? Or does it work only if I import my image to TiddlyWiki?

[Eric Shulman]

On Tuesday, July 28, 2020 at 8:00:01 PM UTC-7, Rafael Oliveira wrote:

I have the same issue of peter but in my case I'd like to bring this image from a webpage... Like I'd normally do inside a tiddler with  [img[https://mypage/img.png]]. Is it possible to do? Or does it work only if I import my image to TiddlyWiki?

There are four ways to show images in TW5:

* using embedded image tiddlers (encoded binary as base64 text in tiddlers with the type field set to a suitable image/* MIME type

* using external URL references (e.g., https:/mypage/img.png)

* using the _canonical_uri field to create image tiddlers that point to external URI references

* using pure HTML syntax <img src="..."> just like any other web page

see this PermaView link at TiddlyWiki.com for more info:

https://tiddlywiki.com/#Images%20in%20WikiText:%5B%5BImages%20in%20WikiText%5D%5D%20ImageWidget%20ExternalImages

enjoy,

-e

[TW Tones]

Rafael,

Just read the first three paragraphs here, and ignore the node JS stuff.

https://tiddlywiki.com/#ExternalImages

I suggest searching tiddlywiki.com before the forums because if you are not careful you will come up with old an superseded information. eg April 2016 was more than 4 years ago.

Regards

TW Tones

[Rafael Oliveira]

Using the _canonical_uri solves the problem of the icon with an external image. However, I'd like to find a way to do it in a more automated way because my main goal is to integrate TiddlyWiki with another external web application that I'm developing...



Basically, I have an API of images with all tiddlers' titles... The address is something like the following:



http://localhost:9999/myapi/images?name={{{tiddler's title is here}}}




For me it would be great if I could add this icon directly on the .tid file. I imagine something like:




created: 20180624045100371
list:
modified: 20180814143935323
tags: [[sample]]
title: This is the title of my tiddler

icon: http://localhost:9999/myapi/images?name={{{title}}}

type: text/vnd.tiddlywiki

Is it possible to do something like that on TiddlyWiki? For me that would be perfect because it'd be a simple way of having an icon that depends on the title of the tiddler that is being created...

Automating the _canonical_uri seems a little hard for me because I'd have to create a new different tiddler for each image. Besides that, I'd still have to find a way to fill the icon field in an automated way (which I don't know if it's a simple thing to do)... Do you see alternative solutions to this problem?

A different approach that I've thought would be giving up of the "icon besides the title idea" and just putting it on the first line of the tiddler... So it'd be something like:

created: 20180624045100371
list:
modified: 20180814143935323
tags: [[sample]]
title: This is the title of my tiddler

type: text/vnd.tiddlywiki

[img[http://localhost:9999/myapi/images?name={{{title}}}]




But for this solution I'd need two different things:

1. Getting the title of the tiddler from within it and using it as a parameter for my link
2. Configuring TiddlyWiki to include [img[http://localhost:9999/myapi/images?name={{{title}}}] on the first line of all new tiddlers that are created

Are those two things possible?

Pointing me to the right directions here would help me lot already :)...  Now I'm still a little lost on where I should start with tiddlywiki :)

[Eric Shulman]

On Tuesday, July 28, 2020 at 10:52:11 PM UTC-7, Rafael Oliveira wrote:

For me it would be great if I could add this icon directly on the .tid file...

Is it possible to do something like that on TiddlyWiki? For me that would be perfect because it'd be a simple way of having an icon that depends on the title of the tiddler that is being created...

Automating the _canonical_uri seems a little hard for me because I'd have to create a new different tiddler for each image. Besides that, I'd still have to find a way to fill the icon field in an automated way (which I don't know if it's a simple thing to do)... Do you see alternative solutions to this problem?

Indeed, that is the issue.  Automatically showing an icon next to the title requires having an icon field in each tiddler.  However, the value of that field must be a tiddler title, rather than an external URI.  Thus, if you have a tiddler named "SomeTiddler", you would set the icon field to "SomeTiddlerIcon", and then in that separate tiddler, you would add a field named "_canonical_uri" with a value equal to the URI of the external image.  However, this would mean having double the number of tiddlers.

Since you refer to the tiddler having a ".tid" file, I assume you are using the Node version of TiddlyWiki which store each tiddler as a separate file (as compared to the "single-file" version of TiddlyWiki, which stores all tiddlers within the TiddlyWiki HTML file itself).  If that is the case, then it should be a relatively simple process to write a script that adds the "icon: ..." field definition into each .tid file and also generates the corresponding "SomeTiddlerIcon.tid" file to specify the _canonical_uri value.  One difference from your hypothetical example above... you would need to write the full URI in the _canonical_uri field as that field doesn't get any further processing when used by the default TiddlyWiki templates.

A different approach that I've thought would be giving up of the "icon besides the title idea" and just putting it on the first line of the tiddler... 

But for this solution I'd need two different things:

1. Getting the title of the tiddler from within it and using it as a parameter for my link
2. Configuring TiddlyWiki to include [img[http://localhost:9999/myapi/images?name={{{title}}}] on the first line of all new tiddlers that are created

Are those two things possible?

Yes.  Both of these are possible... and you can even get the image to appear next to the title as you originally intended.

Start by creating a tiddler (e.g., "ShowIcon") containing:

\define myIcon()  <img style="float:left; height:3em;" src="http://localhost:9999/myapi/images?name=$(currentTiddler)$" />

<<myIcon>>

1) The first line is a *macro* that constructs standard HTML image syntax to show the external image with the name of the current tiddler automatically appended into the src URI

2) This line also applies "inline CSS" syntax (style="...") to make the image float left and resize to 3em height (the image width will scaled proportionally)

3) The second line invokes the macro to show the image

4) Add "$:/tags/ViewTemplate" as a tag on that tiddler.  This will cause the tiddler content to automatically be displayed as part of the output of every tiddler in your TiddlyWiki.

5) Add a field named "list-before" with a value of "$:/core/ui/ViewTemplate/title" to the tiddler.  This will place the content before the tiddler title of every tiddler.

Note that the "3em" height specified in the CSS is to match the default height of the tiddler title.  You can adjust the CSS height value to suit your needs.

That should do it.  You should now see the corresponding external image scaled to fit next to the tiddler title of each tiddler.

Let me know how it goes...

enjoy,

-e

[Rafael Oliveira]

I've just tested the second solution here and I have to say that it works perfectly for what I'm doing :)

Just to give it a little more context. The result of this solution is the following:

The API that I've mentioned mixes the images that I have in a centralized folder based on the keywords that I'm using. In my case, the keywords are words that begin with ":". Now I can dynamically create icons for my tiddlers!!

I just have two curiosities now:

1- On the first solution it would require me to create a script to modify the .tid files... So far it's ok.. The way I usually run a TiddlyWiki server is using the pm2 service manager, so restarting tiddlywiki is possible with one command: pm2 restart tiddlywiki. The problem here is that restarting tiddlywiki this way makes the server down for some seconds and besides that I still need to reload the page for the changes to be updated. Is there any smarter way of doing that? Perhaps an API where I can tell TiddlyWiki that it needs to reload its tiddlers? Or a way of creating a shortcut that reloads them?

2- The last curiosity is just a small detail that wouldn't be a problem if not possible... But considering that my keywords are words that begin with ":" on edit mode, would it be possible to force tiddlywiki to make all words that begin with ":" to be bold on the title or change their color? To illustrate better what I mean, my last screenshot would become something like the following:

Is something like this possible in TiddlyWiki?

Thanks for all the responses, I feel I'd never find out about how I could create the last macro if I tried to do that all by myself.

[Eric Shulman]

On Wednesday, July 29, 2020 at 11:08:59 AM UTC-7, Rafael Oliveira wrote:

I've just tested the second solution here and I have to say that it works perfectly for what I'm doing :)

YAY!

 

2- The last curiosity is just a small detail that wouldn't be a problem if not possible... But considering that my keywords are words that begin with ":" on edit mode, would it be possible to force tiddlywiki to make all words that begin with ":" to be bold on the title or change their color?  Is something like this possible in TiddlyWiki?

Almost anything is *possible* in TiddlyWiki!  :)

For this one, you will need to customize the default $:/core/ui/ViewTemplate/title definition.

1) Edit $:/core/ui/ViewTemplate/title

2) Find this line:

<$view field="title" />

3) Replace it with this:

<$list filter="[{!!title}split[ ]]" variable="word">

   <$set name="chars" filter="[<word>split[]]">

      <$list filter="[enlist<chars>first[]match[:]]" emptyMessage=<<word>> >

         @@color:green;font-weight:bold;<$text text={{{ [<word>split[]rest[]join[]] }}} />@@

      </$list>&nbsp;

   </$set>

</$list>

Notes:

1) The first $list splits the title into separate words, omitting the spaces between words

2) The $set then splits each word into a list of characters 

3) The second $list tests to see if the character list starts with a colon

4) If it doesn't, then the emptyMessage clause is used to simply output the word without any changes.

5) If the word *does* start with a colon, then the word is split, the first character is removed and the rest is re-joined and the output is wrapped with CSS to set the styles however you like.

6) Following the list is an &nbsp; (HTML "non-breakable space" entity) to replace the space that was removed in step 1

Give it a try and let me know how it goes...

enjoy,

-e

[Rafael Oliveira]

Thanks again! That's getting very cool :)

[Mat]

2- The last curiosity is just a small detail that wouldn't be a problem if not possible... But considering that my keywords are words that begin with ":" on edit mode, would it be possible to force tiddlywiki to make all words that begin with ":" to be bold on the title or change their color?

Considering your style tweaks, you may be interestd in LinkStyle.

<:-)