Using a procedure with parameters as an img parameter does not work

[wiki_user]

@jeremyruston

Here’s an example of a simple macro for displaying book covers:

presumably the modern equivalent of this pattern is
achieved with a procedure ?

\procedure openlibrary-cover-url(value,key:"isbn",size:"M")  https://covers.openlibrary.org/b/<<key>>/<<value>>-<<size>>.jpg

<img src=<<openlibrary-cover-url value:"9780907563150" size:"L">>/>

<<openlibrary-cover-url value:"9780907563150" size:"L">>
<!-- https://covers.openlibrary.org/b/isbn/9780907563150-L.jpg -->

[wiki_user]

@Mario

@wiki_user Your code does not work. – Which tells me, that we desperately need to improve our text substitution documentation.

define work
i tested it substituted the text =P

any how
happy to hear my fail was that inspirational

i do try to lightly rtfm
though other components many be defective

[wiki_user]

@Mario

Folks. Please test your code before posting.

i did
i did
i saw a pragma concatenate strings

@Mario

how dose my posted snippet fail for you ?
… is your wiki broken?

[Scott_Sauyet]

@wiki_user

how dose my posted snippet fail for you ?

Well, as it generates output like this (linebreaks added):

<p>
  <a href="https://covers.openlibrary.org/b/" class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer"
    >https://covers.openlibrary.org/b/</a
    >isbn/9780907563150-L.jpg
</p>

I would say that is a fail for any reasonable attempt to use this to display images of book covers. It creates a link to a url which is a proper prefix of the expected one, followed by the remainder of the expected url. Concatenated, they might look the same, but they behave very differently.

@Mario

Folks. Please test your code before posting. @XLBilly Yours was almost right, so I fixed and reformatted it for better readability.

I’m assuming that this was a last-minute reformatting, without a subsequent recheck; I’ve certainly been guilty of the same; I do try to avoid it but occasionally forget. Breaking a line into two is often a harmless operation. But if it turns a one-line function, procedure, or macro into two lines, then you need to remember to add the \end.

[wiki_user]

@Scott_Sauyet

Concatenated, they might look the same, but they behave very differently.

subtle but critical detail
less of those please

@Scott_Sauyet

Well, as it generates output like this

why is that the case ?!
( i take the hint from @XLBilly html.comments[] , any elaboration on the (implementation) details welcome! )

[etardiff]

@wiki_user

why is that the case ?!

First, for reference, here’s the working macro “equivalent”:

\define openlibrary-cover-url(value,key:"isbn",size:"M")  https://covers.openlibrary.org/b/$key$/$value$-$size$.jpg

In this case, the macro can’t be converted to a procedure by simply replacing macro syntax with procedure syntax because macros and procedures differ in when and how they perform substitutions. In a macro, any references to named parameters are substituted with their corresponding values before any code is parsed, so

<img src=<<openlibrary-cover-url 9780907563150 size:"L">> />

becomes

<img src="https://covers.openlibrary.org/b/isbn/9780907563150-L.jpg" />

i.e., a valid URL that can be parsed as the src of the image.

On the other hand, procedures don’t perform any preliminary variable substitution, including their own parameters; instead, they’re parsed “inline” at the same time as the rest of the tiddler in which they’re used. We can see this looking at the “raw HTML” or “widget tree” views in the preview window (available on TW-com or in any wiki with the Internals plugin):

That is,

<img src=<<openlibrary-cover-url value:"9780907563150" size:"L">> />

yields

<img src="https://covers.openlibrary.org/b/<<key>>/<<value>>-<<size>>.jpg" />

If you’re only looking at the textual output of the procedure, the problem isn’t immediately apparent: <<openlibrary-cover-url value:"9780907563150" size:"L">> appears to produce the correctly concatenated value https://covers.openlibrary.org/b/isbn/9780907563150-L.jpg. But the procedure isn’t evaluated before it’s used as the value of the src attribute: it can’t provide the correct value, and the image breaks.

Our general takeaway thus far is that you can’t use a parameterized procedure as the value of an HTML or widget attribute, even though you can use an “equivalent” macro. But there’s actually a workaround: we can use the $wikify widget to fully evaluate a procedure, assign the results to a variable, and then use that variable as an attribute. For instance:

\procedure openlibrary-cover-url(value,key:"isbn",size:"M")  https://covers.openlibrary.org/b/<<key>>/<<value>>-<<size>>.jpg

<<openlibrary-cover-url value:"9780907563150" size:"L">> <!-- "working" -->

<img src=<<openlibrary-cover-url value:"9780907563150" size:"L">> /> <!-- broken -->

<$wikify name="source" text="""<<openlibrary-cover-url value:"9780907563150" size:"L">>""">

<<source>> <!-- working -->

<img src=<<source>> /> <!-- working -->

</$wikify>

[Scott_Sauyet]

@wiki_user

subtle but critical detail
less of those please

@wiki_user

@Scott_Sauyet

Well, as it generates output like this

why is that the case ?!

I still don’t know many details of the rendering engine, but I would guess that it treats each of your text sections like independent widgets and process each one fully before concatenating them. So there would be a child widget for https://covers.openlibrary.org/b/, one for <<key>>, one for /, one for <<value>>, one for -, one for <<size>> and one for .jpg. When completely processing that first one, it notes that it looks like a URL; and one of the rules says to turn that into a link. The link it generates is concatenated with the plain text output of the other widgets.

It is just a guess, but it seems likely.

[wiki_user]

@etardiff

procedures don’t perform any preliminary variable substitution, including their own parameters; instead, they’re parsed “inline” at the same time as the rest of the tiddler in which they’re used

thanks for the explanation(s) !

@Scott_Sauyet

I still don’t know many details of the rendering engine

on a similar tangent
i happened to find this topic
relating to html output / parser process

@Surge

I’d like to understand why that html is produced.

Info: How to Translate Wikitext to HTML

You are right, It is not immediately obvious, but there are some interesting mechanisms involved. Let’s start at the beginning, because it is important for context. TiddlyWiki Conepts A) Everything it TiddlyWiki is a tiddler B) WikiText is a concise, expressive way of typing a wide range of text formatting, hypertext and interactive features. C) TiddlyWiki’s display is driven by an underlaying collection of widgets Wikitext Rules TW wikitext follows several rules. To identify a paragraph …

[XLBilly]

See Procedure Calls

Assigning Procedure Calls to Attribute Values

The text of a procedure can be directly assigned to an attribute of a widget or HTML element. The result of the procedure is not wikified, which means that parameter handling does not take place.

<div class=<<myclasses>>>
...
</div>

[TW_Tones]

@Scott_Sauyet

I still don’t know many details of the rendering engine, but I would guess that it treats each of your text sections like independent widgets and process each one fully before concatenating them.

Its interesting you say that, Back in TiddlyWiki classic the way tiddlywiki rendered text was much more important and I was forced to understand it early in my adventure. Although now it is less important in TW5+ It would be great if we had a nice explanation that makes it easy for people to understand. I think some of the apparent mistery and inconsistencies would evaporate if people understood this basic part of tiddlywikis architecture.

• Off line I will have a go, again , as an exercise in non-fiction writting