Autoadding images!

[Mat]

An concept idea to make adding pictures a lot easier.. if it works.

I've described it (and other stuff) on my not-quite-launched TidBits space, but here's a copy:

Inserting of images in TW is typically a very manual task, particularly locally stored ones. Here's an idea making it automatic (well...) :

Keep a local folder (computer or cloud) with //all// pictures for a specific TW. When you save those pictures there, you save them with the name of the tiddler that you'll want them to appear in.

Then, in //tiddler template//, perhaps at bottom, theres a {{{[img[localpath/tiddlername]]}}} where the localpath is hard coded but the tiddlername is a generic 'current' reference.

For multiple pics in one tiddler save pics in that local folder using eg. format //name (1), name (2)// etc. In the tiddler template there's a script that //if// the link {{{[img[localpath/tiddlername]]}}} exists, then also check {{{...tiddlername+1}}} etc. (The suffix //"_(#)"// is Windows default when a filename already exists in a folder. I assume other OS'es use similar solution.)

The main advantage is that you can save pics directly to you folder (always the same one). There's no(?) extra hassle other than naming the image upon saving it - which you're always asked to do anyway!

No image (or file for that matter!) with the current tiddlers name = nothing displayed. And the idea does of course not exclude common/manual {{{[img[..]]}}} use!

Thoughts? Could anybody help out to implement this?

I think handling images (and videos etc) in TW is very under exploited considering the extreme popularity of these features in other services and web tools.

<:-)

[Eric Shulman]

> > name of the tiddler that you'll want them to appear in.

This assumes that the image is to appear in only one tiddler. What if
you want the same image to appear in more than one tiddler? Also, how
will you control placement *within* the flow of the tiddler content?
What about image display options like floatleft [<img[filename.jpg]],
floatright [>img[filename.jpg] and linked images [img[filename.jpg]
[URL]] ? How will those be specified?

> > Then, in //tiddler template//, perhaps at bottom, theres a
> > {{{[img[localpath/tiddlername]]}}} where the localpath is hard coded but
> > the tiddlername is a generic 'current' reference.

It seems like you are proposing to embed local path information within
the ViewTemplate. The purpose of the ViewTemplate is to control the
*layout* of the rendered tiddler (and also sometimes to trigger macros
that have side effects, so that programmed actions can occur whenever
a tiddler is displayed). To define configuration values that are used
throughout the document and need to persist across sessions, you
should store them as slices within the SystemSettings tiddler. (see
http://tiddlywiki.com/#PersistentOptions)

> > For multiple pics in one tiddler save pics in that local folder using eg.
> > format //name (1), name (2)// etc. In the tiddler template there's a script
> > that //if// the link {{{[img[localpath/tiddlername]]}}} exists, then also
> > check {{{...tiddlername+1}}} etc. (The suffix //"_(#)"// is Windows default
> > when a filename already exists in a folder. I assume other OS'es use
> > similar solution.)

This forces you to have multiple images with the same name (albeit a
different numeric suffix). This makes it really difficult to manage
those image files within that directory, without needing some kind of
image viewer to differentiate the files.

> > The main advantage is that you can save pics directly to you folder
> > (always the same one). There's no(?) extra hassle other than naming the
> > image upon saving it - which you're always asked to do anyway!
>
> > No image (or file for that matter!) with the current tiddlers name =
> > nothing displayed. And the idea does of course not exclude common/manual
> > {{{[img[..]]}}} use!

It seems to me that, except for your specific, narrowly-defined use
case, most people will still use the "common/manual" method of
embedding images.

> I think handling images (and videos etc) in TW is very under exploited

> considering the *extreme *popularity of these features in other services
> and web tools.

Consider these:
http://www.TiddlyTools.com/#ImagePathPlugin
http://www.TiddlyTools.com/#AttachFilePlugin
http://www.TiddlyTools.com/#FileDropPlugin

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...
http://www.TiddlyTools.com/#Donations

Professional TiddlyWiki Consulting Services...
Analysis, Design, and Custom Solutions:
http://www.TiddlyTools.com/#Contact

[Mat]

Thanks for your reply Eric!

It seems to me that, except for your specific, narrowly-defined use
case, most people will still use the "common/manual" method of
embedding images.

You're right, people will still need the common/manual methods. But I think my "quick'n dirty"proposal actually isn't that narrow if you consider how often an image at the bottom would simply suffice... especially if appears there almost automatically. Besides, it doesn't conflict with the existing methods.

needing some kind of image viewer to differentiate the files.

Well, there is the built in image (thumbnail) display mode in folders. Surely this is the case for all OS'es but I think even for the more popular cloud storages.

> > Then, in //tiddler template//, perhaps at bottom, theres a
> > {{{[img[localpath/tiddlername]]}}} where the localpath is hard coded but
> > the tiddlername is a generic 'current' reference.

It seems like you are proposing to embed local path information within
the ViewTemplate.  The purpose of the ViewTemplate is to control the
*layout* of the rendered tiddler (and also sometimes to trigger macros
that have side effects, so that programmed actions can occur whenever
a tiddler is displayed). To define configuration values that are used
throughout the document and need to persist across sessions, you
should store them as slices within the SystemSettings tiddler.  (see
http://tiddlywiki.com/#PersistentOptions)

Thank you! Forgive a non-coder but I have some questions:
1) Why would the images in my suggestion need to 'persist across sessions'? ViewTemplate is loaded each session and thereby the images, no?
2) For the simplest user case, as per my proposal, I guess there would be a direct image link(?) ie:  [img[file:///<path>/currenttiddlertitle.png]]
2a) ...is that a macro call? (I thought macro calls are in the format <<macro>> ?)
2b) Is this what I should put in SystemSettings... and as a slice? I know what a slice is but I don't understand how it applies here.
2c) How would I refer to the current tiddler title, generically?

