Allowing align in img tags

[Mike Bobbitt]

If you "Enable basic HTML in posts" then you can use <img> tags which is nice, but it would be very handy if you could do something like this:

Code Select Expand

<img src="http://army.ca/img/tmp/tdv_int_1.jpg" align="right">

Without the alignment, the image forces text down to the next line, but with the above tag, the text 'wraps' around it. It looks *much* nicer with the text wrapped around the images.

Unfortunately SMF doesn't recognize align as a valid attribute at the moment, and ignores the whole tag.

[Mike Bobbitt]

Here's an example of what you can do: http://army.ca/forums/index.php/topic,21969.0.html

I had to edit the entry directly in the DB for that to work as is.

[codenaught]

Yeah, I also would like something like that.

It can be handy to not have the text below the image I think it could be quite useful.

[force]

Try this:

In subs.php

Find:

Code Select Expand

'~\[img(\s+width=([\d]+))?(\s+height=([\d]+))?\s*\](?:<br />)*(.+?)(?:<br />)*\[/img\]~ei' => isset($disabled['img']) ? '\'$5\'' : '\'<img src="$5" alt=""\' . (\'$2\' != \'\' ? \' width="$2"\' : \'\') . (\'$4\' != \'\' ? \' height="$4"\' : \'\') . \' border="0" />\'',

Add below:

Code Select Expand

'~\[img(\s+width=([\d]+))?(\s+align=(.+?))?\s*\](?:<br />)*(.+?)(?:<br />)*\[/img\]~ei' => isset($disabled['img']) ? '\'$5\'' : '\'<img src="$5" alt=""\' . (\'$2\' != \'\' ? \' width="$2"\' : \'\') . (\'$4\' != \'\' ? \' align="$4"\' : \'\') . \' border="0" hspace="5"/>\'',

Now you can post images like this:

Code Select Expand

[img align=right]http://www.yoursite.com/pic1.jpg[/img]

or

[img align=left]http://www.yoursite.com/pic2.jpg[/img]

force

[Elijah Bliss]

Try this:

In subs.php

Find:

Code Select Expand

'~\[img(\s+width=([\d]+))?(\s+height=([\d]+))?\s*\](?:<br />)*(.+?)(?:<br />)*\[/img\]~ei' => isset($disabled['img']) ? '\'$5\'' : '\'<img src="$5" alt=""\' . (\'$2\' != \'\' ? \' width="$2"\' : \'\') . (\'$4\' != \'\' ? \' height="$4"\' : \'\') . \' border="0" />\'',

Add below:

Code Select Expand

'~\[img(\s+width=([\d]+))?(\s+align=(.+?))?\s*\](?:<br />)*(.+?)(?:<br />)*\[/img\]~ei' => isset($disabled['img']) ? '\'$5\'' : '\'<img src="$5" alt=""\' . (\'$2\' != \'\' ? \' width="$2"\' : \'\') . (\'$4\' != \'\' ? \' align="$4"\' : \'\') . \' border="0" hspace="5"/>\'',

Now you can post images like this:

Code Select Expand

[img align=right]http://www.yoursite.com/pic1.jpg[/img]

or

[img align=left]http://www.yoursite.com/pic2.jpg[/img]

force

This works fine but the problem is that is disables the height and width attributes.

[force]

You can still use width like this:

Code Select Expand

[img width=200 align=right]http://www.yoursite.com/pic1.jpg[/img]


You can see an example here: http://www.pocketforce.com/forum/index.php?topic=2780.0 [nofollow]
(this is just a temporary post, and will be deleted later)

[Mike Bobbitt]

That looks great... Thanks for the code snippit. Hopefully it'll make it into the base SMF code at some point.

[Peter Duggan]

Perhaps a 'float' tag might be more versatile because anything that could do spans or divs with style="float: left;" or style="float: right;" should effectively render those align attributes redundant.

[Anguz]

Perhaps a 'float' tag might be more versatile because anything that could do spans or divs with style="float: left;" or style="float: right;" should effectively render those align attributes redundant.

I agree. I said in the past that I'd do this and then forgot about it or had other things to do. I'll try to code this soon. Just need to search a bit on browser issues with floats and fixes and stuff to make sure it'll render fine for most.

[[Unknown]]

'~\[float=(right|left)\](.+?)\[/float\]~' => '<div style="float: $1;">$2</div>',

And change:
'~\[hr(?:\s*/)?\]~i' => isset($disabled['hr']) ? '' : '<hr style="clear: both;" />',
'~\[br(?:\s*/)?\]~i' => '<br style="clear: both;" />',

-[Unknown]

[Anguz]

There also needs to be a clear both at the end of the message body or the float may bleed out. And there's an issue with backgrounds in IE that needs a little tweaking in the template, too.

* Anguz goes look for some links...

http://css.maxdesign.com.au/floatutorial/clear.htm
http://www.positioniseverything.net/explorer/peekaboo.html
http://www.positioniseverything.net/articles/hollyhack.html#haslayout

[[Unknown]]

True, but that's the general idea.....

-[Unknown]

[Anguz]

Yup. I'll try to get to this mod soon. Gotta finish something else first.

[frost]

any luck with this one?

[Mike Bobbitt]

The new beta allows admins to use [html] tags which solves the problem for me...

[Anguz]

any luck with this one?

Well, you could use my Custom BBcode mod to create that float tag, but it'd be for 1.0.5 only, cause I haven't re-written it for 1.1 and don't plan to do it soon.

[frost]

i'm a bit confused over the creation of the tag... 

[Anguz]

Please ignore my previous post in this topic. I totally forgot that the version of my mod that supports parameters I never released. Really sorry .

[frost]

well....now that i installed it, i could use a hint or two...

[Anguz]

Well, it's not really practical without the parameters, but you could create a couple tags named something like imgleft and imgright, but it's not a very elegant solution. What trouble are you having to add the align tag the way [Unknown] suggests?