How to float the output of a ViewTemplate next to other body content?

#2

Try this:

First, create a custom cascade tiddler (e.g., “MyTagTemplate/ViewTemplateBodyFilter”)

  • Set the text content to: [tag[MyTag]then[MyTagTemplate]]
    This defines the mapping between your tag value and your custom template
  • Tag it with $:/tags/ViewTemplateBodyFilter
    This adds the definition to the View Template cascade
  • Add a list-before field with an empty value
    This puts the definition first in the cascade, so it supercedes any other matching cascade filter

Then, create a custom template (e.g., “MyTagTemplate”) containing:

<style>
.something { width: 8em; height: 8em; border:2px solid black; float: right; }
.something h3, .something h4, .something h5 { text-align: center; font-weight: bold }
</style>
<div class="something">
   <h3>{{!!first}}</h3>
   <h4>{{!!second}}</h4>
   <h5>{{!!count}}</h5>
</div>
{{||$:/core/ui/ViewTemplate/body/default}}
<div style="clear:both;"/>

Notes:

  • I put the CSS definitions “inline” so that a separate stylesheet tiddler is not needed.
  • The default body template is transcluded after the info box to show the normal tiddler content. Note the use of || in the transclusion.
  • I added a “clear:both;” at the end, so that the info box doesn’t spill out the bottom of the tiddler if the tiddler’s body content is shorter than the info box.

enjoy,
-e

#3

Not exactly what you are looking for. But this looks similar. It works best with Krystal horizontal layout

#4

It’s almost exactly what Mohammad made recently look there :

I just adapted its style sheet like this :

Capture d’écran 2023-02-03 à 09.21.35

It works with a stylesheet, a viewtemplate and a viewtemplate body filter to be seen only on tiddlers with the note field.

see this site for understanding : https://post-itnote.tiddlyhost.com

2 Likes
#5

These instructions make perfect sense to me. I learned a lot from reading them. I think I finally had a breakthrough in understanding the cascade mechanism. This is great…

…except that they don’t seem to work for me. :frowning:

I feel as though I did everything according to these instructions at https://crosseye.github.io/TW5-demos/2023-02-02a/1/, but the tiddlers that should have the additional content instead show up as blank. Does the template need a special tag? It doesn’t seem so given that, others such as $:/core/ui/ViewTemplate/body/blank don’t have one. But I can’t think of what else is

This is a difficult thing for me to want to do. It feels as though it must be inefficient. But I usually define a general-purpose stylesheet for my wikis, and sometimes some minor ones for plugins. I have no problem putting this there. Is there an advantage to inline? Does it somehow apply only to the local content?

Ah, that’s what had really been missing! Don’t override the default; simply incorporate it at the right time. Now if I can only get this to work!

That’s probably a good idea, just on general principles, even though it shouldn’t matter in my case. This is another hard thing for me to get used to when working in TW. I’m so used to trying to always write semantic HTML, even for web apps where it probably doesn’t matter. But TW’s model is so different that this is a much more minor concern. But I can’t get used to it. So a <div> just to hold the clear rule still seems extremely odd. I’ll get there.

Thank you very much for the answer. I will look again after work to see if I can figure out what’s missing. I assume it’s something simple.

#6

I saw that thread as I was posting my question. The forum bot suggested it. I read it through fairly quickly, got lost several times, and eventually gave up.

I’ll give it another try this evening.

Thanks for the tip!

#7

In your custom cascade, it says:

[tag[MyTag]then[MyTagTemplate]]

but, your template tiddler is called “My Tag Template” (with spaces).

Either add the spaces in the cascade definition, or remove the spaces in the title of your template tiddler.

-e

#8

I looked at that thread when it came out. But it didn’t seem to offer me anything I didn’t know, since I have comfortably used alpha channels for years. I’ve looked over it again, and I don’t see the connection. Your screenshot does look like it might overlap with my goal, but when I dragged your tiddlers onto tiddlywiki.com, post-it test didn’t look anything like the screenshot.

I haven’t investigated further. If I don’t solve this with Eric’s technique, then this evening I will probably look to see what you’re doing and how I might make it work.

Thank you for looking into this!

#9

You can definitely put the CSS in a separate “general-purpose stylesheet” (and remove it from the “My Tag Template” tiddler).

Note one minor CSS issue: your rule for h3, h4, h5 will apply to ALL h3, h4, and h5 header elements, not just the ones contained within a .something. I recommend using more specificity, like this:

.something h3, .something h4, .something h5 { text-align: center; font-weight: bold }
1 Like
#10

I had trouble choosing the relevant tiddler to export in one json file… so I put the exemple at this address :
https://post-itnote.tiddlyhost.com

Have fun !

#11

Thanks. Good to know.

Oh yeah, thanks. This is just an artifact of my trying to simplify my test case. I’m no CSS pro, but I feel relatively competent with it most of the time. But for a quick demo, I don’t necessarily give it it the care it needs.

Any idea why my implementation of your suggestions didn’t solve the issue? I’m sure I missed something, but I just don’t know what it is.

Thank you for taking the time with this. It’s always wonderful to get help from the experts.

#12

Perfect. That works great. So now I have to figure out what I did differently. Somehow I’m going to have to see what debugging capabilities there are with TW.

