Hotlinked Image Resizer

HoTWire

Hello as raised in the Lightbox add-on discussion :

I'd like to have an extension that re-sizes hotlinked images on the fly using their width and height attributes : Here is an example post from my current proboards hosted forum. The images are all hotlinked from other sites. The resizing is only to make for visual neatness, not to eliminate the bandwidth used to grab the picture. This images are going to get posted regardless of original size in extreme cases as badly as this...

I'd also like the extension to take advantage of the Lightbox add-on so that the resized images can be clicked and viewed in their original size via Lightbox.

AlexL has already done most of the work on this here.


Further to the basic functionality and in relation to the bandwidth issues caused by hotlinking images within threads, it would be nice to have on the discussion page a threads 'size' in kb based on the total size of the hotlinked images contained within.

angelic_venus

You cannot "resize" hotlinked images per say, you can only set a style for them, which you can do with CSS, you can set:

img {
max-width: 800px;
}

or something similar, this will work in all modern browsers - though you would need to make it specific to img tags in the post container. Though IE6 will not play ball. It is something worth thinking about, though, I am quite sure this is how punbb gets around the problem.

Adam.

HoTWire

phpBB uses something like this <img src="..." onLoad="if(this.width > 550) {this.width = 550;}">

AlexL

since apparently noone is reading it. here my comment from the other discussion:

add this to the bottom of your page. after all the <img> tags!
now all you have to do is insert your images with <img src="whatever" class="lightbox">
<script> var a = $$('img.lightbox'); a.each(function (s) { Event.observe(s, 'load', function() { // bug!? I guess this is some sort of browser (prototype) feature // output is: <a ...></a><img ...>helalala // new Insertion.Before(s, "<a href='" + this.src + "' rel='lightbox[cars]'>"); // new Insertion.After(s, "he</a>lalala "); // alright, let's do it this way: s.hide(); new Insertion.After(s, "<a href='" + this.src + "' rel='lightbox[cars]'>" + "<img src='" + this.src + "' width=" + (this.width / 10) + " height=" + (this.height / 10) + ">" + "</a>"); }); }); </script>


As I understand it, HoTWire is asking for someone to make an extension out of this.

suggestions:
this.width / 10 => config (max width?)
"though you would need to make it specific to img tags in the post container" (angelic_venus)
this way one would NOT need the class setting anymore!

Stash

Maybe it's a stupid idea, but I quite like the idea of this being done in PHP rather than JS since then we won't require a fairly large chunk of JS to be loaded. This will then work on "lighter" forums that don't want too much extra baggage. If someone wants to make this JS one as an extension as well, no reason why not to...

HoTWire

"As I understand it, HoTWire is asking for someone to make an extension out of this." Bingo ,..I could hack it onto the bottom of the php in my install of Vanilla,.. but a)that causes issue with upgrade and b) I think there may be a few more people than just me that would benefit from it. also secret option c) phpBB has this now so its nice to keep parity :) Having the Max Width as a config setting would be the icing on the cake.