Transclusion issue

My wiki has some tiddlers having an object_links field. I have coded {{CS171}} into the text of a tiddler and also added the value, CS171, into its object_links field.

I now would like to change the text of the tiddler so that the ViewTemplate I have been working on automatically inserts the contents of tiddler CS171 into the calling tiddlers text field (as if I had typed {{CS171}} into its text field.

I can get the text {{CS171}} or just CS171 to display in the text field but can not get it to transclude from the tiddler titled CS171.

This is the ViewTemplate code

<$list filter="[<currentTiddler>!is[system]!tag[Categories]!tag[_Developer]!tag[Index]!tag[Links]]" >
<$transclude $field="object_link" />

</$list>

I have tried various permutations of the $transclude widget, including $tiddler and/or $field, the mode attribute.

Anyone got any clues

bobj

Try this:

<$transclude $tiddler={{!!object_links}} mode=block/>

Note the mode=block parameter. This ensures correct rendering if the transcluded tiddler starts with something that requires “block mode” rendering (e.g., bullet items, tables, etc.).

Note also, that the above widget assumes that the object_links field contains only one tiddler title. However, since you’ve named the field object_links (plural), I am guessing that it MIGHT contain more than one tiddler title.

To transclude ALL of the titles listed in the object_links field, you will need to write something like this:

<$list filter="[enlist{!!object_links}]"><$transclude mode=block/></$list>

enjoy,
-e

1 Like

Thanks @EricShulman, again…

One issue though, the tiddler displays the transcluded tiddler but not at full size. Looking at the TW documentation, it states there is no way to display at a large size. Bummer…back to the old way. Still learning more and more.

bobj

What do you mean by “full size”?

It’s possible (though I’m not sure!) that OP is experiencing a problem like the one discussed here:

Could you clarify: Which documentation are you talking about?

@springer, yes a similar issue. The transcluded tiddler links to an external file, either jpg or pdf and it displays as a large postage stamp. In my case, pdf’s could be several pages. I know I could provide a clickable link back to the transcluded tiddler but this defeats the intended purpose. I’m going to have to stick with hard coded {{…}} statements.

Bobj

@Springer , the documentation in Tiddlywiki related to transclusion of images, in tiddler ‘Images in WikiText’.

However, in my TW, that is not a problem for those tiddlers having the {{CS171}} hard coded, where the CS171 tiddler is a canonical link to an external file, either jpg or pdf.

However, using the $transclude widget ends up with the following

rather than

Note, in this example, I am just using a test tiddler.

I have also just followed up the link you provided to stylesheet tiddlers. I have not heard of them before and will follow this up to see if this can solve my issue.

bobj

In order to display PDF content within TiddlyWiki, it is automatically enclosed in an iframe. This allows the browser to render the PDF in a separate document context, using browser-native handling. In addition, the following CSS rule is defined in the TWCore default stylesheet ($:/themes/tiddlywiki/vanilla/base),

.tc-tiddler-body > iframe {
	width: 100%;
	height: 600px;
}

This causes the PDF iframe to be automatically resized to fit the tiddler width and a fixed height of 600px, but ONLY when the PDF iframe is displayed as an immediate child element of a tiddler body (.tc-tiddler-body). This is the case when viewing the PDF tiddler directly, or when the PDF tiddler is transcluded on a line by itself as the initial content embedded within another tiddler, as in

{{PDFTiddlerTitle}}
more content here

However, when the transcluded PDF is preceded by any other content, it is no longer the “immediate child element of the tiddler body”, and the Vanilla CSS rule doesn’t apply, resulting in the browser’s default “large postage stamp” size for the embedded PDF.

Fortunately, there is a way to work around this by defining an additional CSS rule.

Start by putting the following into a tiddler tagged with $:/tags/Stylesheet:

.tc-tiddler-body iframe { width:100%; height:50vh; }

Note that the above rule does not have the “>” that is included in the TWCore Vanilla stylesheet. This means that it will apply whenever a PDF iframe is embedded in a tiddler, even if it is not the first element. Note also that I’ve used a height of 50vh; rather than the 600px; that is found in the Vanilla stylesheet. This allows the rendered PDF height to vary so that it will always be 50% of the current browser window height rather than a fixed height. You can, of course, change this height value to suit your own needs.

With this additional CSS rule in place, you can now use {{PDFTiddlerTitle}} anywhere in your tiddler content, and it will be sized to fit 100% of the width of the containing element. For example, if you put the PDF transclusion within blockquotes:

<<<
{{PDFTiddlerTitle}}
<<<

It will be stretched to fit the blockquote, which has additional left/right margins. Similarly, if you want to apply a specific width to the embedded PDF, you can wrap it in a div that applies an inline style, like this:

<div style="width:50%;">{{New Tiddler}}</div>

Hopefully this explanation will help you resolve your PDF rendering issue.

Let me know how it goes…

-e

Sorry @EricShulman , it doesn’t work for me unless I remove the content inserted before the transclusion and then what I continue to see is the postage stamp of the transcluded image but now with the PDF browser controls over it. I can scroll the PDF but with the small window it remains almost useless in this scenario. With content before the transclusion, the view remains as it was, postage stamp transcluded content but no PDF controls.

Even stretching the display area to fit the whole window width does not enlarge the PDF display

This is now my view template and the style sheet you suggested.

@EricShulman , looking at the page source code, it would appear that the iframe element is outside of the <div class=“tc-tiddler-body” element as you can see in the screen grab below.

ah ha! The issue here is that you are using a custom view template to show your content.

Because of this, the iframe element is not within the .tc-tiddler-body, but is, instead within the parent .tc-tiddler-frame element. To address this, your stylesheet should be:

.tc-tiddler-frame iframe, .tc-tiddler-body iframe { width:100%; height:50vh; }

which accounts for the iframe occuring in either a ViewTemplate or within an individual tiddler’s body content.

enjoy,
-e

Thanks @EricShulman that fixed it. I assume the semantics of this stylesheet statement are

If you are an iframe within a tc-tiddler-frame element OR an iframe withing a tc-tiddler-body element, then …