Resizeable IMG function in BBCode

A few peeps have been asking for better image handling in Pro_News, but I figured at least some of this extra flexibility belongs in Dragonfly in general, not just in Pro_News.

So I've attached a very simple hack of BBCode which will add on-the-fly image resizing to the [img] BBCode wherever it is used, using the syntax img w=# h=#.

In /includes/nbbcode.php find the lines

			$patterns[] = "#\[img\]([\w]+(://|\.|/)[^ \?&=(\"\n\r\t<]*?)\[/img\]#si";
			$replacements[] = "<img src=\"\\1\" style=\"border:0;\" alt=\"\" />";

and replace with these 2 lines
EDIT: THIS FIX FAILS IN IE8 - Use new version posted below (2 posts down)

				$patterns[] = "#\[(?:img|img (?:w|width)=([0-9]{1,3}) (?:h|height)=([0-9]{1,3}))\]([\w]+(://|\.|/)[^ \?&=(\"\n\r\t<]*?)\[/***\]#si";		// layingback img w=# h=#
			$replacements[] = "<img src=\"\\3\" width=\"\\1\" height=\"\\2\" style=\"border:0;\" alt=\"\" />";											// layingback img w=# h=#

where '***' MUST be replaced by the letters 'img' (I had to substitute to be able to display at all in BBCode).

That's the change, but to bring the Help line into sync, look in /language/{your_language}/bbcode.php to find the line

	'img'       => array(_IMAGE.':','[img]http://image path[/img]'),

and change to

	'img'       => array(_IMAGE.':','[img]http://image path[/img]   to resize: [img w=# h=#]'),   // or [img width=# height=#] - layingback

The supported syntax is img as before, or img w=### h=###, where ### is any number between 1 and 999, and specifies the width="" and height="" values to be used in the generated HTML. In addition the syntax img width=### height=### is also supported for consistency with other (non-DF) BBCode hacks.

There you go, image resizing! If you find a use for this, please consider a donation to my hosting costs. TIA! It looks simple, but no-one else has come forward with one in 6 years!

Hopefully this will be followed soon by a fully flexible image inset function in Pro_News, but in the meantime you can resize any image in Pro_News, News, Forums, etc.

Note that the above is for standard DF and Pro_News, but it should be straightforward to apply this hack to ForumsPro and/or EHP's NBBCode module as the affected lines of code are essentially the same.

Finally note that image resizing is not a total panacea for all cases - a large image down-sized will still incur a large download bandwidth penalty, but sometimes a resize is just unavoidable.

Have just tried adding an image to an article, not specifying any width or height and the image didn't display. Looking at the source the image is shown as width="" height="" which is presumably why it won't display. This is with IE8. How can I avoid that?

Rewrite the hack?

A quick Google indicates that IE8 will assume width and height of 1px if width and height are not given. Rather than defaulting to found image size. Grrrrrh!

OK, can you try this please? Looks as if it might work - please check on all browsers that you have.

Use this for the replacement code in nbbcode.php:

			$patterns[] = "#\[(?:img|img (?:w|width)=([0-9]{1,3}) (?:h|height)=([0-9]{1,3}))\]([\w]+(://|\.|/)[^ \?&=(\"\n\r\t<]*?)\[/img\]#sie";		// layingback img w=# h=#
			$replacements[] = "'<img src=\"\\3\"'.('\\1' == '' ? '' : ' width=\"\\1\" height=\"\\2\"').' style=\"border:0;\" alt=\"\" />'";				// layingback img w=# h=#

This will drop the resizing entirely if a width is not specified.

Seems to work, thank you (and damn that IE, I know!)