image markup

smorisi

unread,

Jan 17, 2008, 4:24:40 PM1/17/08

to TiddlyWiki

I have been using this markup to post photos
[img[NewYearEveTable.jpg]]

But I'd like to apply (at least) width and height markup like standard
html

<img src="NewYearEveTable.jpg" width="300" height="200" />

is this possible with tiddlywiki markup?
is there a reference which lists all the options of the markup
language?

Thanks much

Eric Shulman

unread,

Jan 17, 2008, 4:55:17 PM1/17/08

to TiddlyWiki

On Jan 17, 1:24 pm, smorisi <smor...@iso.com> wrote:
> I have been using this markup to post photos
> [img[NewYearEveTable.jpg]]
>
> But I'd like to apply (at least) width and height markup like standard
> html
>
> <img src="NewYearEveTable.jpg" width="300" height="200" />
>
> is this possible with tiddlywiki markup?

I'm working on a new plugin ("ImageSizePlugin") that will extend the
[img[...]] syntax to let you specify width/height, using something
like:
"[img(x,y)[...]]"
where x and y are any valid CSS width/height attribute values (e.g.,
"300px", "30em", "80%", etc.)

Fortunately, until this new plugin is available, there IS a way to
change the size of the images using a CSS "class wrapper". First, in
[[StyleSheet]], add:
.resize img { width:300px; height:200px; }
then, in your tiddler content, embed:
{{resize{[img[...]]}}}

...and, for an interesting 'auto-stretch' effect, try this in
[[StyleSheet]:
.stretch img { width:100%; }
and embed this in tiddler content:
{{stretch{[img[...]}}}
The result: the image is scaled to fit the width of the tiddler in
which it appears.

Note that the *height* of each image is automatically scaled
*proportionally,* so that the overall aspect-ratio of the image is
preserved.

HTH,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

smorisi

unread,

Jan 17, 2008, 6:25:33 PM1/17/08

to TiddlyWiki

Thanks

Ken Girard

unread,

Jan 17, 2008, 6:32:59 PM1/17/08

to TiddlyWiki

Another option is to put <html> and </html> around your

It takes a little more typing, but if you already speak html, why not
use it.
Ken Girard

Eric Shulman

unread,

Jan 20, 2008, 11:34:11 AM1/20/08

to TiddlyWiki

> > I have been using this markup to post photos
> > [img[NewYearEveTable.jpg]]
> > But I'd like to apply (at least) width and height markup like standard
> > html
> > <img src="NewYearEveTable.jpg" width="300" height="200" />

> I'm working on a new plugin ("ImageSizePlugin") that will extend the
> [img[...]] syntax to let you specify width/height, using something
> like:
> "[img(x,y)[...]]"
> where x and y are any valid CSS width/height attribute values (e.g.,
> "300px", "30em", "80%", etc.)

http://www.TiddlyTools.com/#ImageSizePlugin

is now available. The new, extended image syntax is: [img(x,y)[...]]

where x and y are the desired width and height of the image, specified
using CSS units of measurement (e.g., px, em, cm, in, or %).

Using % will make the image 'auto-stretch/shrink' in response to
changes in the window size. Using 'em' will adjust the image based on
the font size of the containing element. All other measurement units
produced fixed-sized images.

Use auto (or omit the value) for either width OR height to scale image
proportionally, e.g., [img(200px,auto)[file.jpg]]

Of course, if you omit the (x,y) portion of the syntax or use
"(auto,auto)", the 'native' size of the image (as stored in the gif/
jpg/png file) will be displayed.

Plus... you can also **calculate a CSS value on-the-fly** by using
{{...}} to insert javascript code in place of either (or both) of the
CSS value(s), e.g.:
[img({{...}},{{...}})[file.jpg]].

This allows you to change the size of the image based on values set by
other plugins, scripts or even the <<option>> macro, e.g.:
<<option txtLogoWidth>> <<option txtLogoHeight>>
and
[img({{config.options.txtLogoWidth}},
{{config.options.txtLogoHeight}})[images/logo.jpg]]

enjoy

G.J.Robert

unread,

Jan 30, 2013, 8:57:47 AM1/30/13

to tiddl...@googlegroups.com, TiddlyWiki

This plugin rocks!!! Thanks to Eric!

Eric Shulman於 2008年1月21日星期一UTC+8上午12時34分11秒寫道：

Reply all

Reply to author

Forward