1

Topic: Alt Tag in Images

Is it possible to add a heigth and width when showing a picture in PunBB, so that the image has the correct code, like this?

<img class="postimg" src="wallpaper.jpg" alt="Wallpaper" style="height:320px;width:400px" />

Re: Alt Tag in Images

Well, the problem is that we cannot know the size of an external images without eating up bandwidth and slowing down the server wink

3

Re: Alt Tag in Images

Well, no need to - I would like to add the size of the image when linking to it, that would be fine.

Re: Alt Tag in Images

Hrmm... would introduce a new way of BBCode handling tongue Something like

[img=width=<w>&height=<h>&alt=<alt text>]<source>[/img]

All optional, if not occuring a standard value will be taken or it won't be put in. Something like that?

5

Re: Alt Tag in Images

That would be perfect - is this something you could do for me ?

Re: Alt Tag in Images

Not now, I'm quite busy, but I could have a look at it sometime... unless someone with better RegEx knowledge can do this tongue

7

Re: Alt Tag in Images

Hmm, another approach would be to allow HTML in specific forums, but I guess that´s not a standard feature in PunBB ?

Re: Alt Tag in Images

OK, so I had my shot at it, and I found a pretty good solution:

This is the code I had in my testing file:

<?php
$str = '[img?width=60&height=60&alt=Booh]http://punbb.org/forums/img/avatars/2.png[/img]';
$str = preg_replace("#\[img\?width\=(.+)&height\=(.+)&alt\=(.+)\](.+)\[/img\]#i", '<img src="$4" width="$1" height="$2" alt="$3" />', $str);
echo $str;
?>

The HTML output is:

<img src="http://punbb.org/forums/img/avatars/2.png" width="60" height="60" alt="Booh" />

Now, I don't know exactly where you'd put this code, but atleast the code is there ^^

9

Re: Alt Tag in Images

Hmm, does look good, maybe someone alse that reads this knows where to put this code ?

Re: Alt Tag in Images

Do note, all those extra attributes need to be filled in wink Else the image code won't be parsed.

It should be somewhere in parser.php, I think you could put it in do_bbcode if you'd like to allow it everywhere.

11

Re: Alt Tag in Images

Should I add this somewhere in here?

// Convert BBCodes to their HTML equivalent
//
function do_bbcode($text)
{
   global $lang_common, $pun_user;

   if (strpos($text, 'quote') !== false)
   {
      $text = str_replace('[quote]', '</p><blockquote><div class="incqbox"><p>', $text);
      $text = preg_replace('#\[quote=("|"|\'|)(.*)\\1\]#seU', '"</p><blockquote><div class=\"incqbox\"><h4>".str_replace(array(\'[\', \'\\"\'), array(\'[\', \'"\'), \'$2\')." ".$lang_common[\'wrote\'].":</h4><p>"', $text);
      $text = preg_replace('#\[\/quote\]\s*#', '</p></div></blockquote><p>', $text);
   }

   $pattern = array('#\[b\](.*?)\[/b\]#s',
                '#\[i\](.*?)\[/i\]#s',
                '#\[u\](.*?)\[/u\]#s',
                '#\[url\]([^\[]*?)\[/url\]#e',
                '#\[url=([^\[]*?)\](.*?)\[/url\]#e',
                '#\[email\]([^\[]*?)\[/email\]#',
                '#\[email=([^\[]*?)\](.*?)\[/email\]#',
                '#\[color=([a-zA-Z]*|\#?[0-9a-fA-F]{6})](.*?)\[/color\]#s');

   $replace = array('<strong>$1</strong>',
                '<em>$1</em>',
                '<span class="bbu">$1</span>',
                'handle_url_tag(\'$1\')',
                'handle_url_tag(\'$1\', \'$2\')',
                '<a href="mailto:$1">$1</a>',
                '<a href="mailto:$1">$2</a>',
                '<span style="color: $1">$2</span>');

   // This thing takes a while! :)
   $text = preg_replace($pattern, $replace, $text);

   return $text;
}


//

Re: Alt Tag in Images

$str = preg_replace("#\[img\?width\=(.+)&height\=(.+)&alt\=(.+)\](.+)\[/img\]#i", 
'<img src="$4" width="$1" height="$2" alt="$3" />', $str);

This has some major security vulnerabilities in it, as none of the user input is verified.  Something as simple as [img?width=5&height=5" onerror="alert('hi there');&alt=test]http://not.an.image/file.png[/img] could inject js into the output (the url could be used as well).  In addition, a regular expression like that would require that all the attributes be present in that order, something that could become an annoyance for users.

@wii: The html is actually not incorrect if an img tag does not include the width and height attributes; the only required attributes are src and alt: http://www.w3.org/TR/html401/struct/objects.html#h-13.2

Re: Alt Tag in Images

As I said, I made this quickly tongue

But, as all input is run through htmlspecialchars(), it can be done by just adding quotes to the BBCode, something like this:

<?php
$str = htmlspecialchars('[img?width="60"&height="60"&alt="Booh" onmouseover="alert(\'Insecure!\')""]http://punbb.org/forums/img/avatars/2.png[/img]');
$str = preg_replace("#\[img\?width\="(.+)"&height\="(.+)"&alt\="(.+)"\](.+)\[/img\]#i", '<img src="$4" width="$1" height="$2" alt="$3" />', $str);
echo $str;
?>

The onmouseover won't work this way, but the image will smile