Tiddler Snapshot / thumbnail

[Mohammad]

I want to list all tiddlers tagged with say slide and show then as thumbnail. I developed the below code

<style>

.md {column-count:2;}

.tiddler-box {

    min-height:200px;

    border:solid lightgrey 1px;

    padding:10px;

    box-shadow:5px 5px 5px #888888;

}

</style>

<div class="md">

<$list filter="[tag[slide]]">

<div class="tiddler-box">

<$transclude mode="block"/>

</div><br>

</$list>

</div>

The problem is I cannot have all contents in specified size as a thumbnail. any idea?

[JD]

Hi Mohammad,

Maybe you can try this 2d transform css property: scale()

add this property to your tiddler-box class:

.tiddler-box {
    min-height:200px;
    border:solid lightgrey 1px;
    padding:10px;

    transform: scale(0.5);

    box-shadow:5px 5px 5px #888888;
}

that is, scaled to 50%

maybe tiddler-box should also have a max-height? 

ref: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_scale2

-jd