Image generated from the value of a field in a different tiddler

[Anthony]

All,

I have got myself into a pickle and so confused that I can no longer see the wood for the trees...

1. I have two tiddlers, A and B.
2. Tiddler A stores information in fields about an organic compound - one of the fields is called 'structure_file' and gives the relative location of an image file.
3. In tiddler B I wish to load the image for the compound in tiddler A, which I assume is some form of a transclusion {{A!!structure_file}}.
4. Eric has already warned me that I cannot mix different types of syntax, {{...}} with [[...]], so I've been attempting to create a macro along the lines of another conversation (https://groups.google.com/g/tiddlywiki/c/bTLtqQn-1GA/m/9316shQnDAAJ).
5. I have failed.
   
6. I decided to stop when I received a scary red JavaScript recursion error...
   

I'm sure it's not difficult but I'm beaten.

Many thanks for any advice,

Anthony

[soren.b...@gmail.com]

Have you tried the image widget? You might be making this a lot more complicated than necessary...from the letter of what you wrote all you need to do is write this in tiddler B:

<$image source={{A!!structure_file}}>

In other words, you're transcluding the value of the structure_file field of A as the value of the source image widget.

Now if you need the tiddler A to be dynamic, rather than hard-coding it in the wiki text, you'll have to get a bit more complicated. You might be tempted to try this:

\define makeTransclusion() {{$(myTiddler)$!!structure_file}}

<$set name="myTiddler" value="A">  <!-- or however A gets determined -->

    <$image source=<<makeTransclusion>>>

</$set>

But if you try that, you'll see the image link is broken. If you use your browser's developer tools to inspect the image, you'll see it links literally to "{{A!!structure_file}}".

Instead, when you add in the macro, you have to use $wikify, because the macro is returning raw wikitext, and TiddlyWiki does not automatically parse wikitext when passing it directly to HTML/widget attributes -- only when displaying it in the tiddler.

\define makeTransclusion() {{$(myTiddler)$!!structure_file}}

<$set name="myTiddler" value="A">  <!-- or however A gets determined -->

  <$wikify name="reference" text=<<makeTransclusion>>>

    <$image source=<<reference>>>

  </$wikify>

</$set>

[Anthony]

Thank you very much - using the image widget works great and will be fine for the moment. In fact I did have a look at it before but I think I was so frazzled with it all that I didn't use it correctly. I'll look at your other suggestion as well shortly - it seems similar to the method I've used for creating external links from data in a field.

Take care,

Anthony

[Eric Shulman]

On Tuesday, November 24, 2020 at 11:37:52 AM UTC-8 soren.b...@gmail.com wrote:

Have you tried the image widget? You might be making this a lot more complicated than necessary...from the letter of what you wrote all you need to do is write this in tiddler B:

<$image source={{A!!structure_file}}>

In other words, you're transcluding the value of the structure_file field of A as the value of the source image widget.

Now if you need the tiddler A to be dynamic, rather than hard-coding it in the wiki text, you'll have to get a bit more complicated. You might be tempted to try this:

\define makeTransclusion() {{$(myTiddler)$!!structure_file}}

<$set name="myTiddler" value="A">  <!-- or however A gets determined -->

    <$image source=<<makeTransclusion>>>

</$set>

But if you try that, you'll see the image link is broken. If you use your browser's developer tools to inspect the image, you'll see it links literally to "{{A!!structure_file}}".

The reason the image is broken is because after the constructed widget parameter is "returned" by the macro, it is not parsed a second time to evaluate the transclusion.

However, if you place the entire $image widget inside the macro, you can forego the use of $wikify, like this:

\define showStructure(tid) <$image source={{$tid$!!structure_file}} />

<<showStructure "A">>

-e

[soren.b...@gmail.com]

Haha, good point, I'm overcomplicating things too. :-)

[Anthony]

So, I now have

<$image source={{A!!structure_file}} alt={{A!!title}} />

which I expected to would give the title of Tiddler A when the mouse hovered over the image (much as would occur with [img[description of file|folder/file.png]]). However, I note that the alt text only appears if the file is not found.

Is this the expected behaviour and is it possible, using $image, to produce the 'hover-over' text.

As ever, many thanks for any input.

Anthony

[Javier Eduardo Rojas Romero]

On Wed, Nov 25, 2020 at 09:35:25AM -0800, Anthony wrote:
> So, I now have
>
> <$image source={{A!!structure_file}} alt={{A!!title}} />
>
> which I expected to would give the title of Tiddler A when the mouse
> hovered over the image (much as would occur with [img[description of
> file|folder/file.png]]). However, I note that the alt text only appears if
> the file is not found.
>
> Is this the expected behaviour and is it possible, using $image, to produce
> the 'hover-over' text.

I think you should use the `title` attribute, instead of `alt`, which,
as you say, is the text shown when the image is not available.

[Eric Shulman]

On Wednesday, November 25, 2020 at 9:35:25 AM UTC-8 Anthony wrote:

<$image source={{A!!structure_file}} alt={{A!!title}} />

which I expected to would give the title of Tiddler A when the mouse hovered over the image

As per the documentation (https://tiddlywiki.com/#ImageWidget), the $image widget supports the following attributes:

source The URL of the image, or the title of an image tiddler

width The width of the image

height The height of the image

tooltip The tooltip to be displayed over the image

alt   The alternative text to be associated with the image

class CSS classes to be assigned to the <img> element

Thus, to get "mouseover" text, use

<$image source={{A!!structure_file}} tooltip={{A!!title}} />  

-e

[soren.b...@gmail.com]

It's worth noting this isn't a TiddlyWiki thing, it's a general web thing. The alt text is a replacement for the image when it's not available (thus the word alternate), while the title text is a supplement to it providing more information. People often get confused and use the wrong one, partly because some browsers way back in the dark ages used to show the alt text when you hovered over an image.

More: https://blog.spotibo.com/difference-between-alt-text-and-title-text/

[Anthony]

Thanks all for the comments. I wondered what tooltip was all about but couldn't see anything to describe what it is or how to use it... but I probably didn't look in the correct place. I have to admit I wasn't aware of the difference between alt and title but glad to know that.

Take care,

Anthony

[Eric Shulman]

On Wednesday, November 25, 2020 at 11:42:17 AM UTC-8 soren.b...@gmail.com wrote:

It's worth noting this isn't a TiddlyWiki thing, it's a general web thing.

It's also worth noting that $image *is* a TiddlyWiki widget and does NOT support use of the title="..." attribute.  Thus, to achieve the mouseover text display, you *must* use the tooltip="..." widget attribute.

-e

[Javier Eduardo Rojas Romero]

On Wed, Nov 25, 2020 at 01:09:02PM -0800, Anthony wrote:
> Thanks all for the comments. I wondered what tooltip was all about but
> couldn't see anything to describe what it is or how to use it... but I
> probably didn't look in the correct place. I have to admit I wasn't aware
> of the difference between alt and title but glad to know that.

`title` is really convenient, and all HTML elements (tags) accept it;
for me, it's a gamechanger, for things like elements in formulas
(MathML).

It's also quite handy for *links*; tiddlywiki has out-of-the-box support
for showing the tooltip of a tiddler in the "title" field, in links to
the tiddler
( see https://tiddlywiki.com/static/tv-wikilink-tooltip%2520Variable.html )

I've started using it for tiddlers that contain definitions, and I'm
quite happy with it, since now I can get a list of links, and check them
out quickly by hovering over each link.