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" />
- elbekko
- Senior Member
- Offline
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 
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.
- elbekko
- Senior Member
- Offline
Re: Alt Tag in Images
Hrmm... would introduce a new way of BBCode handling 
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?
Re: Alt Tag in Images
That would be perfect - is this something you could do for me ?
- elbekko
- Senior Member
- Offline
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
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 ?
- elbekko
- Senior Member
- Offline
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 ^^
Re: Alt Tag in Images
Hmm, does look good, maybe someone alse that reads this knows where to put this code ?
- elbekko
- Senior Member
- Offline
Re: Alt Tag in Images
Do note, all those extra attributes need to be filled in 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.
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
- elbekko
- Senior Member
- Offline
Re: Alt Tag in Images
As I said, I made this quickly
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 