The Amazing PasteUp of @EricShulman

Right! I forgot to say 83.47% of TW users have FFs. :slightly_smiling_face:

Another small issue.

The option on “Background” tiles (great!) but could we have a “stretch to fill” Option too?

Why? Here is an example where I’ve got stuck in tiling where I need stretch…

TT

Good suggestion… and relatively easy to add!

You can now select “[x] stretch-to-fit” in the PasteUp “settings” (gear) popup. If you are using TiddlyTools/PasteUp/Embed, you can specify bgsize:"100% 100%" to apply stretch-to-fit.

See background-size - CSS | MDN for other values you can use for this parameter.

Get the latest updates here:
TiddlyTools/PasteUp
TiddlyTools/PasteUp/Info
TiddlyTools/PasteUp/Embed

enjoy,
-e

2 Likes

Thanks! Looking good already …

I have not learned how to use this yet, but it introduces real possibilities of crafting great landing pages for public wikis, good start pages and more.

nice work @EricShulman

In another thread, @nemo wrote:

That’s a nice idea. In the “Settings” (gear) popup I have added a “chevron-down” button that gives you a drop-down $select list of preset grid sizes to choose from. This list is populated from the contents of $:/config/TiddlyTools/PasteUp/Sizes, which currently has the following lines, where the format of each line is “gridwidth,gridheight|description

34,44|US letter (8.5in x 11in)
34,56|US legal (8.5in x 14in)
42,60|A4 (210mm x 297mm)
20,20|square (1:1)
30,20|photo (3:2)
32,18|wide (16:9)

By using a separate configuration tiddler, it enables you to edit the list to add your own preferred preset grid sizes.

Get the new/updated tiddlers here:
TiddlyTools/PasteUp
$:/config/TiddlyTools/PasteUp/Sizes

enjoy,
-e

2 Likes

While testing the Settings popup grid size inputs, I accidentally entered a width of “5000” instead of “50” (due to a “keybounce”). The result was that the code attempted to render a layout grid containing 5000 x 30 $button widgets (that’s 150,000 buttons!), which immediately “bricked” my TiddlyWiki :frowning:

To prevent this, I’ve added code in layout_grid() that limits the width/height values to a minimum of 10 and a maximum of 100 in each dimension, regardless of the values entered in the Settings popup.

This permits up to 10,000 $button widgets (100x100) in the layout grid. While this can still cause a processsing slowdown, it seems like a reasonable solution to prevent a full “brick” from occurring.

These limits are currently hard-coded; should they be configurable?

Can you think of a situation where you would want less than 10 or more than 100 grid buttons in either dimension?

-e

1 Like

Yes. I could imagine designing a banner or menu strip that had very few rows (5 or less).

I can’t imagine ever needing more than 100 rows or columns.

Best, TT

OK… I’ve adjusted the limits to be between 1 and 100.

-e

1 Like

new improvements to “Settings” popup:

  • background list now includes all non-system images (not just [tag[texture]])
  • “stretch” checkbox replaced by $select list: tile, center, width, height, or stretch, where:
    • tile (default) = repeats background image without scaling
    • center = single background image in center of layout without scaling
    • width = repeats background image vertically with stretch to fit width
    • height = repeats background image horizontally with stretch to fit height
    • stretch = single background image with stretch to fit both height and width

enjoy,
-e

1 Like

Brilliant!

This helps, also, illustrate that once you have a grid (the set of 3 = D L S) fully designed you can clone it.

I’ve found that when you have a layout you want to use again it is easy and quick to clone it and get to results without having to do much new.

A comment
TT

I’ll definitely add …

24,6 | Polyvision 1927 (4:1 = 1.33333:1 X 3)

:slightly_smiling_face:, TT

I thought about it.

Maybe those 3 (only) should also have Landscape format on the default options list too?

I just say that because they are in common usage.

Best, TT

List of page size presets has been updated:

34,44|US letter (portrait)
44,34|US letter (landscape)
34,56|US legal (portrait)
56,34|US legal (landscape)
42,60|A4 (portrait)
60,42|A4 (landscape)
20,20|square (1:1)
30,20|photo (3:2)
32,18|wide (16:9)

-e

2 Likes

Page size presets $select widget has been enhanced:

In addition to listing preset page sizes, it now also includes an “edit list…” item (at the bottom of the list). When you select this item, instead of setting the layout width and height values, it navigates to $:/config/TiddlyTools/PasteUp/Sizes and opens it for editing.

enjoy,
-e

1 Like

Update to TiddlyTools/PasteUp and $:/config/TiddlyTools/PasteUp/Sizes:

The “Settings” page size preset $select list shows the full text of each line from the $:/config/TiddlyTools/PasteUp/Sizes tiddler, and the format used to specify the width and height have changed so that it is now clear what width and height values are used for each preset.

34 x 44 = US letter (portrait)
44 x 34 = US letter (landscape)
34 x 56 = US legal (portrait)
56 x 34 = US legal (landscape)
42 x 60 = A4 (portrait)
60 x 42 = A4 (landscape)
20 x 20 = square (1:1)
30 x 20 = photo (3:2)
32 x 18 = wide (16:9)

enjoy,
-e

2 Likes

I was doing some experiments on using the grid for full screen Tiddlers.
Looking good!

Here is a screenshot of 6 iframes of stuff on my computer.
The underlying grid is only 6 columns by 4 rows.

Later I’ll figure out how to change, at will, the sizing of each item.

Perhaps you can write some custom wikitext scripting that modifies the corresponding field in the /layout tiddler.

For example, let’s assume that all the iframes are on the default layer (i.e., no “z” values). Their /layout fields would be something like:

iframe1: 1,1,2,2
iframe2: 1,3,2,4
iframe3: 1,5,2,6
iframe4: 3,1,4,2
iframe5: 3,3,4,6

To “maximize” or “restore” a particular iframe, you could write something like this:

<$let max="1,1,4,6,2">
<$tiddler tiddler="$:/temp/frame">
<$select field=thisframe>
   <option>iframe1</option>
   <option>iframe2</option>
   <option>iframe3</option>
   <option>iframe4</option>
   <option>iframe5</option>
</$select>
<$let save={{{ [[saved_]addsuffix{!!thisframe}] }}}>
<$button>maximize {{!!thisframe}}
<$action-setfield $field=<<save>> $value={{{ [[MyLayout/Layout]get{!!thisframe}] }}}/>
<$action-setfield $tiddler="MyLayout/Layout" $field={{!!thisframe}} $value=<<max>>/>
</$button>
<$button>restore {{!!thisframe}}
<$action-setfield $tiddler="MyLayout/Layout" $field={{!!thisframe}} $value={{{ [<currentTiddler>get<save>] }}}/>
</$button>
</$let>
</$tiddler>
</$let>

Notes:

  • max includes a “Z” value of 2. This ensures that the maximized iframe will be drawn on top of all the other iframes.
  • The previous layout for iframeN is stored in saved_iframeN of the $:/temp/frame tiddler so it can be restored later on.

-e

1 Like

TiddlyTools/PasteUp bug fix (gasp!!!) for drag-and-drop handling:

  • drag-and-drop to add field from field table to grid was ignored when field value was blank.
  • drag-and-drop to move field in grid was ignored when field value was blank.

Note that adding/moving of fields with “blank” values was already correctly handled by directly editing the field’s layout values in the field table.

-e

2 Likes

Brilliant! Thankyou!

I got that working and am trying extend it.

I’ll report back when I’m finished.

TT