UBB.Developers Forums UBB.threads 7 Development Addons and Modifications [7.4.2] - UBB ImagePopper (incl. custom tag)

Author: Kayjey (www.straydesign.com)
Version: v0.9 RC

About:
Big images can ruin the layout of a Forum. While loading, they also can cause the layout to shift. I've created this custom tag and linked popup that will display an image thumbnail (browser-resized) and links it to a large popup for that image.

Installation:
There's two parts to this.

Step 1
Download www.straydesign.com/customers/misc/ubb-imagepopup.zip

Unzip and upload the PHP file into your root 'forum' folder. (It does not need editing.)

Step 2
In the Forum Control Panel, go to 'content rebuilder', tab 'custom tags' and create a new 'custom tag'

Enabled = yes
Show in menu = probably yes
Custom tag = imgpop
Menu description = Image Popper
User prompt hint = Enter full image URL.
Matching regex = (.+?)
Resulting markup =


NOTE
You should replace "EXAMPLE.COM/FORUM" with your own UBB URL. (In here it would be "ubbdev.com/forums".)

Usage
Use it on your Forum by using the Media button in your post/edit box and select "Image Popper".

Straight code:

Development phase
This has been tested to work with most image hosts. Although it should work 100%, I'll update when there's something annoying that needs a fix. Or when I get suggestions...

Demo
http://www.fccuk.org/forum/ubbthreads.php?ubb=showflat&Number=770874#Post770874

Very nice Kayjey! Thank you for sharing!

Sweet little toy you have there. Would there be a way to have all embedded images do this automatically?

For that, you would have to alter the IMG tag parser. *might* be just a matter of editing bbcode.inc.php and convert the line

return sprintf('<img src="%s" %s alt="" />', $url, $align);

into

return sprintf('<a href="http://www.fccuk.org/forum/imagepopup.php?image=%s" onclick="window.open(\'http://www.EXAMPLE.COM/FORUM/imagepopup.php?image=%s\', \'imagepopup\', \'toolbar=no,scrollbars=no,width=300,height=300\'); return false;"><img src="%s" style="border: 1px solid black; padding: 5px;" height="60" vspace="5" alt="click to enlarge"></a>', $url, $align);

And upload the PHP script provided.

Am actually pretty sure you'll have to check out that "sprintf" thingy and take out the 'align' stuff AND/OR just make it so that images don't have the option of being floating. I'm sure someone else will jump in and give you a solution for this. I'm not going to try this out on my live board to be honest. For one thing, we don't allow inline images - only this image thumbnail thingy.

In fact you could just go into standard_text_editor.tpl and edit the line below "{if $allow_images}"

instead of

onclick="showHTML('image','image-drop')";

just put

onclick="DoPrompt('bbcode','Enter full image URL.','[imgpop]','[/imgpop]');"



Do mind I suspect an error in the $allow_images code somewhere as the button is ALWAYS show regardless of permissions. Also any checks on total number of images will be GONE as you're no longer using the IMG tag this is checked against. Also users that aren't allowed to insert images will still be able to do it through the imgpop tag. But it's a quick and easy edit to make like this.