List unknown number of items in a Table - Known number of columns - Unknown number of rows

[S. S.]

I want a compact neat way to present the full listing of images on tiddlywiki.com whose tiddlers are both tagged $:/tags/Image and titles prefixed by $:/core/images/

There might be better ways of doing it than the way I am trying, so any other suggestions would be great!

On the tiddlywiki.com website, the following code:

•    makes a Table
•    in the first row, lists in separate cells:
•       the first 6 images for tiddlers tagged $:/tags/Image
•       puts the suffix of the tiddler title below each image

<$set name="limit" value="6">
<table style="width:80%">
<tr>
<$list filter="[all[shadows]tag[$:/tags/Image]limit<limit>]">
    <td>
    <$set name="image" value=<<currentTiddler>>>
    <$list filter="[<image>removeprefix[$:/core/images/]]">
        <span class="doc-button">
            <$transclude tiddler=<<image>>/> <br><<currentTiddler>>
        </span>
    </$list>  
    </$set>
    </td>
</$list>
</tr>
</table>
</$set>

There are an unknown number of images. In this case it is 104 images.

<$count filter="[all[shadows]tag[$:/tags/Image]]"/>

Major Issue: I want to list all of them using multiple rows. In this case, about 18 rows.
Minor issue: I want to get rid of that first empty column.

I would appreciate some help.

Thanks.

[Mohammad]

Hi S.S,

 Have you seen this

https://tiddlywiki.com/#Formatting%20List%20Results%20as%20Tables%20with%20CSS%20-%20Variable%20Column%20Method

--Mohammad

[S. S.]

Mohammad, thanks! I had forgotten about that.

This is definitely one possibility.

<div class="dynamic-table">
<$list filter="[all[shadows]tag[$:/tags/Image]]">
    <$set name="image" value=<<currentTiddler>>>
    <$list filter="[<image>removeprefix[$:/core/images/]]">
        <span class="doc-button item">

            <$transclude tiddler=<<image>>/><br><<currentTiddler>>
        </span>

    </$list>  
    </$set>
</$list>
</div>

And a $:/tags/Stylesheet tagged tiddler:

<style>
.dynamic-table {
  max-width:80%; /* could transclude tiddler width instead */
  -ms-box-orient: vertical; /* might be unnecessary */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: row;
}

.item {
  max-width:210px; min-width:210px; /* adjust this to give space to longer worded items */
  flex: 0 0 2em; /* -grow, -shrink, -basis */
}
</style>

Looks quite nice - but sure still takes up a lot of room. Perhaps one solution is to make the "suffix of the tiddler title" into a tooltip, and make the image link into a "copy that tooltip to clipboard"

That way only the images need to be listed. If this is the way chosen, I would still appreciate help for this.

[TonyM]

Here is an Image Picker macro

\define edit-fields-image-picker(actions,filter:"[all[shadows+tiddlers]is[image]] [all[shadows+tiddlers]tag[$:/tags/Image]] -[type[application/pdf]] +[!has[draft.of]sort[title]]",subfilter:"")
<div class="tc-image-chooser">
<$vars state-system=<<qualify "$:/state/editFields-image-picker">>>
<$checkbox tiddler=<<state-system>> field="text" checked="show" unchecked="hide" default="hide"> Select Image</$checkbox>
<$reveal state=<<state-system>> type="nomatch" text="hide" default="hide" tag="div"><$macrocall $name="image-picker-list" filter="""$filter$""" actions="""$actions$"""/></$reveal>
</$vars>
</div>
\end

<$macrocall $name='edit-fields-image-picker' actions="<$action-setfield $field='icon' $value=<<imageTitle>>/>"/>

Regards

Tony

[S. S.]

Thanks Tony & Mohammad!

I think I am almost there. The below works quite well.

<div class="dynamic-table">
<$list filter="[all[shadows]tag[$:/tags/Image]]">
    <$set name="image" value=<<currentTiddler>>>
    <$list filter="[<image>