Again, thank you.
I think

[Mat]

Again, thank you.
I think

That last row should not be there. I'm grateful, for sure :-)

[Tobias Beer]

Hi Mat,

I think a method like this can make sense when you want a kind of TiddlyWiki based website with a predefined way of - say - appending some iconic image to a "blog post" or generally to a "page... without doing it in the tiddler.

From my perspective, (hidden) slices or fields are a better and more flexible way though... otherwise you have to keep to many things in mind, e.g. using a slice or field you can easily rename the tiddler while keeping the linked image working.

Cheers, Tobias.

[Mat]

Thanks for your reply Tobias! Yes, something like blog posts could benefit from this. Often fixed layouts. But are you saying it should be limited to merely one iconic image recurring on different tiddlers? I'm thinking more of something to easily include tiddler specific images.

From my perspective, (hidden) slices or fields are a better and more flexible way though... otherwise you have to keep to many things in mind, e.g. using a slice or field you can easily rename the tiddler while keeping the linked image working.

Please elaborate. I don't know if I understand you right, but are you saying it would be better to use slice or field values instead of the tiddler title? Sounds very interesting - but how is the value set by default, ie to achieve the desired automatic display of the image?

<:-)

[Tobias Beer]

What I mean is, to set up your ViewTemplate, e.g.

<div macro='tiddler GetThumb'></div>

...wherever you want the image.

Then some GetThumb would identify what tiddler we are in...

var tid = story.findContainingTiddler( place );

tid = tid ? tid.getAttribute( 'tiddler' ) : '';

...and see if it either had a field or hidden slice called image-thumb or image-full and render it at the appropriate place, if it is set. That content actually could be more than just an image.

Here's how the script would read it from a slice:

var img = store.getTiddlerText(tid + '::myImgSlice');

or getting from a field...

var img = store.getValue( tid ,'fieldname');

...eventually doing something like...

if(img) wikify( img , place);

The entire script should look somewhat like this...

[[GetThumb]]

var tid = story.findContainingTiddler( place );

tid = tid ? tid.getAttribute( 'tiddler' ) : '';

var img = store.getTiddlerText(tid + '##THUMB');

