Tiddler Template Applied Via Tag

[baiguai]

I’ve been scouring the topics here, but so far haven’t seen anything on this particular case that I stumbled upon a while ago, while hunting down plugins.

I found myself on a TW site and when I opened a tiddler, it was applying a template. I couldn’t figure out how that was being specified - after doing some searching and digging, I realized it was being applied via the tag.
Unfortunately I didn’t note how that was done, or what site I saw it on.

Maybe someone here can help…

I would like to define a template and utilize it - not via a button etc - but by simply adding the correct tag.

Thanks in advance for any info on this!

[twMat]

title: whateveryouwant
tag: $:/tags/ViewTemplate
text:
<% if [all[current]tag[mytag]] %>
yoodlehoo
<% endif %>

[paotsaq]

GrokTiddlyWiki has a good resource on this! Here it is.

[baiguai]

Thank you! I actually saw that when I was looking for solutions before posting this, but I wasn’t sure how to accomplish that when a tag is added to a tiddler.

Excellent information in that article definitely gets me closer I’ll keep digging.

Thank you.

[baiguai]

Oh! Thank you for that!
I think the wiki I had encountered had macro or similar, so you can create a new tiddler, and not add anything to it, except the right tag and !poof! the template is applied to it.

I have a toolbar button I’ve built that works, but I would like to be able to accomplish that even easier, and not take up toolbar real estate.

I’ll play around with your suggestion tho

Thank you!

[baiguai]

Oh! I actually found the code I had encountered. It behaves a bit differently from what I remembered - You don’t see the template while you’re editing it - which is why I was so confused when I encountered it.

However, I MAY be able to experiment with my template code in my create templated tiddler toolbar button - maybe I can just call that from a macro or similar.

But this code is pretty cool for field value driven templates. I think this was on a site using TW as a relational DB.

<% if [<currentTiddler>tag[Supplier]] %>

<strong>{{!!company-name}}</strong><br/>
<address>
  {{!!city}}, {{!!country}}<br />
  Phone: <a href=`tel:${ [{!!phone}search-replace:g:regexp[\D],[]] }$`>{{!!phone}}</a>
  <% if [{!!fax}!match[NULL]] %><br/>FAX: <a href=`tel:${ [{!!fax}search-replace:g:regexp[\D],[]] }$`>{{!!fax}}</a><% endif %>
</address>

<h2>Products from {{!!caption}}</h2>
<<list-links filter:"[tag[Product]supplier-id{!!id}get[id]addprefix[Product/]unique[]sort[caption]]" >>
<% endif %>

[paotsaq]

Keep us posted on your progress; I’ll be keeping an eye on this, and I have some trouble with templates myself and maybe some similar situations to mine will arise.

[twMat]

@baiguai

I think the wiki I had encountered had macro or similar, so you can create a new tiddler, and not add anything to it, except the right tag and !poof! the template is applied to it.

Yeah, that is how my suggestion behaves.

Templates are not so difficult to understand:

A tiddler tagged $:/tags/ViewTemplate or $:/tags/EditTemplate becomes a template for all(!) tiddlers in, respectively, viewmode or editmode.

As said, they “appear” in all tiddlers but if you wrap their content in a condition, then you can control if anything shows.

The condition is constructed like I showed in my post, using the if-then syntax and the filter you want as the qualifier. In your case you want a specific tag.

While indeed fantastic, there really is nothing mysterious about it.

The tagpill in the template itself, i.e $:/tags/ViewTemplate can be clicked and therein you see all other viewtemplates and you can control in which order they should show for (all) tiddlers.

[etardiff]

@baiguai

You don’t see the template while you’re editing it - which is why I was so confused when I encountered it.

I love @twMat’s SideEditor for working with templates—in fact, it’s frequently the first thing I add when exploring someone else’s wiki. It allows you to edit a template via a floated editor (or pop it out into a separate window) and see the “live” effects on any tiddler that meets the view condition—e.g. any tiddler with the “Supplier” tag, per the template example you shared.

[Springer]

@twMat

A tiddler tagged $:/tags/ViewTemplate or $:/tags/EditTemplate becomes a template for all(!) tiddlers in, respectively, viewmode or editmode.

As said, they “appear” in all tiddlers but if you wrap their content in a condition, then you can control if anything shows.

You can also apply a template (to a tag, or using any other filter condition) by using the cascade mechanism (ControlPanel > Info > Advanced > Cascades > View Template Body):

See how the existing cascade filters work. One thing that’s nice about this way to use templates is that the templates (used this way) don’t have to include (within the template itself) the <% if ... %> or <$list ...> framing conditions that otherwise (with the $:/tags/ViewTemplate approach) do the work of telling each template exactly when to suppress itself.

The view template body cascade is ideal when a template wants to be the “downtown” display element for a certain class of tiddlers (that is, the usual text-field-based body has become redundant or irrelevant (or overflowing with binary data, etc.), so this template is displayed instead of the standard tiddler “body” area. (Note, however, it can still transclude the usual text field — making it part of a more complex composition, handling it with special styles, etc.)

[baiguai]

Thank you so much! I was unaware of the EditTemplate piece!

[Springer]

The EditTemplate (with the cascade) can be amazing, especially if you have lots of field structure.

For example, this is what my edit template looks like, for giving feedback to a student’s short writing assignment (not all areas are clearly labeled, because it’s for my own use, but basically my own comment on each of “exegesis” “challenge” and “reply” appear beneath the student text that fits each of these roles):

It looks very different from the what the final view template looks like…

… but it helps me structure my feedback process around the details of the assignment. For example, radio buttons for each aspect of the rubric (at bottom of edit template) are more convenient than drop-downs for quick point-and-click interaction, and I’ve configured then with the same graphic “harvey balls” that appear at bottom right of the view template.

Using the Edit Template Body cascade and the View Template Body cascade, these templates render automatically as soon as the crucial tag (in this case, fa23-micro), plus a value in the userid field, are present.

[baiguai]

Oh! That’s cool… and I like the highlighting syntax. How was that set up?
Thank you for letting me know about the EditTemplate.

[Springer]

@baiguai

I like the highlighting syntax. How was that set up?

You can poke around here: https://ethicsatwes.tiddlyhost.com/#%24%3A%2Fspringer%2Ftemplate%2Fmicroessay-w-html

I have a stylesheet with classes such as

.hlg { background-color:#dfffbf; }
.hly { background-color:#fff6cf; }
.hlb { background-color:#def; }

(These stand for highlight-green, highlight-yellow, highlight-blue)

Then the view template concatenates field elements together so that these classes are applied, using the @@.class trick:

My microessay feedback for {{!!who}}: <br><p>{{!!structure}} @@.hlg {{!!exe-comment}}@@ 
@@.hly {{!!chal-comment}}@@
@@.hlb {{!!reply-comment}} @@
@@background-color:none; <br>{{!!add-comment}}@@

Eventually I’d like to revise my stylesheet to make it more palette-reponsive (rather than hard-coding colors), but this one works fine within the tightly designed color scheme the site has been locked into for some years now.

[baiguai]

OH! I wasn’t aware of the @@ trick. Now it makes sense. And VERY cool! Time to expand my custom stylesheet hehe.

Thank you!

[Springer]

Along with @@.class … @@ markup, you can try assigning styles to other elements. For example, a line like this:

*.hlg Bullet point here

would show up as a ul li (unordered list item / bullet-point) with the green highlighting, given my css for the .hlg class

I made some notes-to-self about this in this tiddler: https://quick-demo.tiddlyhost.com/#Notes%20on%20classes%20and%20color%20action

[EricShulman]

Additional notes about using CSS to style your content:

With @@ syntax, you can specify direct CSS attributes, like this:

@@font-size:200%;background-color:#dfffbf; test@@

or even a combination of CSS attributes and classes:

@@font-size:200%;.hlg test@@

where the CSS name:value; pairs come first, followed by .classname. Also note that there must be at least one whitespace character (space, tab, or newline) following the classname to separate it from the actual text to display.

-e

[baiguai]

Oh! Good to know. Thank you! That is really cool.

[baiguai]

Ahh Ok! Thank you for that!

[baiguai]

Too bad this syntax doesn’t work with Markdown tiddlers