[CommiC]

Inserting a photo in a comment, shows the code as:

Code:

[IMG]http://babyanimalz.com/blog/wp-content/uploads/2011/11/Baby-monkey-resting-4.jpg[/Ihttp://www.mydomain.com/comments/images/bb_code/image.pngMG]

After correcting the code, the image is shown in the comment.
BUT, large images rip the layout of the page apart.

If all images are automatically placed in a <div style="max-width: 100%; max-height: 100%;">, it doesn't matter how large the original picture is and the layout of the page is preserved.

Thanks,
JohN

[Steven]

Does that happen every time you insert a photo, or was it just a one-off occasion?

I've noticed a similar problem in the past sometimes when inserting a smilie it inserts the URL of the smilie image instead of mile:, but it's only ever happened once or twice, and I haven't yet found a pattern to it.

Thanks, I'll test that div solution tomorrow so see how it works. What exactly happens when the image is larger than the comment box? Does the div shrink it, or show scroll bars .. or something else?

[CommiC]

Does that happen every time you insert a photo, or was it just a one-off occasion?

I've noticed a similar problem in the past sometimes when inserting a smilie it inserts the URL of the smilie image instead of mile:, but it's only ever happened once or twice, and I haven't yet found a pattern to it.

Thanks, I'll test that div solution tomorrow so see how it works. What exactly happens when the image is larger than the comment box? Does the div shrink it, or show scroll bars .. or something else?

I'll do some more tests with inserting images tomorrow.

As far as image sizing is concerned:

In the stylesheet there has to be a 'image holder'
.imageholder {
display: inline-block;
width: 200px;
height: 400px;
overflow:hidden;
/* For IE 7 */
zoom: 1;
*display: inline;
}

The <div style="max-width: 100%; max-height: 100%;"> has to be inserted in the <img tag.

So what you get is like:

<div class="imageholder"><img scr="image.jpg" style="max-width: 100%; max-height: 100%;" /></div>

In this example the image will shrink to a max width/height of 200/400, no matter how big the original is.
It will never be bigger than the dimensions of the imageholder and leave the layout of the page alone.
Makes sense to point users to configure the dimensions of the 'imageholder' class in the stylesheet.

chears
JohN

[Steven]

Okay, thanks for explaining it. I assume if the image is smaller than 200/400 then it leaves the image alone and it doesn't expand it. I'm looking forward to testing this.