Images in TW - correct usage question

[Shay Shaked]

Hello, 

I want to create the following HTML affect in TW: 

<a href="TW_Media/image.png" target="_blank"> 

<img src="TW_Media/image.png" width=400 ></a>

Yes, this works no problem. But the notion of using an HTML snippet every time I want to create an image makes me feel somewhat of a defeat I guess.. it feels like "cheating." I am wondering if this ability exists in TW 5.0 as is. Now, I know that implementing it with  tiddler links would probably work, such as: 

[img[TW_Media/image.png][imagetiddler]]

(also, is my syntax correct?)

But... here's the thing, and this is purely an opinion: is that how TW meant to work? A tiddler with an image has to have an image imported into it, if I understand correctly, or can it link to outside source? Even if it can (I'm not sure), do you guys use TW this way, with images and perhaps audio files and such imported into your TW, and if so, do you add extra fluff to it like information about the source and where it was taken from? And of course, why do you use it this way, or not? Again, I'm just curious for your usage "ethics" I guess. 

[Mark S.]

Surprisingly, the syntax in TW5 doesn't allow you to insert a link with an image. You could make a macro to wrap the image so you didn't have to repeat the process. Yes, it does feel like cheating.

An image tiddler doesn't always have to have an imported image. You can specify an image in the friendly-named "_canonical_uri" field of the image tiddler. After that, transcluding the tiddler will display the image. Look for the tiddler ExternalImages at TiddlyWiki.com for explanations.

Have fun,
Mark

[Tobias Beer]

Hi Shay,

If you want a more generalized macro, try

linkimg @ tb5

In general, I would think the behaviour from TWC
simply hasn't been implemented yet, not exactly sure why.

The unfortunate side effect of that might be
that now it's possibly too late for that,
because of backwards compatibility.

Best wishes,

Tobias.

[Shay Shaked]

Thanks Tobias.

I don't know enough about macros to create or build one but sounds useful. For now I guess I can copy paste...

On Wed, Oct 26, 2016, 12:56 Tobias Beer <beert...@gmail.com> wrote:

Hi Shay,

If you want a more generalized macro, try

linkimg @ tb5

Best wishes,

Tobias.

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/26qvQ1cSysk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@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/e305b2b7-1abf-47c6-8db4-65f8a647d09d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ton Gerner]

Hi Shay,

It is very simple:

Create a tiddler, e.g. $:/_image-thumbnail-macro, tagged with $:/tags/Macro, which contains:

\define image(source)
<a href="TW_Media/$source$" title="tooltip" target="_blank">
<img src="TW_Media/$source$" width="" height="400"/></a>
\end

Then you can use the macro as follows:

<<image "image.png">>

Hope that helps,

Ton

[Shay Shaked]

Hi Ton, 

I think I understand the usage here. How can I add CSS into the mix, as what I want it also float and a margin for the image (otherwise it touches the text)? 

[Tobias Beer]

Hi Ton,

 

It is very simple:

Create a tiddler, e.g. $:/_image-thumbnail-macro, tagged with $:/tags/Macro, which contains:

...it's kind of interesting, these entry-level barriers that kinda force every newcomer to take a moment and ponder the workings of TiddlyWiki, so as to learn to make good use of it rather than just rely on pre-baked components and solutions.

Best wishes,

Tobias.

[Shay Shaked]

This is amazing stuff! 

I worked on the macro to reflect the style I want: 

\define image(source)
@@.TW-image

<a href="TW_Media/$source$" title="tooltip" target="_blank">

<img src="TW_Media/$source$" width="" height="250"/></a>
@@
\end

where .TW-image is as follows: 

.TW-image{
    float: right;
    margin-left: 10px;
    width: 250px;

}

And it all works fine in the macro. 

Here's the last thing I want: the ability to add a caption below. 

In the past, I wrote the whole thing down like so: 

@@float: right;

<a href="TW_Media/image.png" target="_blank">

<img src="TW_Media/image.png" width=400 ></a><br>^^this is the caption^^
@@

And I had the ability to add the caption as you can see. But now if I throw it into the macro, it will give me the same caption each time. What I'm looking for is something kinda like this:

\define image(source)(caption)

I know the syntex is wrong. How do I tell the macro I need to put in two "variables" (not sure that's the right term)? 

[Shay Shaked]

[Shay Shaked]

Ah HA! Answered my own question. 

Went to the official TW pages. Like always, if you just look at them without having some previous hints provided to build on (like I got here in this awesome group) I wouldn't know what to do. But, looking at the syntax, I tried this: 

\define image(source caption)

@@.TW-image
<a href="TW_Media/$source$" title="tooltip" target="_blank">

<img src="TW_Media/$source$" width="" height="250"/></a><br>^^$caption$^^
@@
\end

And walla! an image AND a caption defined within a single line, without the need of adding a 10px margin physically via photoshop (which is how I've done it so far). 

I really hope this will be useful for anyone else needing help! it worksss!

On Friday, October 28, 2016 at 7:27:37 AM UTC-4, Shay Shaked wrote:

[Ton Gerner]

Hi Shay,

Learning by doing, the best way ;-)

Instead of using the @@ syntax, you could add a class="TW-mage" to the <img ... >.

And if you need different styles for your images, you can add a style to your macro as well:

\define image (source,caption,style)
...
<img ...class=$style$ ...>
\end

Cheers,

Ton

[Ton Gerner]

Hi Tobias,

Yeah, I remember it took me a while before I wrote my first macro ;-)

Cheers,

Ton

[Shay Shaked]

Oh yes, additional options to describe different macros could be awesome... for example if I want an image to float left instead of right, or change its width... man I love the options with TW. 

--

You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/26qvQ1cSysk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@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/fefb5620-f48a-4610-85a8-823ea8ba97f4%40googlegroups.com.

[PMario]

On Friday, October 28, 2016 at 3:51:07 PM UTC+2, Shay Shaked wrote:

Oh yes, additional options to describe different macros could be awesome... for example if I want an image to float left instead of right, or change its width... man I love the options with TW. 

Hi Shay,

You may want to try these macros. ...
Just drag and drop import the .json file and have a look at the source.  .. Since float left and right need a clearfix, have a look at the .CSS file, how it's done.

have fun!
mario