[TW5] image resize and wrap text around

[vpl]

Hi,

I'm looking for a way to resize image in my tiddlers and allow wrapping text around

I've tested the following script

<img src="solar.png" style="width: 50%;high: 50%; float: right;"  />

! This is title

* item-1

** item1.1

* item-2

In the "preview" mode during tiddler editing, the layout is applied correctly

Nevertheless, when I save it, the image appears tool high and overlap the others tiddlers

When I try 

<img src="solar.png" width="200" height="200" float="right">

This is my text

The resize is rendered correctly once I save, by the text is displayed below the image.

Is their someone who could help me or provide me some direction ?

Thanks for your help and support

Regards

Vpl

[Stephan Hradek]

Can you put your example online somewhere? Tiddlyspot maybe?

[vpl]

Hi

Thanks for your answer,

The below result is referring to the following tiddler

<img src="solar.png" style="width: 50%;high: 50%; float: right;"  />

! This is title

* item-1

** item1.1

* item-2

[Stephan Hradek]

Ah!

That's not a TiddlyWiki but a CSS issue and it's normal and expected with floating elemenst. Search around in this group we already had this before.

In general you need to have something with a "clear:both" in its style. If I remember correctly I even posted an example which solves this without putting in any additional elements, jsut CSS.

[vpl]

Hi,

I'm concerned by the fact that the image is exceeding the tiddler size as I showed on my example. Isn't it a tiddywiki issue here ?

For example when the size defined in my css is below the size of the tiddler text (on the left in my example) all is fine.

But If I increase upper this limit then the image start overlapping other tiddlers (like I showed on my example) ..

Thanks 

Vpl

[cmari]

Hi Vpl,
Can't remember where I found this, but try using this format (in particular, don't use the word "style"):

<img src="solar.png" width="50%" height="50%" float="right">

cmari

[Stephan Hradek]

No, this is not an TW issue. It's normal HTML/CSS.

[cmari]

Yes, I was too quick - what I suggested won't affect "float".  It should, however, keep the image inside the tiddler.
cmar

[vpl]

We are not on the same page.

You tell me it's not a TiddlyWiki issue even when the image exceed the size of a Tiddler and overlap an other tiddler ...?

I don't follow you then. The size of the tiddler is controlled by TiddlyWiki, isn't it ?

For example when the image size defined in my css is below the size of the tiddler text (on the left in my example) all is fine.

But If I increase upper this limit then the image starts overlapping other tiddlers (like I showed on my example) ..

Thanks

vpl

[Stephan Hradek]

Am Dienstag, 18. März 2014 16:09:30 UTC+1 schrieb vpl:

We are not on the same page.

You tell me it's not a TiddlyWiki issue even when the image exceed the size of a Tiddler and overlap an other tiddler ...?

Yes. I do and will continue to do so.
 

I don't follow you then.

Why?

 

The size of the tiddler is controlled by TiddlyWiki, isn't it ?

So what? You don't know what a float does, do you? http://www.w3schools.com/css/css_float.asp

[vpl]

OK.

Thanks for your answer. I really appreciate. 

But What I don't understand is why when I insert any image size, without any CSS, tiddlywiki automatically adapts the tiddler size to match the picture, and when I use the above css, this automatic tiddler sizing is not applied based on the tiddly text that I insert on the left. You tell me it's a CSS topic, but this means to me that I have to change the resize parameters for each image inclusion, based on the size of the tiddler text I insert on the left..

Is it this way I have to use it ?

Regards

vpl

[Eric Shulman]

On Tuesday, March 18, 2014 4:29:07 AM UTC-7, vpl wrote:

<img src="solar.png" style="width: 50%;high: 50%; float: right;"  />

! This is title

* item-1

** item1.1

* item-2

The problem you are having (where the image is taller than the tiddler content and overflows the tiddler) is due to the way that CSS "float" attribute works.

The image you specified has "float:right".  This means that all content that follows the image will be rendered next to the image, starting at the same vertical position as the top of the image.  If the content that follows is longer than the image, then it continues to "flow" around the image, until it is below the bottom of the image, after which it renders as normal (i.e., using the full available width of the tiddler).

In your example case, the content of the tiddler is shorter than the image.  However, the *image* is still floating and, as I wrote above, **ALL** content that follows the floating image will be "flowed" around the image until it is below the bottom of the image.  This includes content from the tiddler that follows the one with the floated image.

Fortunately, in standard CSS usage, there is a way to explicitly terminate the "float/flow" handling: when the browser encounters a DIV with CSS attribute "clear:left", "clear:right" or "clear:both", it forces any content within (or following) that DIV to be rendered AFTER the floated image element.

Thus:

<img src="..." style="...;float:right;...">
this content will be
flowed NEXT to the image
<div style="clear:both;line-height:0px;">
this content will be rendered BELOW the image
</div>
and so will this content

if you don't have any content to follow the image, embed an empty DIV:

<img src="..." style="...;float:right;...">
content
<div style="clear:both;line-height:0px;"></div>

This should produce the results you are expecting (i.e., the floated image is completely contained within the tiddler extents)

Of course, it's a bit inconvenient to remember to add this div to each tiddler that has a floating image.  Fortunately, there is a way to specify the "clear:both" attribute using CSS within a stylesheet.  All you need to do is create a tiddler tagged with "$:/tags/stylesheet", containing the following:

div.tw-tiddler-frame.tw-tiddler-exists:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

With this CSS in place, floated images will *automatically* be fully contained inside the tiddler-frame, without needing to add any HTML to individual tiddlers.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

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

[Stephan Hradek]

I suggest you read something about CSS.

[vpl]

Hi Eric,

Thanks very much for taking time explaining  and providing this detailed answer.  That works perfectly.

Posting back to a CSS training is certainly a way of answering but not the most efficient for users willing to discover, with a limited amount of time, your really nice application ....

Thanks a lot

Regards

Vpl

[Stephan Hradek]

Am Dienstag, 18. März 2014 18:35:33 UTC+1 schrieb vpl:

Posting back to a CSS training is certainly a way of answering but not the most efficient for users willing to discover, with a limited amount of time, your really nice application

But this group is for answering TiddlyWiki questions, not for CSS questions. Users answering here also have a very limited amount of time and repeating the already answered stuff here over and over again is also not very efficient. If you remember: You could have had your answer much earlier had you understood my first reply and searched here in the group. The answers are already there, but of course it's much easier to wait for others to do the work.

*sigh* forget it... I'm wasting my time…

[Stephan Hradek]

https://groups.google.com/d/msg/tiddlywikidev/a23v2KQufTk/roqLKZnpTCoJ

[Daniel Baird]

As Eric points out, this is just how browsers lay out things that have the 'float' property set.  If you explicitly add the "float: right" property to your image, you have to be okay with what float actually does.

Anyway here's an explanation of why float works the way it does:

http://css-tricks.com/containers-dont-clear-floats/

It's nice to see that stuff that appears to be a stupid decision by CSS designers is actually well thought out..

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Daniel Baird
retro objoke: Chuck Norris had a problem so he decided to use regular expressions. Now, every problem in the world is solved.