The Amazing PasteUp of @EricShulman

PAGES IN PASTEUP …

I get it! Looks good, easily updated …

2nd page gives the same grid and background.
And easy paste-in.

TT

The one Tool I’d really like is a NUDGER (one STEPPER)… a separate tool that could …

  1. Select a pasteup
  2. Select a field in that pasteup
  3. Move that field ONE cell U,D,L,R
  4. Stretch/Shrink the field D or R ONE cell
  5. Apply a Z layout level

My image of a control is this …

TT

TiddlyTools/PasteUp/View has been updated:

  • When a PasteUp tiddler is unlocked (enabed for editing), a new “toggle toolkit” button appears next to the “lock/unlock” button.

  • When you click this button, a toolkit for making quick adjustments to the current PasteUp tiddler’s /layout appears on the left side of the layout grid.

    • Select a field from the drop-list at the top of the toolkit. Note that as you hover over the toolkit panel, the selected field will show a dotted border in the layout grid (and in the field table, if it is visible)
    • Below the drop-list, the selected field’s current (top,left)-(bottom,right) [widthXheight] layout information is shown.
    • This status line also shows a “delete field” button which will completely remove the selected field from the PasteUp (after confirmation, of course!)
    • Below the status line are “-1” and “+1” buttons for adjusting the selected field’s width, height, and layer layout values. Note that the field’s width and height values cannot become less than 1 x 1, regardless of how many times you click the “-1” buttons. Similarly, the field’s layer value cannot become less than 0.
    • Below the width, height and layer buttons are a cluster of four “move” buttons with directional chevron icons. A click on one of these buttons will shift the position of the selected field by one grid square in the corresponding direction.
  • Currently, I have not included controls for adjusting a field’s page layout value. I also have not included “bring to front/send to back” buttons for adjusting a field’s layer value. Both of these are possible, but I didn’t want to over-complicate the toolkit interface with too many “bells and whistles”.

  • @TiddlyTitch: in your mockup, you show a “grid” button and a “tools” section. Can you elaborate on what these would do?

enjoy,
-e

It’s great!

A couple of issues came up–but I’ll comment on them later.
Here I just wanted to show I’m using the new tool to good effect.
Some aspects of “tweaking” layout it really makes easy …

In used in a quick test …

A bit later …

Where I left-off for now …

Thanks!
TT

I made some more updates:

  • added handling for “page -1/+1”. If the selected field is on the last page (or there is only one page), then using “+1” will automatically add another layout grid (aka, “page”) and move the selected field to the same position on the new page.

  • When adjusting the position (using the chevron buttons), it now prevents you from moving the selected field completely off the bottom or right side of the grid.

  • I also tweaked the arrangement of the “toolbox” controls.

    • The “delete field” button now appears above the “select a field” list
    • The “move” buttons now appear above the other controls, and is labeled “position”.
    • The information about the selected field (it’s current position, width, height, layer, and page) are shown above each corresponding control

enjoy,
-e

I was thinking of a tool you could use with any Layout independent of the pasteup toolbar …

By “grid” I meant “Select Pasteup”

Screenshot 2025-10-07 12.36.56

Under TOOLS I was intending the pasteup tool bar and tiddler header to be hidden. By “full port” I mean pinning the pasteup at top and expanded to full viewport width. These are more about post-editing presentation than active editing.

Screenshot 2025-10-07 12.38.34

TT

Minor “fat-finger” issue. Could the trash bin be moved an em or two left?

TT

Right. I really see the value of a second page. Not least as you work on different layouts of the same sources … e.g. …

I’ve moved the trash can to the left of the “select a field” prompt text. That moves it as far as possible from the “open drop list” arrow to avoid even the fattest of fat fingers :slight_smile:

-e

Note that when using PasteUpEmbed, you can provide a page:N parameter to embed a specific page from a layout, allowing a single PasteUp tiddler to contain several alternative layouts to be displayed in different places or contexts.

-e

You simply don’t know my fingers, man! :wink:

This seriously is starting to look like a page layout app or Desktop publishing such as;

