News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

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

frost

#20
i don't know what to put where  :D

and i tried the solution from mike's post - don't work at all, plus i can't find the line mentioned there...
they're different, see:

'~\[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" />\'',
'~\[img(\s+width=([\d]+))?(\s+height=([\d]+))?\s*\](?:<br />)*(.+?)(?:<br />)*\[/img\]~ie' => isset($disabled['img']) ? 'preg_replace("~(\[url.*?\]|\[/url\]|\[ftp.*?\]|\[/ftp\]|\[iurl.*?\]|\[/iurl\]|\[img.*?\]|\[/img\]|\[email.*?\]|\[/email\])~i", "", strtr("$5", array("@" => "&#64;")))' : '"<img src=\"" . preg_replace("~(\[url.*?\]|\[/url\]|\[ftp.*?\]|\[/ftp\]|\[iurl.*?\]|\[/iurl\]|\[img.*?\]|\[/img\]|\[email.*?\]|\[/email\])~i", "", strtr("$5", array("@" => "&#64;", "\"" => "&quot;"))) . "\" alt=\"\"" . ("$2" != "" ? " width=\"$2\"" : "") . ("$4" != "" ? " height=\"$4\"" : "") . " border=\"0\" />"',




how would i implement [Unknown]'s solution?

Anguz

#21
In Subs.php search for

'~\[center\](.+?)\[/center\]~i' => isset($disabled['center']) ? '$1' : '<div align="center">$1</div>',


and after it add the line [Unknown] gave you for the tag

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


Then to the style.css file

td
{
clear: both;
}


The clear style may need a bit more work if it doesn't work right, I haven't tested this. HIH.
Cristián Lávaque http://cristianlavaque.com

frost

#22
Quote from: Anguz on September 03, 2005, 12:29:45 AM
In Subs.php search for

'~\[center\](.+?)\[/center\]~i' => isset($disabled['center']) ? '$1' : '<div align="center">$1</div>',


There is no such line in my Subs.php.

the nearest thing is:

if(isset($add['[center]'])){
$arr1[] = '~\[center\](.+?)\[/center\]~i';
$arr2[] = isset($disabled['center']) ? '$1' : '<div align="center">$1</div>';
}


Afer that i added:

if(isset($add['[float]'])){
$arr1[] = '~\[float=(right|left)\](.+?)\[/float\]~i';
$arr2[] = isset($disabled['float']) ? '$2' : '<div style="float: $1;">$2</div>',
}



I don't even need to say it don't work ;D

But then, i found this piece of code:

if(isset($add['[img]']) || isset($add['[img '])){
$arr1[] = '~\[img(\s+width=([\d]+))?(\s+height=([\d]+))?\s*\](?:<br />)*(.+?)(?:<br />)*\[/img\]~ie';
$arr2[] = isset($disabled['img']) ? 'preg_replace("~(\[url.*?\]|\[/url\]|\[ftp.*?\]|\[/ftp\]|\[iurl.*?\]|\[/iurl\]|\[img.*?\]|\[/img\]|\[email.*?\]|\[/email\])~i", "", strtr("$5", array("@" => "&#64;")))' : '"<img src=\"" . preg_replace("~(\[url.*?\]|\[/url\]|\[ftp.*?\]|\[/ftp\]|\[iurl.*?\]|\[/iurl\]|\[img.*?\]|\[/img\]|\[email.*?\]|\[/email\])~i", "", strtr("$5", array("@" => "&#64;", "\"" => "&quot;"))) . "\" alt=\"\"" . ("$2" != "" ? " width=\"$2\"" : "") . ("$4" != "" ? " height=\"$4\"" : "") . " border=\"0\" />"';
}


Below it i added:

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


Result: a tag like this
[img align=left]imglink[/img]
works like a charm!


until the next Subs.php update, at least ;)

Anguz

QuoteI don't even need to say it don't work

At the end of the line that starts with $arr2 you should have used a ; instead of a ,. Cool that you managed to make it work with the attribute in the img tag though.  :)
Cristián Lávaque http://cristianlavaque.com

frost

yeah, well, there's a saying in Croatia:

Ako nece Muhamed brdu, onda ce brdo Muhamedu


(literally: if muhamed won't go to the hill, then the hill will come to muhamed)


;)

Anguz

There's a similar one over here, I'm glad you took the initiative. That's how I learned how to code some years ago.
Cristián Lávaque http://cristianlavaque.com

ivo2296

Quote from: Elijah Bliss on November 02, 2004, 05:31:48 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"/>\'',


That works fine when Faster Parsecode mod is not installed. But with Faster Parsecode the forum shows blank page when i added the code.

xtremecruiser

Quote from: Mike Bobbitt on August 31, 2005, 04:54:19 PM
The new beta allows admins to use [html] tags which solves the problem for me...

I am not seeing this working in SMF 1.1 RC1 ?

Mike Bobbitt

It works, but you have to be a true admin, not a global mod, etc.

Give something like this a try:

[html]<a href="/">This is a link</a>[/html]

xtremecruiser

#29
Quote from: Mike Bobbitt on September 22, 2005, 02:51:50 PM
It works, but you have to be a true admin, not a global mod, etc.

Give something like this a try:

[html]<a href="/">This is a link</a>[/html]

Mike I got it, I just add the html tags, its been a long week, duh

<img src="http://www.simplemachines.org/community/Themes/simple/images/tl1.jpg" align="right">

Thanks

spiros

Is there some code one could add to subs.php for 1.1 RC3?

PTVDesign

#31
in subs

         array(
            'tag' => 'img',
            'type' => 'unparsed_content',
            'parameters' => array(
               'alt' => array('optional' => true),
               'width' => array('optional' => true, 'value' => ' width="$1"', 'match' => '(\d+)'),
               'height' => array('optional' => true, 'value' => ' height="$1"', 'match' => '(\d+)'),
               //moded by hxxp:ptvdesign.com [nonactive]
               'align' => array('optional' =>true, ' value' => ' align="$1"', 'match' => '(left|right|top|bottom|middle)'),
               //end mybe u need add vspace, hspace, border and others
            ),
            'content' => '<img src="$1" alt="{alt}"{width}{height} border="0" align="{align}" hspace="4" />',
            'validate' => create_function('&$tag, &$data, $disabled', '$data = strtr($data, array(\'<br />\' => \'\'));'),
            'disabled_content' => '($1)',
         ),
you need hxxp:webtmpl.com [nonactive]

Advertisement: