How to apply a template to the text field of a Tiddler

#1

Hello everyone.

I’m trying to apply a template I created to a Tiddler I have with the “article” tag. The template basically generates a small box at the top of the Tiddler, transcluding the existing fields, and then applies specific formatting to the content of the Tiddler’s “text” field.

Steps I’ve taken:
1- I created a Tiddler with the template I want to apply and tagged it with: $:/ViewTemplate
2- Then I created another Tiddler with a filter to apply the template to Tiddlers with the “article” tag and tagged it with $:/tags/ViewTemplate

But I haven’t been able to get it to work. It displays the content of the “text” field correctly, but then it renders the original Tiddler content again without the template’s formatting.

How can I make it display as specified in the template and not duplicate the content?

This is the template code:

<style>
  .articulo-titulo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0;
  }
  .articulo-subtitulo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    color: #7f8c8d;
    margin-top: 0;
    margin-bottom: 15px;
    font-style: italic;
  }
  .meta-horizontal-limpio {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95em;
    color: #34495e;
    background-color: #f7f9fb;
    padding: 15px 20px;
    margin-bottom: 25px;
    max-width: 700px;
    border-left: 5px solid #3498db;
    display: flex;
    gap: 25px;
    align-items: center;
    border-radius: 8px;
  }
  .meta-horizontal-limpio div b {
    color: #2980b9;
  }
  .articulo-separador {
    border-top: 1px solid #ddd;
    margin: 20px 0;
  }
  .articulo-extracto {
    font-family: Georgia, serif;
    font-size: 1em;
    color: #333;
    line-height: 1.6;
    background-color: #f9faff;
    padding: 15px;
    border-radius: 6px;
  }
</style>

<h1 class="articulo-titulo">{{!!caption}}</h1>

<div class="meta-horizontal-limpio">
  <div><b>Author:</b> {{!!autor}}</div>
  <div><b>Source:</b> {{!!fuente}}</div>
  <div><b>Date:</b> {{!!fechaPublicacion}}</div>
  <div><b>Tags:</b> {{!!tags}}</div>
</div>

<div class="articulo-separador"></div>

    
<div class="articulo-extracto">
  <h3>Text</h3>
  <div>

{{!!text}}

  </div>
</div>

This is the code for the Tiddler tagged with $:/tags/ViewTemplate

<$list filter="[all[current]tag[articulo]]">
    <!-- Si el tiddler actual tiene el tag "articulo", transcluye tu plantilla principal -->
    <$transclude tiddler="PlantillaArticulo"/>
</$list>
<$list filter="[all[current]!tag[articulo]]">
    <$slot name="content"/>
</$list>

These are the Tiddlers I’m using:

PlantillaArticulo.json (1.8 KB)
Medium_ Reemplaza tu lista de tareas con el registro intersticial para aumentar la productividad 1.json (4.4 KB)
MiViewTemplateArticulo.json (429 Bytes)

Thank you very much.

#2

To completely replace the standard TWCore tiddler text rendering, you can use a ViewTemplateBody cascade (see $:/ControlPanel > Info > Advanced > Cascades > ViewTemplateBody).

Let’s assume that your template tiddler is named “MyArticleTemplate”. Note that this tiddler does NOT need to be tagged with $:/ViewTemplate.

Create a tiddler (e.g., “MyArticleCascadeFilter”), tagged with $:/tags/ViewTemplateBodyFilter, containing:

[tag[articulo]then[MyArticleTemplate]]

and add a list-before field to the tiddler. This field value should be left blank. This ensures that the TWCore’s ViewTemplateBody cascade handling will give priority to your filter so it is applied before any other filters in the cascade.

That’s it. Any tiddler tagged with “articulo” will now use your MyArticleTemplate tiddler instead of the TWCore’s default $:/core/ui/ViewTemplate/body/default

enjoy,
-e

2 Likes
#3

@EricShulman beat me to it. I was going to explain the same thing.

I’m only answering as I have a test case based on your samples:

TestCase.json (6.4 KB)

I do something slightly different from Eric. Instead of a blank list-before field, I more explicitly list the template that it should come before. You can see the list of them by clicking on the tag pill for $:/tags/ViewTemplateBodyFilter, Here, as often, I put it just before the default $:/config/ViewTemplateBodyFilters/default, like this:

list-before: $:/config/ViewTemplateBodyFilters/default

1 Like
#4

Thank you so much @EricShulman and @Scott_Sauyet. The code worked perfectly.

Regards

1 Like