Image thumbnails and text alignment in an entry

[treehstn]

Hi everyone,

I am brand new to both blogging and Serendipity so please bear with me! I'm having problems getting my images and text to show up the way I'd like them to in the blog entries. If you look at this page you'll see 4 images with sample text in the first blog entry under the sticky entry.

Those images and text are all lined up the same on the left side of the screen when I enter it in the Entry Body of a new blog entry. But as soon as I tell it to save or preview it moves them around into other positions. Any idea what I'm doing wrong? I'm using the Media Gallery for the image hosting. And using the Manage Images in the blog entry screen to put the photos in the body.

Thanks!
http://cblog.cessnapilot.net/

[garvinhicking]

Hi!

Phew, this is a tough one even though it looks pretty easy.

There are two problems interfering:

1. The internal serendipity image placement. Once you add an image to the entry, it adds a HTML element for an image that uses the alignment you chose via the media manager insertion interface (left aligned, right aligned, alone on its row). Depending on what you chose there, a specific CSS class is attached to your image. This CSS class tells the browser that an image should be floating on the left or right side.

When you have multiple floating images, they usually flow next to each other, and a linewrap occurs once either a clearing break is found, or the end of the width of the display is reached.

2. You are using the WYISIWYG editor which does some HTML formatting on its own. Sadly the WYSIWYG editor knows nothing of "clearing" breaks, so whatever text you add to it will not mark the end of a paragraph where a floating image should be stopped. So when you add text next to floating images, the images themselves still float outside of their bounding box and make this strange wrapping around the texts.

Especially if you now move the images around using drag+drop in the WYSIWYG editor, it all gets more confused, adds problematic </p></p></p> statements to the output and messes up the display.


That's the reasons, but now the fix is quite hard as all of the fixes involve manual user interaction or restrictions.

1. You should be able to drag+drop images around, if when inserting them you chose to let them stand on their own line, i.e. not left or right aligned. Then the images themselves do not float and do not introduce strange wrapping. However, this will also have the effect that you cannot put text next to the image.

2. If you insert multiple images from the WYSIWYG editor, try not to move them around via drag+drop. And always add text immediately after adding, not after you put multiple images into the editor. However, this will leave you quite restricted when manipulating text/images later on, if you can'T drag+drop them

3. Disable the WYSIWYG editor and "see" the real HTML code when you insert an image. After each text you used to describe an image, you add a <br style="clear: both" /> tag, which will make the floats properly clear and not create wrapping problems. However, this method will leave you without WYSIWYG and you might need to lear some HTML for formatting.

4. You might try to use a different browser to write those entries. Firefox is known to cause less problems with the WYSIWYG editor than IE because it has a different HTML rendering control.

I am personally not working much with the WYSIWYG editor, so there might be other solutions I do not know of, maybe someone else could help with that...

Sorry for that trouble, but sadly one of the weakest links in a CMS or Blog system like ours are WYSIWYG editors who easily screw up because they javascript-based and tightly integrate with browser controls and can only offer what those controls offer.

Best regards,
Garvin

[treehstn]

Garvin,

Thank you so much for taking the time to explain this to me. I had a feeling that it was something like what you wrote. I will probably end up training my user to format the text with the photos within these known limitations. I tried using Firefox and for some reason it was even worse!

Thanks again!

Cheryl

[Zirbelholz]

I have the same problem, but am not using the wysiwyg editor. I have entered the <br style="clear: both" />, but the headings are still a mess (at least in Firefox). What's more, the preview looks different.

What am I overlooking to make sure the photos and their text are separated for all browsers? I had hoped I could place photos better than in the old MT, not just one after the other, but this looks even worse than that.

http://www.transblawg.eu/index.php?/arc ... ember.html

Margaret

[garvinhicking]

Hi!

I think you are just picking the wrong alignment option when you insert images. Instead of using "left aligned" you must pick each image to stand of its own, if you want to avoid the "stacked padding" for each followup image.

In your article, you did not use "<br style="clear: both" /> but only <br />. That alone does not suffice. if you use the clearing break, then the images should all be left aligned.

Serendipity does not support inserting more than one image at a time, that is true. Is is technically quite hard, and challenging the interface of it, to implement picking multiple images. In web applications, remembering selections is not as easy as in a native desktop application where you can simply Shift-Click multiple image files.

