IMG Tooltip

142 views
Skip to first unread message

Stuart Amor

unread,
Aug 7, 2018, 6:26:38 AM8/7/18
to tiddl...@googlegroups.com
I would like the tooltip for an inserted image to be a transcluded field from within the associated image tiddler.  I have played around with a few options, this is what I believe has been my best shot, however the tooltip macro whilst correctly getting the image tiddler name doesn't get resolved correctly:

\define caption(tiddler) {{$tiddler$!!caption}}

\define image(tiddler)
[img width=80 ["<$macrocall $name="caption" tiddler=$tiddler$/>"|$tiddler$]]
\end

<<image "test.jpg">>


Mat

unread,
Aug 7, 2018, 6:39:09 AM8/7/18
to TiddlyWiki
I'm unsure why you have two separate macro calls in your example. Regardless, maybe this works:


\define image-inner() [img width=80 [$(caption)$|$(tiddler)$]]

\define image(tiddler)
<$vars caption={{$tiddler$!!caption}} tiddler='$tiddler$' >
<<image-inner>>
</$vars>
\end

<:-)


Jeremy Ruston

unread,
Aug 7, 2018, 6:54:22 AM8/7/18
to tiddl...@googlegroups.com
Hi Mat
This example illustrates some of the pitfalls of using text substitution with macros:

* It will fail if the tiddler title contains ]], }} or !!
* or if it ends with a single !
* or if it contains a single quote
* It will fail if the caption contains a vertical bar | or double closing square brackets ]]

An alternative implementation might be:

\define image(tiddler)
<$tiddler tiddler=<<__tiddler__>>>
<$image source={{!!title}} width=80 tooltip={{!!caption}}/>
</$tiddler>
\end

<<image "Motovun Jack.jpg">>

There are several points:

* using the <$tiddler> widget to reference the image tiddler so that we can use text references to refer to the fields
* using the ability to refer to macro parameters as variables by wrapping it with double underscores
* using the <$image> widget rather than the shorthand syntax

Best wishes

Jeremy

On 7 Aug 2018, at 11:39, Mat <matia...@gmail.com> wrote:





--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7dbce485-1bc9-4db2-bb7f-a6f1a5f54d82%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Stuart Amor

unread,
Aug 7, 2018, 6:57:00 AM8/7/18
to TiddlyWiki
Thank you Mat, that worked.  The only reason I had two separate marcos was in desperation

Mat

unread,
Aug 7, 2018, 7:26:15 AM8/7/18
to TiddlyWiki
@Jeremy - that was valuable to say the least! Thank you!

But... 

<<__tiddler__>>

Your code does work but what on earth is this??????

That is just totally new to me. What is it called? Are there any docs on it? Actually, what does it do? I wouldn't blink if it said 

<<$tiddler$>>

Thank you!

<:-)


Jeremy Ruston

unread,
Aug 7, 2018, 7:32:42 AM8/7/18
to tiddl...@googlegroups.com
Hi Mat


On 7 Aug 2018, at 12:26, Mat <matia...@gmail.com> wrote:


Your code does work but what on earth is this??????

That is just totally new to me. What is it called? Are there any docs on it? Actually, what does it do? I wouldn't blink if it said 

The feature was new in 5.1.16:

Parameters as Variables

The parameters to a wikitext macro are also available as special variables named as the parameter name wrapped in double underscores. For example, the example above could also be expressed as:

\define sayhi(name:"Bugs Bunny") Hi, I'm <$text text=<<__name__>>/>.

Accessing parameters as variables only works in macros that are wikified and not, for example, when a macro is used as an attribute value. The advantage of the technique is that it avoids the parameter value being substituted into the macro as a literal string, which in turn can help avoid issues with parameters that contain quotes.

Best wishes

Jeremy

Mat

unread,
Aug 7, 2018, 7:35:47 AM8/7/18
to TiddlyWiki
... I wouldn't blink if it said 

<<$tiddler$>>


I take that back. There is no previously defined such variable or macro so this wouldn't make sense.

<:-) 

@TiddlyTweeter

unread,
Aug 7, 2018, 9:20:43 AM8/7/18
to TiddlyWiki
Ciao Jeremy

The one thing that I'd like to know is whether, in all contexts, you need  __underscore brackets__ to be "bracketed", i.e. does this construct always have to have "<<" or "<" etc. around it?

Jeremy Ruston

unread,
Aug 7, 2018, 9:24:57 AM8/7/18
to tiddl...@googlegroups.com
The one thing that I'd like to know is whether, in all contexts, you need  __underscore brackets__ to be "bracketed", i.e. does this construct always have to have "<<" or "<" etc. around it?

Yes, a construction involving either << or < is needed to use any variable.

The parameter name wrapped in double underscores is a valid variable name in its own right. When used in a filter it wouldn't have the double angle brackets:

<<link-links "[tag<__tagname__>!sort[modified]]">>

To put it another way: macro parameters are made available within the body of a macro as variables named with the parameter name wrapped in double underscores.

Best wishes

Jeremy.



Jeremy Ruston wrote:
The feature was new in 5.1.16:

Parameters as Variables

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

@TiddlyTweeter

unread,
Aug 7, 2018, 10:00:10 AM8/7/18
to TiddlyWiki
Thank you Jeremy

