thumbnail images from tiddlers

[Mohammad]

Is there any way to produce thumbnail images from tiddlers say tagged with someTag?

for example:

<$list filter="[tag[someTag]]">
 <<produce-thumbnail-images>>
</$list>

It seems trasclude does not keep the source format (those applied by css to special tagged tiddlers)!

I want to use later list widget to show like gallery for quick view these tiddlers.

Mohammad

[FrD]

Hi,

Go to https://tiddlywiki.com/#Community, tab "latest" for instance.

If it's what you want, go to the tiddler which is the content of this tab : https://tiddlywiki.com/#Latest

Look at the code.

I believe the trick is in the css classes "tc-link-info" and "tc-link-info-item".

Regards

FrD

[Mohammad]

Hello FrD,

 Good hint! but it does not correctly show when images and other elements are in tiddler!

By the way as you said one way is using CSS! but it will be specific!

I am looking for a method to produce thumnail images for example 200px x 200px from every tiddler tagged say with someTag and it can be anything

with different formats and like that.

Mohammad

[Mark S.]

You could apply a template:

<$list filter="[tag[picture]]">
 {{||imageTemplate}}
</$list>

with template imageTemplate:

<$image source=<<currentTiddler>> width="150"/>

You can also supply the template via the "template" clause of the list widget.

-- Mark

[Mohammad]

Thank you Mark!

 But does this code show any tiddler as an image? I mean tiddler have only text or tiddler with both text and images or text and tables?

/Mohammad

[Mark S.]

Oh sorry. I misunderstood what you wanted.

-- Mark

[Mohammad]

Thank you Mark!

Is it possible to transclude a tiddler with its all contents? For example a tiddler has a title, subtitle, some fields, and a text filed and then some other elements come from ViewTemplate (those we can apply through $:/tags/ViewTemplate).

Mohammad

[Mark S.]

You can. You can even use the existing template.

<style>
.myclass img {
min-width: 50%;
min-height: 50% ;
max-width: 50%;
}
</style>
<div class="myclass">
<$list filter="[tag[TableOfContents]]" >
{{||$:/core/ui/ViewTemplate}}
</$list>
</div>

What I've done here is wrap it with my own class and then apply restrictions for images. But you would need to work out what you wanted in terms of size reduction for various font tags (eg H1, H2, P, etc.) and buttons, and other entities. You can see that the SVG buttons are now optimized for visibility ;-) 

But I'm not sure if this really gets you where you want. There's no way that I know of to "crop" the tiddlers. Perhaps one of the CSS gurus will know some tricks that would make that possible.

HTH

-- Mark

[Ton Gerner]

Hi Mohammad,

I think the (far from complete) Zoomable storyview plugin (AKA Cecily, available in the plugin library) is what your are looking for.

Cheers,

Ton

[Mohammad]

Thank you Mark!

 Thats right! Your solution works! I need to develop some css to customize elements in the thumbnail show!

Mohammad

[Mohammad]

Hi Ton,

 I had a look, it uses JS to implement Cecily!

But yes, I can modify it to fit in my case! I will first go through CSS !

Cheers

Mohammad 

[Mohammad]

Mark,

 I found this thumbnail macro in Tiddlywiki.com

https://tiddlywiki.com/#%24%3A%2Fcore%2Fmacros%2Fthumbnails

But It uses images to show as thumbnail not tiddler containing wiki text!

By the way, I think the best is to sit and write css code to have my own thumbnail macro!

/Mohammad

[Eric Shulman]

On Tuesday, July 31, 2018 at 8:54:12 PM UTC-7, Mohammad wrote:

By the way, I think the best is to sit and write css code to have my own thumbnail macro!

Try the CSS "transform" and "transform-origin" properties.

Something like this:

<style> .scale25 { display:block; transform:scale(0.25); transform-origin:top left; } </style>
@@.scale25 <$list filter="[tag[HelloThere]]"> <$transclude /> <hr> </$list> @@

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki: The Missing Manuals

[Mohammad]

Hello Eric,

 Thank you for your solution! I need to adjust the value, but seems it is working!