Regards,
Garvin

[Zirbelholz]

I did use <br style="clear: both" />, but I can't see it anywhere, so I must have forgotten to save it. I've done it again now and I still see a mess.

I don't understand what you mean by picking each image to stand alone - that is, where do I do that? I get a choice of three positions, and whether to link the thumbnail to the image.

(I am inserting via 'media', as 'img' requires me to enter a URL, which is more effort).

It sounds as if I simply should not put more than one image in the same entry, which is unfortunate.

What does 'stacked padding' mean? Does it mean 'staggered', that is, tiled from left to right?

Margaret

[garvinhicking]

Hi!

I did use <br style="clear: both" />, but I can't see it anywhere, so I must have forgotten to save it. I've done it again now and I still see a mess.

To me this looks much better! Did you reload the page properly? Now the images are below each other, as it should, right?

If you want the images to be NEXT to each other, you must format them like:

Code: Select all

<img src="1.jpg" style="..." />
<img src="2.jpg" style="..." />
<img src="3.jpg" style="..." />
Description text, blabla. Look ma, no breaks!

You can then only put the description after all 3 images. That's the only way HTML properly allows it. If you need it differently, you might want to use the "Caption" feature to describe each image when inserting it trhough the media database popup.

Code: Select all

I don't understand what you mean by picking each image to stand alone - that is, where do I do that? I get a choice of three positions, and whether to link the thumbnail to the image. 

Right, those three positions I meant. The first one means "an image stands alone". The other 2 mean that the image is "floating".

It sounds as if I simply should not put more than one image in the same entry, which is unfortunate.

No, no. Of course you can use as many images as you like in your entries.

What does 'stacked padding' mean? Does it mean 'staggered', that is, tiled from left to right?

It means, the padding of an image is added to the next one, if a floated image comes next to one. The logic of this is quite complicated, it is referred to as "Box model" for browser rendering. There are full books about how this box model is placing images and text next to each other, when HTML/CSS floating is involved.

Regards,
Garvin

[Zirbelholz]

Yes, I kept refreshing the screen. Maybe it looks better to you, but the headings are all wrong, for me at least. There is a heading about smokers for the last picture, not the Bangladeshi sweet shop.

I don't think of what I want so much as a caption, more as 'text' - sometimes a short description, sometimes a paragraph.

About 'floating': I have been using the second option, which looks to me like text next to picture. You say it is floating. So you mean separate from the text. I will do that until I know more about it. I was hoping this system would allow me to put text next to images. I suppose it will, but only if I learn a lot more html, and use 'img' not 'media' to insert images. I suppose a link to a third-party gallery program is going to be the way to go.

Thanks for your help.

Margaret

[garvinhicking]

Hi!

Maybe you could create an example screenshot and arrange things so how you would like them? Then I could tell you how to achieve it.

About 'floating': I have been using the second option, which looks to me like text next to picture. You say it is floating. So you mean separate from the text. I will do that until I know more about it. I was hoping this system would allow me to put text next to images. I suppose it will, but only if I learn a lot more html, and use 'img' not 'media' to insert images. I suppose a link to a third-party gallery program is going to be the way to go.

It allows you to do that, but once you add more images or more text to an entry, when the text does not suffice to will the height of the image, the next image will get aligned (with padding, that's what I meant) next to the rest of the text. So, having multiple floating images next to each others freaks out the browser and is most likely never what you want to achieve.

That's what the clearing <br>s are for. With that you tell the browser "the floating stops here, until the next image begins, I want nothing else next to the picture but text.

If you want to have something like "[image] - text [image] - text [image]" that is actually to be achieved a bit differently, s9y does not support this option because it is very rarely used in HTML. It would look something like:

Code: Select all

Introcuction text <img src="bla.gif" style="display: inline" /> more text <img src="bla2.gif" style="display: inline" /> final text.<br />
Next row.

Regards,
Garvin

[Zirbelholz]

I have created a new entry with a horrible photo showing two ways - on the left, the text appears next to or wrapped round each image. On the right, they simply follow each other.

I presume I can easily get the right-hand view if I simply choose the first option, not left or right. That will do until I find out more.

The media library is beginning to look as if it needs subdirectories. I also have over 1,000 graphics to import from the old weblog.

Margaret