This definitely looks like the same idea I’m working on. I’ll try soon to find the differences.

Thanks for your help.

#13

Perhaps you missed my reply here:

#14

D’oh, I did miss it. Sorry about that. And, yes that fixes everything. Damn I stared far too long to find a typo.

Once again, thank you very much for your help.

#15

Working version is at Floating ViewTemplate. Now to go back to the project I want this for.

Thank you to @EricShulman, @Thomas_Chuffart, and @arunnbabu81 for all your help!

#16

@Scott_Sauyet this is a useful code pattern for an additional User interface element.

If I may suggest this is an opportunity to give an example of my “10% more principal”, or the “110% rule”.

  • With 10% more effort than building this in the first place, you can generalise it a little, and package it.
  • Using it again in some other wiki will only require say 10% of the original effort to make use of it.
    • That is after using it a second time it will have cost you 110% of the original effort plus 10% more to use a second time, for a total of 120% of the original effort, to use it twice. Potentially avoiding approaching 200% of the original effort.
    • There are other ways to look at this but if something may be used more than once, if you follow the 110% rule, on the second use you gain a 60-80% return on your investment.
  • now consider publishing it to the community the chance of one or more others benefiting is very high and most likely the return to the community will quickly be thousands of times your original investment, just for 10% more effort.

On this occasion since you had not done it already, so I did it for my own benefit and publish it to the community for its benefit; rhs-tiddler-panel.json (1.7 KB)

In closing there are workflow methods that allow you to rapidly find such packages for reuse. Anyone serious about developing tiddlywiki on Windows (at least) can engage me for training and support, in rapid software development on TiddlyWiki (please send a private message).

#17

I think that’s a very good idea, and I follow something similar in my coding practices at my day job. The big difference is that I very rarely do this up front unless I’m absolutely certain about the correct abstractions. I usually won’t do it the second time either. But the third time I see some real commonality (or the second time if the work is very large), I try to factor this into a more generic concept and then recast my earlier work in terms of that abstraction as well as write the new one in that manner. If it seems important enough, I also publish it as an example for my peers.

You have helped with two plugins I’ve written and published. Both of those grew out of the same idea. This is useful to me, and likely would be to someone else. How could I make it more general? Other ideas (and you’ve also helped with many of these!) are still only half-formed in my mind, or have not come clear enough to ensure they are useful to others. Those, I post in my demos site. If they grow clear enough, I might try to find such generic solutions. Or they may just hang around waiting to be loved.

Thank you. I’m glad you did. I will look at it soon. At the moment I’m working on something I’m hoping to share in a few days, based on something you demoed here earlier. It will use the technique above.

What I really took from this thread was much more powerful than my specific floating block problem. I learned how to use the cascade with template filters to rework how certain tiddler bodies are built, not by overriding the default template, but by incorporating it as I need. I can see all sorts of possibilities for this.

#18
  • I understand this, I suppose choosing to “do it upfront”, is informed buy our interests and expectations.
  • I have an informal, even unwritten project, to develop more user interface elements for use to display content in tiddlywiki, which informed this specific case. I already have a dozen on the burn.
  • In my package you will see some of my generalisation and abstraction methods. But perhaps we should dedicate a topic to this some day, and publish through the newsletter.
  • I got a lot more too, and with my 10% more rule, I hope others do so as well, that don’t share our approach, learn its value as well,
  • The fact is a community can be a “virtuos circle” which is driven by a few principals like the “10% more principal”, that quickly becomes an exponential process.
    • And TiddlyWiki’s value continues to expand “double exponentially” (which seems to be a formal term) as well.
1 Like
#19

Hey,
How to implement also the sidenote in the panel ?

This is the code of Tufte annotations:

\define comment(txt)
<span class="comment"><label for="sn-demo"
class="margin-toggle sidenote-number">
</label>
<input type="checkbox"
id="sn-demo"
class="margin-toggle"/><span class ="sidenote">$txt$</span></span>
\end
#20

I don’t know if this is addressed to me. If so, I don’t have enough information to answer it. I’m not really sure what you’re trying to do.

#21

Hey Scott,
with this code you can show the comment (txt) at the right side of the tiddler, after the number of the sidenote.
I want to screen this sidenode , also the comment (txt) inside the tiddler, exactly where your panel in the example show the tree field by transclusion.

Initially there is the following CSS with it.

.comment:hover .sidenote {
background-color: yellow;
}input.margin-toggle {
display: none;
}label.sidenote-number {
display: inline;
}label.margin-toggle:not(.sidenote-number) {
display: none;
}.sidenote,
.marginnote {
float: right;
clear: right;
margin-right: -40%;
width: 30%;
margin-top: 0.3rem;
margin-bottom: 0;
font-size: 1.1rem;
line-height: 1.3;
vertical-align: baseline;
position: relative;
}.sidenote-number {
counter-increment: sidenote-counter;
}.sidenote-number:after,
.sidenote:before {
font-family: et-book-roman-old-style;
position: relative;
vertical-align: baseline;
}.sidenote-number:after {
content: counter(sidenote-counter);
font-size: 1rem;
top: -0.5rem;
left: 0.1rem;
}.sidenote:before {
content: counter(sidenote-counter) " ";
font-size: 1rem;
top: -0.5rem;
}

Best

1 Like