By the way, how I can transclude a tiddler in the below code, If I want to have a snapshot of tiddler. I mean here I want to show the tiddler with its all contents and properties like (title/subtitle,text, original format, ...)

I wish to have an exact snapshot!

@@.scale25 <$list filter="[tag[HelloThere]]"> <$transclude /> <hr> </$list> @@

Mohammad

[Mohammad]

One more question:

Does this code also scale images embedded inside tiddlers or I have to have another CSS to do that?

<style> .scale25 { display:block; transform:scale(0.25); transform-origin:top left; } </style>

Mohammad

[Alex Hough]

an idea: maybe transclude through a template?

ALex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ae83e09a-5d3f-4d0a-9408-c201ecf30391%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mark S.]

Making your own images would be the most obvious and precise way of doing this. It would also mean of course that you would have to regularly update. I'm sure there's various screen-capture utilities that could help, but it would still take awhile if you have a lot of tiddlers.

-- Mark

On Tuesday, July 31, 2018 at 8:54:12 PM UTC-7, Mohammad wrote:

[Mohammad]

Thank you Mark for your time and help.

Yes, I saw the Tiddlywiki.com has done the same! But I will go through css and I think If I can develop some css code with a good template I will be able to create the thumbnail!

The application for me is to have all my slides in a presentation (in tiddlyshow app) as thumbnail and then by clicking one of them navigate to it!

The tiddler without images now can be transcluded in desired size and format but tiddler with images (as images in different tiddlers have very different size it is a bit tricky!)

Cheers

Mohammad

[TonyM]

Mohammad,

It would be nice for this to be automated, but if you needed thumbnails to be generated for slides you could do so with each slide using open in new window, a good capture tool like snagit, resize the image then drag it to the wiki, the add the image title to a thumbnail field.

Using this method you could annotate, title, frame each thumbnail, I have a workflow that could do this in 30-60 seconds per slide.

In many cases there is no harm if the content of the slide changes a little.

Just saying;

Tony

[Ste Wilson]

Didn't someone do a plugin to show thumbnails when you hovered over the link to the tiddler?

[Mohammad]

Hello Tony

Thank you for your comment,.

I am focusing on css and I got rather satisfactory results.

I will share the results once I got every issue resolved!

Mohammad

[Mohammad]

Ste,

 That would be great! I did not find any! Hopefully I will develop that

Mohammad

[Ste Wilson]

tobibeer.github.io/tw5-plugins/#preview

Thats the one!

[Mark S.]

But they're full sized -- not thumbnails.

-- Mark

On Thursday, August 2, 2018 at 8:32:40 AM UTC-7, Ste Wilson wrote:

tobibeer.github.io/tw5-plugins/#preview

Thats the one!

[Ste Wilson]

Ahh...
I couldn't remember the details of the plugin but the thumbnails scratched the pitch of memory.

Sorry for the misinformation :)

[Mohammad]

Announcement

(this is a duplicate of another post: https://groups.google.com/d/msg/tiddlywiki/0AzyNXwRciU/o24qp_q2AAAJ)

This post is duplicated here to be able to follow up the history and discussion related to thumbnails. The announcement

has been started in a new post! 

http://thumbnails.tiddlyspot.com/

Thumbnails is a set of css and macro to create thumbnails ( small images) from tiddlers.

• Each thumbnail is clickable
• Thumbnails are numbered sequentially. The order can be changed (for example using the tiddler list filed, Edit Seasons tiddler to see an example)
• The thumbnails can be customized in color, font, size and other visual properties
• The main purpose is to create thumbnails for slides in a presentation (used in Tiddlyshow App)

Many thanks to all great people in this forum specially the comments by Mark S are highly appreciated!

Minor issues:

• Thumbnail create a snapshot of tiddler content not an exact image of the tiddler
• The properties come from ViewTemplate are not shown in thumbnails
• The properties come from Custom styles by data-tags are not shown in thumnails
• Images may need to be adjusted in size

I appreciate to have your comments and feedback on this code. I kindly request for help to resolve the minor issues.

Best

Mohammad