[TW5] Text not wrapping around picture

[Tom Bardout]

Hi,
I've been trying to get tiddlers to display pictures in tidlers on the right and have their text display next to them on the left. This code works except for the text wrapping part. I don't understand what i'm doing wrong...

.person {
width: 250px;
float: right;
display:block;
clear:both;
line-height:0px;
box-shadow: 2px 2px 15px 1px rgba(190, 190, 190, 0.5);
-moz-box-shadow: 2px 2px 15px 1px rgba(190, 190, 190, 0.5);
-webkit-box-shadow: 2px 2px 15px 1px rgba(190, 190, 190, 0.5);
}

This is what I see:

[Lost Admin]

Yep, if I am reading it right, that is what you asked for.

Block element, clear on both sides (so no wrap) and right aligned.

[PMario]

Hi Tom,

You may use the attached .json file and drag&drop import it to your TW.
You can adjust the CSS to your needs. ... Since floats are a bit tricky to use, this is just an experiment and no proper plugin.

have fun!
mario

[PMario]

Hi,
For easy testing import it to tiddlywiki.com ... because the Motovun Jack.jpg image is there :)
-m


[Tom Bardout]

I've tried your json but there is no change... Do I need anything else outside of the css for it to work? As I mentionned previously, changing other parameters (height, width, padding, ...) works.

[Mat]

Tom, could you post the full code that you use in the tiddler where the to-be-wrapping text is so we can see how you put the image there.

<:-)

[Tom Bardout]

Hi,
This is the code that it's linked to. There is no code in the concerned tiddler, only text coming from a seperate database.

<$list filter="[all[current]]">
<$reveal type="nomatch" state="!!picture" text="">
<$image source={{!!picture}} class="person"/>
</$reveal>
</$list>

[Mat]

Tom, I put up this for you on tiddlyspot. Please make a demo. The password to save is "password". I think your problem is simple to solve but it is tricky to understand what you're actually doing. For example, in the code you  just posted it turns out you're surrounding it with a list widget (which was crucial to know). And you're sayingthe text is from "a separate database" which is confusing, so please make a demo.

<:-)

[Tom Bardout]

Hi,

Sorry for leaving out that information. That is all there is to it. The database is an imported excel through the xlsx plugin developed by Jeremy Ruston but is irrelevant once the import is finished. It just explains why I did what I did: seperate code from data.

[Mat]

It is still not clear where you actually write the text. If you fill in the tiddlyspot I set up for you, so I can see what the problem actually is, I'll try to help you. Or don't fill it in and hopefully someone else here will be able to help you.

<:-)

[Tom Bardout]

Hi Mat,

I don't understand. The text is inside the tiddler displaying the picture, while the picture link is in it's picture field. If you mean, where I type the text when everything is automated, I can attempt to add the database to the tiddlyspot but you would only see the xlsx plugin not the actual database which is an excel sheet. I'll make a light weight version but it might take some time and it won't amount to much as it's an exterior element that isn't constantly connected but only punctually imported...

EDIT: Here, I put up a the database mechanism and here's a snippet of the database I use. Just drag and drop it into the tiddlyspot and import

[Mat]

Ok, my last attempt:

There is - as far as I understand things - a conflict when you write

<$image source={{!!picture}} class="person"/>

...and then...

The text is inside the tiddler displaying the picture, while the picture link is in it's picture field.

The argument in the source attribute in the image widget is, as far as I know, supposed to point to only an image tiddler. Not a tiddler that contains something else like a link to or transclusion of an image plus other stuff. The class argument is applied to the output of the imagewidget.

You should perhaps use a transcludewidget in that outer listwidget. And in the tiddler that transcludes the image tiddler and has text, you can experiment with setting styles to the transcluded image like so:

<div class="person">{{myimage}}</div>
My image text.

Ok, hope that helps.

<:-)

[Tom Bardout]

Hmm, ok. Isn't it strange that the code works on the picture, displays it and decides of it's size in that case? I have no idea how to go about it, how should I write it in that case?
I want to avoid having to add any code to the tiddler displaying the picture though. It's important for me to keep the database clean of any code...

[Thomas Elmiger]

Hi Tom

Maybe a dumb question, but have you tried adding some spaces between your gggggggg-text so the text actually can wrap?

All the best,
Thomas

[Tom Bardout]

Hi Thomas,

Not dumb at all, in my examples I did forget to put spaces. Unfortunately, that isn't the real problem. Good you pointed it out though because I was testing on those faulty examples... Thanks :)