[TW5] Floating Images with Text

[Senechaux]

"float"ing images with text in TWC was drop-dead easy.  Having no luck with TW5.1.11.  Can someone provide a link or post with a way to do this in TW5 using a macro/widget so float value can vary with each image?  I like the idea of using image tiddlers (to reference in a macro, for instance) but need the localized float value for each image (or image tiddler) use.

I've read some number of posts (in WikiDev as well) regarding this but haven't found a solution that works and nearly as simple as TWC.

[Eric Shulman]

On Tuesday, February 2, 2016 at 2:45:33 PM UTC-8, Senechaux wrote:

"float"ing images with text in TWC was drop-dead easy.  Having no luck with TW5.1.11.  Can someone provide a link or post with a way to do this in TW5 using a macro/widget so float value can vary with each image?  I like the idea of using image tiddlers (to reference in a macro, for instance) but need the localized float value for each image (or image tiddler) use.

I've read some number of posts (in WikiDev as well) regarding this but haven't found a solution that works and nearly as simple as TWC.

Although the TWC method of floating images (using [<img[...]] and [>img[...]]) is, as you noted, "drop-dead easy", it is still relatively easy to float images in TW5, by enclosing the [img[...]] syntax within an **inline CSS wrapper**, like this:

@@float:left;[img[...]]@@
@@float:right;[img[...]]@@

Any text content following these floating images will flow alongside instead of below the images, as desired.  To force the text flow to appear below a floating image, you can use any of these, as suited to your needs

@@display:block;clear:left;@@
@@display:block;clear:right;@@
@@display:block;clear:both;@@

enjoy,

-e

[Senechaux]

Hi Eric,

Appreciate the tip (and won't argue the obvious "increased syntax complexity" compared to TWC), I'm still not seeing the desired effect.  No text seen along side this example:

Also viticulturally part of Burgundy are Beaujolais, Chablis, and Mâcon, and they show some similarity. However, a wine from one of these regions would rarely be referred to as a "Burgundy."
@@float:right;[img width=30% [https://c1.staticflickr.com/1/6/7665555_dc67d4b5a7_b.jpg]]@@
Burgundy is home to some of the most expensive wines in the world, including those of Domaine de la Romanée Conti. Burgundy is in some ways the most terroir-oriented region on the planet; immense attention is paid to the area of origin, and in which of the region's 400 types of soil a wine's grapes are grown.

 

Am I misunderstanding something?

[Eric Shulman]

On Wednesday, February 3, 2016 at 12:31:10 AM UTC-8, Senechaux wrote:

Hi Eric,

Appreciate the tip (and won't argue the obvious "increased syntax complexity" compared to TWC), I'm still not seeing the desired effect.  No text seen along side this example:

Also viticulturally part of Burgundy are Beaujolais, Chablis, and Mâcon, and they show some similarity. However, a wine from one of these regions would rarely be referred to as a "Burgundy."
@@float:right;[img width=30% [https://c1.staticflickr.com/1/6/7665555_dc67d4b5a7_b.jpg]]@@
Burgundy is home to some of the most expensive wines in the world, including those of Domaine de la Romanée Conti. Burgundy is in some ways the most terroir-oriented region on the planet; immense attention is paid to the area of origin, and in which of the region's 400 types of soil a wine's grapes are grown.

 

Am I misunderstanding something?

hmm.... I went to TiddlyWiki.com and created a tiddler with the following content:

Also viticulturally part of Burgundy are Beaujolais, Chablis, and Mâcon, and they show some similarity. However, a wine from one of these regions would rarely be referred to as a "Burgundy."

@@float:right;[img width=30% [Motovun Jack.jpg]]@@

Burgundy is home to some of the most expensive wines in the world, including those of Domaine de la Romanée Conti. Burgundy is in some ways the most terroir-oriented region on the planet; immense attention is paid to the area of origin, and in which of the region's 400 types of soil a wine's grapes are grown.

and.... the picture of the cat DOES float right.  So... it must be something peculiar about the image you are trying to display... though I have no idea how the image itself could be forcing a newline.

very odd indeed!

-e

[Joe Moon]

I simply added classes to a custom style sheet, then reference those classes in the image.

CSS:

.img-center {margin: 0.5em auto;  display: block;}
.img-left {float: left; margin-right: 0.5em;}
.img-right {float: right; margin-left: 0.5em;}

Image:

[img class=img-right [_images/this.jpg]]

[Senechaux]

Hey Guys,

For what its worth, I was trying to do this with TW5.1.11 on node.js.

I tried a different image and the inline CSS is working!  Strange indeed, but will accommodate.

Using Eric's case of using Motovun Jack.jpg, I noticed I couldn't even repro this image/jpeg tiddler --the image never paints and the width/height don't seem to save with the tiddler.  That said, tried/saw same results in a static TW5 html file.  If I didn't know better, perhaps I'm facing a bug in 5.1.11?

Also tried making image/jpeg tiddler with other jpeg images with same results.  I like the idea of using image/jpeg tiddlers (and perhaps skewing topic here as Eric's solution is fine with different image) but having no luck with this tiddler type.

On Tuesday, February 2, 2016 at 4:45:33 PM UTC-6, Senechaux wrote:

[Senechaux]

Just want to follow-up here.

The inline CSS is working and am now using the image/jpeg tiddler (gotta use the _canonical_url field as image was remote)

Thanks Eric/Joe