Aldus PageMaker (later Adobe PageMaker) belonged to the class of desktop publishing (DTP) software.

And like those it has so many features crammed in, it may take time to learn. It would be nice to have a concise but comprehensive tutorial, so just putting the call out there.

  • I am particularly interested in using it to layout existing content in tiddlywiki including but not limited to images, text and TW5-Graph

Updates to TidldyTools/PasteUp and TiddlyTools/PasteUp/View:

  • BUG FIX: when using the toolbox “page” controls to move a field to another page, it was creating a new tiddler whose title was the new page number, rather than updating the PasteUp tiddler’s “pages” index value (oops!). This has been fixed.
  • NEW FEATURE: in addition to using the toolbox << and >> buttons to decrement/increment the width, height, layer and page values, you can now directly edit those values:
    • the number displayed between the buttons is now an $edit-text widget instead of just a static text display
    • when you edit a value, the new value is only applied when you press enter or move the focus elsewhere

enjoy,
-e

Actually it is quite easy to learn—once you grasp the Tripartite inter-relation (Data, Layout, Style [DLS]). In that sense it is fully canonical, elegant, with the emerged fundamentals on web (and before) regarding “content” v. “structure” v. “presentation.”

I personally find the simple, explicit, DLS easy & powerful.
TT

Thanks @TiddlyTitch

I also had a briefing from Eric Via Zoom tonight :nerd_face:

1 Like

Updates to TiddlyTools/PasteUp/View:

  • Inputs controls for “contents” and “styles” have been added to the toolbox. When you put the focus into one of these inputs, it automatically expands to a textarea for easy editing of its value; when the focus leaves the input, it automatically collapses back to a small control. Changes made in these input controls are immediately reflected in the rendered field on the layout grid.

  • You can now drag a field from the layout grid and drop it onto the toolbox panel to select that dropped field in the toolbox droplist.

enjoy,
-e

Really good! Intuitive.

I need use all a few days before I comment more, I think, on them.

I have more techie questions I’ll ask first.

TECHNICAL QUERY #1

Given I’m a bear of small brain I’m kinda at my limits on this Q.

A pasteup looks like this …

When I open the editor for it I see the preview Output as …

Output

When I preview it as RAW Html I see

Raw

My Question: Is it possible (or desirable) to see / capture the raw code for the visual render I see too?

I hope this makes sense!

TT

As you can see, a PasteUp tiddler’s text field contains JSON index values for the current layout and fieldtable settings (cols, rows, background, showadvanced, etc), but the actual grid output for the PasteUp tiddler is rendered by the TiddlyTools/PasteUp/View template, which is tagged with $:/tags/ViewTemplate.

When the wikitext contained in the TiddlyTools/PasteUp/View template is processed, it automatically applies CSS to hide the tiddler’s .tc-tiddler-body and then invokes the layout_grid() macro (defined in TiddlyTools/PasteUp) to display the grid output.

However, when you are using the standard TWCore editor preview, it does not apply this custom ViewTemplate, and thus it can only show you the default rendering of the PasteUp tiddler’s text field (i.e., the JSON settings).

I’ve done some experimenting with creating a custom cascade definition to provide an alternative to the $:/tags/ViewTemplate strategy described above (see $:/config/ViewTemplateBodyFilters/PasteUp which is tagged with $:/tags/ViewTemplateBodyFilter).

This cascade DOES succeed in previewing (and printing) the PasteUp grid output when using TiddlyTools/PrintTiddler to open a PasteUp tiddler in a separate window.

Unfortunately, this cascade definition simply won’t work when viewing the tiddler editor’s preview pane because it is actually rendering the contents of “Draft of 'YourPasteUpTiddler'”, but it can’t access the field layout and styles definitions, since there are no corresponding “Draft of 'YourPasteUpTiddler'/layout” and “Draft of 'YourPasteUpTiddler'/styles” tiddlers available to complete the PasteUp rendering process.

-e

Ah! Is there anyway I could redirect the output of PrintTiddler to a tiddler?

Why? I’m just interested if the render alone is useable (for some use cases).

Not wanting to cause a headache!
Just wondering.

TT