[tw5] 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.

Post by 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

[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.

Post by BurningTreeC
Hi Mohammad,
.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

[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!

Post by BurningTreeC
Hi Mohammad,
.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

[BurningTreeC]

Post by 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!

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


<Loading Image...>

Post by Mohammad
This works!

Post by Mohammad
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

[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

Post by PMario
Hi,
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

[PMario]

Post by 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?

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

Post by PMario

Post by 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?

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.
https://tiddlywiki.com/#Images%20in%20WikiText
have fun!
mario

[Mohammad]

Mario,
The question was how to keep float image inside tiddler and have no
overflow!
The BTC solution worked!

/Mohammad

Post by PMario
Hi,
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]

Mario
Your macro work great for image alignment!
/Mohammad

Post by PMario
Hi,
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