if(img) wikify( img , place);

If you call GetThumb from your ViewTemplate or a conditional ViewTemplate (TaggedTemplateTweak) it should render the contents whenever a tiddler had a hidden thumb section:

/%

!THUMB

[img[path/to/my/thumb.jpg]]

!END%/

Cheers, Tobias.

[Tobias Beer]

Actually, you can simply use a plugin I have just written:

http://get.tiddlyspace.com

If you put this in your ViewTemplate...

<div macro='get ??thumb plain'></div>

...it will try to fetch the field 'thumb' from a tiddler and wikify the contents.

Or you could use....

<div macro='get ##thumb plain'></div>

<div macro='get ::thumb plain'></div>

To do just the same while fetching from a (hidden) section or slice instead...

...all assuming that the field, section or slice contained the required image markup.

Cheers, Tobias.

[Mat]

Returning a bit late here. Anyway;

@anyone
merely putting in <img src="http://... width="x" height="y"> into ViewTemplate works.
How can I make the src contain a generic reference to the current tiddler title?

@Tobias
- your plugin looks interesting but frustratingly I'm not skilled enough to understand how to make it work. However, even if I was, do I understand it correctly that
a) I must manually include a specification for each instance for when I want a file to show up, no? That would kind of go against my original idea to have the image appear automatically.
b) the filename is specified and it is located in the very text field of the tiddler (unless it is a field)?

Thank you!

<:-)

[Måns]

Hi Matt

I use Eric's WikifyPlugin, ImageSizePlugin and HideWhenPlugin for
this:

<div class='someclass' macro='showWhenTagged SomeTag'>
<div class='someclass' macro='wikify [img(12em+,)[%0|http://
someurl.com/SomeDirectory/%0.jpg][http://someurl.com/SomeDirectory/
%0.jpg]] title@here '>
</div></div>

I recon it should be possible to do it without any additional plugins
via the tiddlermacro - like this:

SomeTiddler

<html><img src="http://someurl.com/SomeDirectory/$1.jpg" style="max-
height: 12em; max-width: auto;" /></html>

and

ViewTemplate

<div class='someclass' macro='tiddler SomeTiddler with:
{{tiddler.title}}'></div>


Cheers Måns Mårtensson

[Mat]

Wohoo! That's great Måns!

Demo (without ShowWhen installed)

The plugin version does work (google logo) but something's wrong with the second (wikipedia logo). I thought it might require a HTMLFormattingPlugin, but that didn't solve it. Not that it has to be solved now that the first one works so well :-)

This is great! Now even my kids can add pictures to tiddlers as long as they are stored in a decided upon folder.

Thank you all! (BTW, I'm still curious about Tobias solution and will try it out again)

<:-)

[Måns]

Hi Mat

When you are using a TW on tiddlyspace evaluated parameters are turned
off.

If you create a tiddler: zzConfig tag it with systemConfig and write:

/*{{{*/
config.evaluateMacroParameters = "full";
/*}}}*/

it works as it would in a "plain" TW

Check out:

http://testimg.tiddlyspace.gir.dk/#Wikipedia-logo.png%20zzConfig


Cheers Måns Mårtensson

On 2 Apr., 18:25, Mat <matiasg...@gmail.com> wrote:
> Wohoo! That's great Måns!
>

> Demo<http://test33.tiddlyspace.com/#Wikipedia-logo.png%20logo4w.png%20View...>(without ShowWhen installed)

[Mat]

Great!! Thanks Måns! :-D

I'm guessing it is the {{tiddler.title}} that is an "evaluated parameter"
(i.e for anything in tspace using {{..}} one needs that config.evaluateMacroParameters = "full"; - correct?)

<:-)

[Måns]

Hi Mat

I'm guessing it is the {{tiddler.title}} that is an "evaluated parameter"
(i.e for anything in tspace using {{..}} one needs that config.evaluateMacroParameters = "full"; - correct?)

http://tiddlywiki.tiddlyspace.com/Evaluated%20Parameters

Cheers Måns Mårtensson