float images in tiddlers

[Mohammad]

This question may be redundant, but I could not find good stuff on that

What is the best practice for embedding float images in tiddlers to prevent overflow?

 

1. Use small size?
2. Use Table and grids?

Note: when you float images and specially when the size of image is large, you encounter the tiddler overflow issue, which image crosses the tiddler border!

/Mohammad

[@TiddlyTweeter]

Its best treated as a CSS issue, not a TW issue specifically.

The complication is that because the "tiddler box" size can change (e.g. when you open right menu) something that looks perfect suddenly breaks. But that just shows it is a design illusion that it is working universally.

For "mobile-first" design the sizing of the image should be via CSS using relative sizing to its container to overcome that issue.

[BurningTreeC]

Hi Mohammad,

you could try this in a stylesheet:

.tc-tiddler-body:before, .tc-tiddler-body:after {
	content: "";
	display: table;
}
 
.tc-tiddler-body:after {
	clear: both;
}
 
.tc-tiddler-body {
	zoom: 1;
}

it should force the tiddler to always wrap around floating elements, so that they are always inside

[@TiddlyTweeter]

BTC & Mohammad

Just an FYI. I see this "breaking boundaries" a LOT in TiddlyWiki with images or tables. I partly do so because my main desktop monitor is Portrait, not Landscape. I think its more of an issue than most realise.

[Mohammad]

This works!

How we can avoid using table but having float images and tables inside tiddler boundary?

I have heard using Table for layout is obsolete!

[BurningTreeC]

This works!

How we can avoid using table but having float images and tables inside tiddler boundary?

I have heard using Table for layout is obsolete!

I doubt this is the same as using table for layouting 

[Mohammad]

Okay! I am not very good at html and CSS just heard using table is not recommended for layout!

But as you said, this seems not the same!

BTW your solution solved my BIG issue! :-)

Thank you!

One more question:

Do you recommend to use flexbox or other type of grid for tiddlers?

I mean I want to divide a tiddler body to different parts. This is used for making slides with images and texts or comparison contents and like that

I am not sure if this is a good practice to style tiddlers with special tags for making grids and layout 

[PMario]

Hi,

You could try my floating-images plugin, that I posted at: https://groups.google.com/d/msg/tiddlywiki/oO46RUPm4FI/L6Q-OzMXCAAJ ... I didn't try it with big images. ... You could.

May be it contains some stuff, that may be useful for you.

have fun!

mario

[Mohammad]

Thank you Mario!

One question: It is expected TW handles images without additional adjustment! Why it has not these features?

Is there any special reason?

/Mohammad

[Mohammad]

Mario,

 The question was how to keep float image inside tiddler and have no overflow!

The BTC solution worked!

/Mohammad 

On Sunday, June 17, 2018 at 10:05:02 PM UTC+4:30, PMario wrote:

[Mohammad]

Mario

Your macro work great for image alignment!

/Mohammad

On Sunday, June 17, 2018 at 10:05:02 PM UTC+4:30, PMario wrote:

[PMario]

On Sunday, June 17, 2018 at 9:54:06 PM UTC+2, Mohammad wrote:

Thank you Mario!

One question: It is expected TW handles images without additional adjustment! Why it has not these features?

Is there any special reason?

Hi,

Because we don't know, in which "context" images are implemented. Image settings most of the time are use-case specific.

The default wikitext [img[image.jpg]] is created inside an html  <img> ... image element, without any classes added. So if we add a CSS setting to the img-element, it would be assigned to every img-element on the page. ... Which would probably be always wrong for the users usecase.

Some basic rules can be assigned by users with: https://tiddlywiki.com/#Images%20in%20WikiText

have fun!

mario

[Mohammad]

Thank you for clarification!

Best

Mohammad