Floating Images HowTo

[pmario]

How to Wrap Text Around Images

If you want to let text flow around images there are some CSS-rules, like float-left and float-right, that can make it happen.

Left / Right Aligned Image

Using the following 2 classes assigned to the image, it will automatically arrange the text around the image. With the padding: setting you can adjust the gap between the image and the text.

.image-float-right {
    float: right;
    text-align: center;
    padding: 0.5em 0 1em 1em;
}

.image-float-left {
    float: left;
    text-align: center;
    padding: 0.5em 1em 1em 0;
}

Centered Image

Centering an image should make it more prominent and should not flow text around it. So it uses margins and text-align: center rule to center the image

.image-center {
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

Macros

The attachment linked below contains 3 macros that can be used to arrange the images – left, center or right.

<<image-left "Motovun Jack.jpg">>
<<image-center "Motovun Jack.jpg">>
<<image-right "Motovun Jack.jpg">>

Demo

Here is a little attachment with some description, a stylesheet tiddler and 3 macros.

floating-images-howto.json (2.9 KB)

More Info About Float

See: float - CSS | MDN

Float Clearfix

The CSS rules need a “clearfix”, which prevents an image near the end of a tiddler to “overflow” the tiddler frame.

.tc-tiddler-frame:after,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

have fun!
mario

[Thomas_Chuffart]

Ver useful and instructive, thank you. But I onder what could be the syntax to use your macros with an image link buried in a tidller field?

I tried <<image-left {{!!MyImage}}>> and MyImage field fill with “Motovun Jack.jpg” but with no success.

Is there a way to do so ?

[tw-FRed]

When macro parameters are not constant values, but variables, filters or text references, the <<macroname ...>> shortcut syntax can’t be used.
In these cases, you can use the <$macrocall> widget, or the <$transclude> widget (on recent TW versions).

Examples:

<$macrocall $name="image-left" name={{!!MyImage}}/>

<$transclude $variable="image-left" name={{!!MyImage}}/>

These examples might be slightly confusing because the image-left macro has a name parameter, and the <$macrocall> widget has a $name parameter. See the official documentation here and here for a better explanation.

Fred

[myfta]

I have found this float-left and float-right a useful feature.

Sometimes I want to be able to use a Lightbox for images within the tiddler. I use the @saqimtiaz plugin Spotlight to achieve this.

It requires that I add

<!-- also needs SQ Filters plugin -->
\procedure spotlight-actions()
<$action-spotlight
	$images={{{ [<storyTiddler>_images[]format:titlelist[]join[ ]] }}}
	$start=<<dom-src>>
/>

\end

<$eventcatcher $click=<<spotlight-actions>> selector="img" class="spotlight-mixmedia-example">

to the tiddler. However it does not work if I’m also using <<image-left>>

Is there someway I could get say a left loating image and Spotlight still work?

The float-left macro is:

\define image-left(name, width:"33%", tooltip, caption)
\whitespace trim
<div class="image-float-left" style={{{ "width:" [<__width__>] +[join[]] }}} >
  <div><$image source=<<__name__>> width="100%" tooltip=<<__tooltip__>> /></div>
  <<__caption__>>
</div>
\end

and the related CSS for the macro is:

.image-float-left {
    float: left;
    text-align: center;
    padding: 0.5em 1em 1em 0;
}

.tc-tiddler-frame:after,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Maybe there is a tidier way of achieving this?

Thanks

[pmario]

hmmm. That’s strange. According to the documentation it should work.

@saqimtiaz … It seems the _images[] filter does not find the images if they are called with macros. But I am not sure why. I did not have a closer look into the code yet.

[saqimtiaz]

The _images filter works similarly to how links[] works, by looking at the parseTree. So when you don’t references images directly in the wikitext, they aren’t picked up.

You can try _images:all[], which wikifies the tiddler to extract all the images, but is also therefore more computationally heavy.

[myfta]

As it happens I only usually have one or two images in the tiddler. It does work for me.

[pmario]

@saqimtiaz

The _images filter works similarly to how links works

OK, then it uses the parse-tree to search for the image marker. It does not see the image widgets, since they are only visible in the widget-tree. The parse-tree for procedures or macros does not show links or images, it still shows this info as unresolved parameters.