Automatic image resizing to keep forums uniform

Kosmo

Of then when I stroll around my regular forums, there is a thread that has images, not everytime when someone posts an image is it resized, so it breaks the width of the forum template, and everything is just well, hard to read because lines contonue, the buttons to jump to next page run to the far right side so the vertical scrollbar appears and so on, it's just a mess. My suggestion is automatical resizing, I have few different ideas on how to make this, one is ofcourse the thumbnailer, if you post an image the image is automatically made as thumbnail and linked, but not always users post images, sometimes they link them from other sites, which makes this bit more tricky, without having the original image you can't resize it, so maybe an option to block linking to images, which would piss some users I'm sure. But I'm ready to accept that there is nothing to be done about the linking to images, but posted images are easier. I'd like to see options to resize the image on the fly, when you post an image, you could define it's height and width and the script automatically resizes the image, or the thumbnailing where the posted image is stored somewhere and the thumbnails are linked to the image, which is typical option on many forum softwares. Ideas?

nathan

I have seen something like this before. I can't say where I have seen it, but ti is possible without using a thumbnailer OR storing another small 'scaled' image elsewhere. I think it can be done with CSS. Would you just limit img tags it to a pre-specified width then scale it to keep proportions? As I said, I have seen it before. It could have been JS though. *runs off to find example*

nathan

it bothers me on my forums also! I want a solution too.

Kosmo

Well, maybe CSS could do it, but images are always the top priority, on many browsers they rule the whole scene, no rules apply to them.

Krak

I know exactly what you are talking of. This is implemented in all of Mike Lothars PHPBB themes (his forum is how I found Vanilla)... When an image is posted into the forum post thats too big it is automatically resized to fit in the tables. It doesnt use that GD(?) image thing or anything like that either... Works with uploaded images, and linked images, anything that is too big. The only thing is its made to work with phpbb and tables I pretty sure. But it might help you (or someone else) get an image resizer extension rolling for Vanilla. Head over to http://www.mikelothar.com and click on "take it". You have to download one of his themes (anyone, they all have it) and its in there somewhere. "resizefix.php" Hope that helps!

nathan

I know where I have seen it. The filebrowser. When you click on an image that is too large for the screen it scales it to fit the page. It then provides a link to 'view image at full size'. I can't believe I looked so hard, but it was lussumo software I was looking for.

giginger

This would be a damn useful extension/feature.

There's a couple of PHPBB plugins that do this as well as the previously mentioned Mike Lothar themes.

They all do it different ways I think. Not being a coder I can't help.

Maybe checking out the source code on those would help though?

Minisweeper

it has been discussed before and i'm pretty sure there was a css based conclusion. I think lech's themes have it or he considered putting it in or something. Someone link me to a thread with a big image.

Bergamot

There is no pure-css solution. You could resize all images to a preset size with css, but that would probably end up looking terrible in most situations. Filebrowser uses a javascript solution.

Kosmo

Yeah, that was what I was afraid, CSS can't recognize the image width and limit it to something, it just resizes every image to that width.

stuart

You just need something like:

.CommentBody img { max-width: 200px; }

That probably wont work in all browsers, as IE ignores max-width, but you could do a one size fits all approach, making all images a specific size, though you seem to only want to resize large images (though this is all relative, to people with a 30 inch monitor this isn't an issue)

Then via the various text formatters, you would add an enclosing link to open the image full size, which you can say in the title tag.

Minisweeper

just add an overflow: scroll; to the comment div. That works fine on lechs styles and does the job for everything. It keeps images full size but stops them wrecking the forum.

ADM

That overflow tag doesn't seem to work in IE either though.

nathan

overflow is crap. We need to do it properly, not just make scroll bars and such. I propose a js version like the filebrowser as in an extension. I'll have a look at it tomorrow (or later this evening). I have not written tomany extensions, so I think this COULD be out of my league. The js will also ave to change if you have different styles installed. Anyone have a solution on how to do this? Can javascript measure the width of a div?

ADM

Doesn't the javascript just automatically detect any images posted with a img tag and check the width of it? If it does on the filebrowser you could just have a simple extension which appends the javascript file to the head. It shouldn't be too hard to do at all, in fact I don't mind having a look at it. I'll download Filebrowser now (always been meaning to get it up and running on my private site) and when I get back home tonight I'll give it a shot.

nathan

If you run vanilla, there is a filebrowser in the images folder.

Look in the index.php file for the image resizing js. the filebrowser one finds the width of the window. It is a little harder to do with vanilla, unless js can find the width of a div, or if it is manually fed the width of the post div.

If you get the js, the extension is EASY! see below.

<?php /* Extension Name: Automatic Image Resizing Extension Url: http://your-url-dot-com Description: Automaticically resizes images to keep forums uniform. Version: 0.1 Author: You Name Author Url: http://your-url-dom-com */ if(in_array($Context->SelfUrl, array("post.php"))){ $Head->AddScript("./js/ImageResize.js"); } ?>

I only incude the js on the post pages as these are the only ones we are concerned with.

i hope that provides a good starting point.

ADM

Ahh ok.. theres some other javascript that can do it based on the width of the image..but I think it's actually quite slow. I'll look around and let you know :)

nathan

I have been looking into it also. Is anyone here really good at js? It would be great if you could lend a hand/ give a few pointers.

ADM

Ok I just remembered about one that is used at some phpbb forums: It adds the following code between the img tag: resizemod="on" onload="rmw_img_loaded(this)" For example: <img resizemod="on" onload="rmw_img_loaded(this)" src="http://url.to.image.here/ext.jpg" border="0" /> And in the head it's: <!-- start mod : Resize Posted Images Based on Max Width --> <script type="text/javascript"> //<![CDATA[ <!-- var rmw_max_width = 400; // you can change this number, this is the max width in pixels for posted images var rmw_border_1 = '1px solid #006699'; var rmw_border_2 = '2px dotted #006699'; var rmw_image_title = 'Click to view full-size'; //--> //]]> </script> <script type="text/javascript" src="http://url.to.javascript.file/rmw_jslib.js"></script> <!-- fin mod : Resize Posted Images Based on Max Width --> The actual javascript file is here: http://adm.alanwake.net/rmw_jslib.js It does an pretty good job with it.

nathan

The FB code does just that. I would be more inclined to use the FB code over the PHPBB code, as FB is GLP and the phpBB stuff is CC. We can't change either license, and there could be trouble.