removeprefix[$:/core/images/]]">
<$button message="tm-copy-to-clipboard" param=<<currentTiddler>>tooltip=<<currentTiddler>> class="tc-btn-invisible" >
            <$transclude tiddler=<<image>>/>
        </$button>
    </$list>  
    </$set>
</$list>
</div>

But I cannot get the buttons to be bigger even by using a style:

.doc-images-large svg { height: 2em; vertical-align: text-bottom; }

Any ideas on how I might make the buttons bigger?

On Tuesday, January 29, 2019 at 5:18:52 PM UTC+7, TonyM wrote:

Here is an Image Picker macro

 

Regards

Tony

[TonyM]

I am no expert but you need to set either or both hight="55px" and width= in svg. I believe you can wrap an svg with another svg tag
<svg hight="55px">
Image
</svg>

Tony

[S. S.]

The button size solution was so obvious I almost laughed when I realized the reason.

There's no use changing the svg image size - it's the <button> that needs the styling!

Here is what I finally have:

In the display tiddler:

\define link-to-clipboard(parameter) <<.button-images $(currentTiddler)$>>

<div class="dynamic-table doc-buttons">

<$list filter="[all[shadows]tag[$:/tags/Image]]">
    <$set name="image" value=<<currentTiddler>>>
    <$list filter="[<image>removeprefix[$:/core/images/]]">

<$button message="tm-copy-to-clipboard" param=<<link-to-clipboard>> tooltip=<<currentTiddler>> class="tc-btn-invisible">

            <$transclude tiddler=<<image>>/>
        </$button>
    </$list>  
    </$set>
</$list>
</div>

In a $:/tags/Stylesheet tagged tiddler:

<style>
.dynamic-table {
  max-width:80%; /* could transclude tiddler width instead */
  -ms-box-orient: vertical; /* might be unnecessary */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: row;
}

.item {
  max-width:210px; min-width:210px; /* adjust this to give space to longer worded items */
  flex: 0 0 2em; /* -grow, -shrink, -basis */
}

.doc-buttons button {
font-size: 1.3em;
padding: 0.3em 0.3em;
}
</style>

Looks like this:


Cursor over the image shows the title-suffix as a tooltip - ex: warning
Clicking the button puts the text needed into the clipboard, in the form: <<.button-images warning>>
Now I am almost satisfied. I am wondering if there is a way to change what the button copies to the clipboard if I were to CTRL-click or SHIFT-click the button!

Thanks for all the help!

[Ton Gerner]

Hi S. S.

One small thing:

You don't need `<style> ... </style>` in a stylesheet (tiddler tagged with $:/tags/Stylesheet).
You need `<style> ... </style>` if you embed style e.g. in your image display tiddler.

Cheers,

Ton

[Mohammad]

Good job S.S.

Cheers

Mohammad

[Thomas Elmiger]

Just for those who like alternatives: Here's what I use to list all my icons (copy to clipboard is missing here).
I usually click an image to open it and copy the title from there.

Put this in a tiddler:

System images (ie, tiddlers tagged [[$:/tags/Image]]):

<style>
.my-gallery svg {
width: 1.5em;
height: 1.5em;
margin: 1em;
}
</style>
<div class="my-gallery">
<$list filter="[all[tiddlers+shadows]tag[$:/tags/Image]sort[]]">
<$link tooltip="{{!!title}}">
<$transclude/>
</$link>
</$list>
</div>

Cheers,
Thomas

[S. S.]

Ton, thanks for the heads up on not needing the <style> tag in a tiddler tagged with $:/tags/Stylesheet
Thomas - as expected you have a more elegant way of doing it!

Now for perhaps the last step (is there ever a last step?):

Is there is a way to change what the button copies to the clipboard if I were to CTRL-click or SHIFT-click the button!

[TonyM]

S S,

Add additional actions to your Button to get it to do more than one thing on click, such as navigate to the tiddler.

If you want multiple actions perhaps create a popup in which there is alternative options.

No, I do not know how to address "CTRL-click or SHIFT-click"

Regards

Tony