Would it be OK to call __underscore brackets__ "sub-bracketing?"

What I mean is that it needs the "<" "<<" contexts to function, so its a subsidiary construct?

Best wishes
Josiah

Jeremy Ruston

unread,
Aug 7, 2018, 10:23:59 AM8/7/18
to tiddl...@googlegroups.com
I hadn't thought to think of the underscores as brackets, but that might be useful. 

Best wishes

Stuart Amor

unread,
Aug 7, 2018, 1:24:28 PM8/7/18
to TiddlyWiki
Thank you guys, this has been a real education.  I have taken Jeremy's code and have tried to expand it to create a button that when clicked brings up an enlarged image, however the image in the popup is very narrow?

\define image(tiddler)

<$button class="tc-btn-invisible tc-thumbnail-image" popup="$:/popupstatus/$tiddler$">
   <$tiddler tiddler=<<__tiddler__>>>
      <$image source={{!!title}} width=80 tooltip={{!!caption}}/>
   </$tiddler>
</$button>

<$reveal type="popup" state="$:/popupstatus/$tiddler$">
<div class="tc-drop-down">
   <$tiddler tiddler=<<__tiddler__>>>
      Bigger Picture
      <$image source={{!!title}} width=800 height=700 tooltip={{!!caption}}/>
   </$tiddler>
\end

<<image "Motovun Jack.jpg">>

Mohammad

unread,
Aug 7, 2018, 1:55:09 PM8/7/18
to TiddlyWiki
Could you check it without class="tc-drop-down" and see what will be the result?

Jeremy Ruston

unread,
Aug 7, 2018, 4:26:26 PM8/7/18
to tiddl...@googlegroups.com
Hi Stuart

Here’s a refactored version that works:

\define image(tiddler)
<$set name="state" value={{{ [<__tiddler__>addprefix[$:/popupstatus/]] }}}>
   <$button class="tc-btn-invisible tc-thumbnail-image" popup=<<state>>>
      <$tiddler tiddler=<<__tiddler__>>>
         <$image source={{!!title}} width=80 tooltip={{!!caption}}/>
      </$tiddler>
   </$button>
   <$reveal type="popup" state=<<state>>>
   <div class="tc-block-dropdown-wrapper">
      <div class="tc-block-dropdown" style="width:400px;">
         <$tiddler tiddler=<<__tiddler__>>>
            <$image source={{!!title}} width= 100% tooltip={{!!caption}}/>
         </$tiddler>
      </div>
   </div>
</$set>
\end

<<image "Motovun Jack.jpg">>

The changes include:

* Using an outer variable “state” to hold the name of the state tiddler so that we only compute it once
* Using the double underscore syntax to access the “tiddler” parameter in constructing the state tiddler title
* Switching to a block dropdown with a manually specified width
* Using 100% as the image width so that the height is automatically scaled in proportion

Best wishes

Jeremy

Mat

unread,
Aug 7, 2018, 6:27:15 PM8/7/18
to TiddlyWiki
@Jeremy,

Could tiddlywiki.com feature a number of best practice examples such as the one given, ideally including less than optimal examples with annotations and and pitfalls such as my own attempt here above? I cannot think of a better way to learn good TW code than from seeing comparisons of good and bad examples. My guess is a mere few, say 4-5 really good examples, could cover a lot of ground. You would not have to author them but obviously it would need your revision for tiddlywiki .com. I could make a first attempt with the stuff in this thread and bounce it around with whoever feels the urge.  Would you be positive to have this featured on tiddlywiki.com


<:-)

P.S @Stuart, sorry for hijacking your thread... but IMO you got your moneys worth already ;-)

Stuart Amor

unread,
Aug 7, 2018, 6:34:54 PM8/7/18
to TiddlyWiki
I agree Mat, it’s been a real masterclass experience. Jeremy has shown us insight that I have picked up on other google threads.

TonyM

unread,
Aug 7, 2018, 8:13:44 PM8/7/18
to TiddlyWiki
Folks,

Nice to here discussion of the double-underscore to convert a macro parameter $parmname$ into a <<__parmname__>> variable.

We all need information that helps us understand and remember its functionality, I think my first line above helps this but more work is needed.

Double underscore in wiki text __underlines content__ but can be used to convert a macro parameter $parmname$ into a <<__parmname__>> variable.

<<represents>> variables, and in filters <represents> the inclusion of <<__parameterbecomesvariable__>> converts the parameter to a variable.

We however need more "why" not only "what" answers

I ask my self why

<$tiddler tiddler=<<__tiddler__>>>

Is better that or necessary instead of 
<$tiddler tiddler="$tiddler$">

In fact I have often used $parameters$ to pass a string into a button tooltip to avoid having to use the macrocall widget to permit variables, and you can use $parameters$ to concatenate like "$parameters$$otherparam$-suffix"

WHY is the question we need to address a lot more in the documentation.

Tony

Mohammad

unread,
Aug 8, 2018, 12:17:43 AM8/8/18
to TiddlyWiki
Mat!
Great suggestion!
I believe there is not good resources on "best practice" coding in TW.
I hope Jeremy accept and I support you!

Mohammad 
Reply all
Reply to author
Forward
0 new messages