Allowing align in img tags

Started by Mike Bobbitt, October 30, 2004, 10:30:20 AM

Previous topic - Next topic

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:

<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.
Dev Consultant
Former SMF Doc Coordinator

force

Try this:

In subs.php

Find:
'~\[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:
'~\[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:
[img align=right]http://www.yoursite.com/pic1.jpg[/img]

or

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


force

Elijah Bliss

Quote from: force on October 31, 2004, 10:19:53 AM
Try this:

In subs.php

Find:
'~\[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:
'~\[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:
[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:

[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

Quote from: Peter Duggan on November 02, 2004, 12:52:08 PM
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.
Cristián Lávaque http://cristianlavaque.com

[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
Cristián Lávaque http://cristianlavaque.com

[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. ;)
Cristián Lávaque http://cristianlavaque.com

frost


Mike Bobbitt

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

Anguz

Quote from: frost on August 31, 2005, 01:04:22 PM
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.
Cristián Lávaque http://cristianlavaque.com

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 :-\.
Cristián Lávaque http://cristianlavaque.com

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?
Cristián Lávaque http://cristianlavaque.com

Advertisement: