How to include pasted note graphic in export

Q & A - getting started with Tinderbox
1

I managed to write a template that properly prints my parent and child notes recursively into an RTF file. Big step! However, I cannot figure out how to include the pasted graphic files. I know I could set a image attribute and include that, but I’m going to have a 100 or so. Can someone advise how to accomplish this? Thanks!

This is the code I tried:

<!--  Tinderbox: ^title -->

^value($Name)^

<$Children(
  ^value($Name)^

  <$Text(
    ^if($Image)^
     <$HTML(
       "<img src='data:image/png;base64, " + $Image.base64Encode + "' />" 
      )>
    ^endIf^
  )>

  <$Children(
    ^value($Name)^
  )>
)>

Note: This comments were included because otherwise the code wouldn’t show in this message. I didn’t have them in my template code.

[admin edit: formatting fixed]

2

Hey Bruce, great question. Congratulations! Big step indeed.

I’m going to be releasing a working with media in Tinderbox template soon, so nice time. But, alas, it is not done yet.

The simplest way to work with media in Tinderbox and to have the most flexibility when it comes to repurposability is to keep the media file on your hard drive. You copy the path of the image and past this into a TBX attribute, e.g., $MediaFile="/user/yourname/dir/dir/nameoffile.png.

In your template you’d add this:

<src ="^value($MediaFile)^ width=“400px”>

You could create an attribute for height and width too.

To learn more about the HTML img tag see HTML img tag.

If you want, DM me/give me a call and I can walk you through it.

3

Thanks again. Given that this method allows for the media to be repurposed, is there a way to include the pasted graphic if it’s more of a “one and done” situation?

BG

4

A few thoughts.

“$Children” is presumably a user attribute. As the term ‘children’ is used both as a designator and an export code, this is not an ideal attribute name as it may confuse the action and/or export code parsers. To avoid name collisions, it is easy to check in aTbRef for the names of designators, system attributes, export codes and action code operators.

The code <$Children(^value($Name)^)> makes no sense in HTML. It is creating an HTML tag with the value of attribute $Children for the current note, with is the $name of the current note. Thus, if the current note is “My project name”, then the result of this bit of your template’s code is <My project name> which both not a valid HTML tag, and is also not closed: in valid HTML tags are always closed, e.g. <p>...</p>, unless self closing like `
.

A better way to approach this task is to make (or save a copy of) a valid HTML page that renders correctly and then replace the parts of the HTML source code you wish to be dynamically inserted with export code.

Before jumping straight into Micheal’s templates I strongly recommend you work though the basics in these short and simple export demos in this zip file as they will give you the simplest building blocks of export code to understand more complex parts of HTML export. Understanding the basic building blocks makes it easier to understand—and alter-more complex templates.

4 Likes
5

Sure, you can paste images in $Text, but you’ll have not width and height control, among other considerations that are nice to keep in mind,

6

Then again, it’s often better to set the height and width of images in CSS anyway.

This is a case where my old advice is contradicted by newer advice.

7

Agreed. @eastgate, I’m wondering if I’m missing something. Are you able to apply CSS to an image that has been pasted into a note? If so, how. The method is not clear to me.

8

Sure. For example:

<div class="post">
     <img src="....">
     <p>This penguin approached me last Tuesday....</p>
</div>

You might say:

.post > img { width="100%";}

To say that images inside .post divs should be scaled to fill the available space.

9

Thanks. I understand. I just got off a call with @bmgphd, and we figured it out. :slight_smile: This is cool! I was not aware that it would work this way. It adds a ton of flexibility and is perfect for Bruce’s need to “just get the work done.” :slight_smile: This will save him hours. Thanks!

Also, we also tested using ⌘+P in preview to prind to PDF. Worked like a charm.

I love how flexible this tool is!