Replace large images in posts with links to the images

[buro9]

No longer supported by the author.

[buro9]

First post reserved for notes, etc as I know some of you surf with the hacks collapsed.

[Snake]

Excellent! Thanks for the hack!

[buro9]

Has vb.org got something weird in it that turns double spaces into tabs? My beautifully indented code comes out all strange.

[Jenta]

Not sure but if you put the intructions in a txt file and zip up both the instructions and the php file, it will aleviate that.

Will also make it easier for end users as they now have a neatly packaged hack stored locally. ;)

[colicab-d]

One question what about un-registered users? Do they see the link or a large image?

[COBRAws]

the JACKPOT hack will be when someone makes a "resize if >500px hack" or something

good try tho.

[buro9]

One question what about un-registered users? Do they see the link or a large image?

They see whatever the post contains at that time.

The JavaScript will fire, but the script web service that I have that services that JavaScript won't change the post when a guest calls it.

I should note that in nearly all cases this means they see the link... because the moment a post is posted the author is returned to it, and it is they that trigger the conversion from [url] to [img]. So anyone who manages to see the post is usually just going to see a link. The exception to the above are historical posts, which require a registered user to go view for the conversion to occur.

[buro9]

the JACKPOT hack will be when someone makes a "resize if >500px hack" or something


good try tho.

From your perspective maybe. But from mine the jackpot hack stops the vast majority of users from downloading a 1.7mb 2000px wide image that some doofus put in a post.

Yes CSS and HTML can be written to re-format the size, create scroll bars on it or resize the image dimensions in JavaScript. However every user still ends up having to download that 1.7mb image for the CSS and/JavaScript to resize it.

My idea of a jackpot hack for oversized images is to not have those users download the images in the first place. Of giving them the choice to download it. And as a result retain the perception that my forum is fast.

This means converting inline images to links, which my hack does.

So I guess whether you like this hack or not depends on point of view, whether you agree with my design decision that not having users download large images unawares is important, or whether you feel that the layout of the page is more important than the download experience for users.

[buro9]

Not sure but if you put the intructions in a txt file and zip up both the instructions and the php file, it will aleviate that.

Will also make it easier for end users as they now have a neatly packaged hack stored locally. ;)

Yeah, I'll do that now :)

[buro9]

Screenshots for those who need such things now attached.

I've used this image as an example:
http://miam-miam.viabloga.com/images/test%20oeufs%20durs.jpg

Because it's 1024 pixels wide, it gets replaced by a link after the first view.

[NuclioN]

Would be great if it does what promiced :) I've editted an already placed oversized image that whas reduced with the 3.xx BIMG tags but it did not turn into a link. Maybe it will only work with new posted images.

[buro9]

Would be great if it does what promiced :) I've editted an already placed oversized image that whas reduced with the 3.xx BIMG tags but it did not turn into a link. Maybe it will only work with new posted images.

It should work with all tags providing that they are [img]url or url.

The only thing it won't work with is pure HTML. But no-one allows users to post HTML because of security risks, right?

Anyhow, so long as you have a DOM capable browser that supports XmlHttp and either element.parentElement (IE6) or element.parentNode (Mozilla and the others, this is the W3C implementation)... then it will call the script.

Oh, but if you have edited your templates from the vb default and nuked the following from the postbit templates, then you will prevent the hack from working:
<div id="post_message_$post[postid]">$post[message]</div>

That's where I get the postId from... by walking up the DOM back to that DIV.

[buro9]

And if you're sure it's not working, just say and I'll add some trace/debug stuff to it so that you can optionally see it working before you switch it to run silently.

[buro9]

Would be great if it does what promiced :) I've editted an already placed oversized image that whas reduced with the 3.xx BIMG tags but it did not turn into a link. Maybe it will only work with new posted images.

I think I read that wrong too.

With the hack installed you don't need to edit anything :D

You just view them.

Order of events:


Registered user views a thread
Thread contains large images in the post body
Image gets detected by the JavaScript
JavaScript SILENTLY calls the trimOversizedImages.php file
The php file checks that the postId supplied is cool, and then converts the [img] bbcode to [url] bbcode
That user, still saw the image and wasn't even aware that he just caused the large image to be converted on the server. However the next refresh of that page goes like this:

User views a thread
That's it :) Because the large image was converted to a link, so none of the above repeats itself.

So you don't need to edit anything. Just CTRL+F5 to ensure your browser has the latest version of vbulletin_global.js, and then view the thread. Once viewed, click CTRL+F5 again to refresh the page and the image should be gone.

[Aeolian_X]

I had to refresh the page a few times to see the link without the pic. Not sure what that was, but it seems to work now. Great hack.

[NuclioN]

Refreshed several times, logged in and logged out etc. but the image stays large. I've looked into the js and the url to trimOversizedImages.php is correct. I'll check the
<div id="post_message_$post[postid]">$post[message]</div>

maybe that's the problem

[buro9]

I'll add a debugging option for you... that way you can see what happens... via the wonder of JavaScript alerts ;)

It will be off by default, but you can enable and disable debugging and if enabled it will give you popup messages from the web service saying what happened.

Give me 10 minutes for this :)

[buro9]

I've added debugging capabilities, and updated the file to upload and the JavaScript to run.

Simply update by uploading the new .php file over the old one, and replace the JavaScript with the new version in the zip file.

Debugging will give you JavaScript alerts whenever it does stuff, so you will be able to 'see' things happening.

[NuclioN]

<a href="http://www.cyberty.nl/forums/showthread.php?t=8987" target="_blank">http://www.cyberty.nl/forums/showthread.php?t=8987</a> look at the size (should be 500 - 500 when conversion to link must work) ... it shows no alert, no reducing.

[buro9]

http://www.cyberty.nl/forums/showthread.php?t=8987 look at the size (should be 500 - 500 when conversion to link must work) ... it shows no alert, no reducing.

I see that the JavaScript hasn't been applied to http://www.cyberty.nl/forums/clientscript/vbulletin_global.js?

If it's not in there, it certainly isn't going to convert any images to links.

You can see at the end of my JavaScript file the hack in place:
http://www.bowlie.com/forum/clientscript/vbulletin_global.js?

Did you upload the file once you had modified it?

[NuclioN]

I see what went wrong, sorry :) I've uploaded the additional js file

[buro9]

Cool, I see it works now :)

I leave the "// HACK" bits in my JavaScript btw... this way when I upgrade I search my codebase for all instances of the word HACK and know which file changes I have to port over :)

[NuclioN]

Now there's a javascript error: id is empty or no object

[buro9]

Now there's a javascript error: id is empty or no object


You'd nuked the JS from your file again so I can't see whether there was an error with the installation.

However I have gone over my code again, and there was one scenario that could cause the error you described, so I've put more error checking in my code to test attributes of objects before I call them.

Download and install it again and let me know whether that fixes it. If it does not, please leave the code in place as I will very swiftly check your forums to see the error live and stand a better chance at tracing it.

Cheers

David K

[NuclioN]

Tnx for the update buro9 the error is gone now. I'm very happy with this autolink/resize :)

[buro9]

Tnx for the update buro9 the error is gone now. I'm very happy with this autolink/resize :)

Cool... I must've found the bug then :)

Updated the version number to reflet fixing the JavaScript

[buro9]

I'm considering an audit trail for both visibility (seeing that it is working) and security (seeing who triggered which posts to be edited).

This would be in the form of a database table that simply logs:

postId of post edited
userId of registered user that triggered the edit
timestamp of when the edit occured
I wouldn't provide a front-end, just the logging.

This would allow you to create your own queries to determine:

from the postId, you could see who posts the most large images
from the userId, you might detect any possible abuses where a registered user might make an AJAX app that emulates this script
from the timeStamp, you could create a chart showing when most edits occured. over time this should hopefully show that the problem of large images is for the most part eradicated, and then managed going forward
If there is interest from others in an audit log like this, please let me know and I'll add it :)

It would be a SQL change (new table), but beyond that nothing out of the ordinary.

[Snake]

Thanks, was looking for this!

[djr]

Haven't installed yet, but from the screenshots it seems this is not a feature: could you please add a "[This picture is auto-linked because the original picture is too large]". Even better would be to have this in a legend-div, but I can easily whip that up myself :)

[buro9]

Haven't installed yet, but from the screenshots it seems this is not a feature: could you please add a "[This picture is auto-linked because the original picture is too large]". Even better would be to have this in a legend-div, but I can easily whip that up myself :)

Not a feature? Well, I'm not sure what you mean by that, but I've been thanked by lots of users who have to user dial-up from middle-America, Portugal, etc.

I can add an edited message, either in the post itself (I'm loathed to do this as I'd rather not be inserting text when it may change the context of text within the post in any way) or in the editlog so that it appears at the foot as 'edited by', but I'd rather not do this as it then appears that someone is manually editing everyone's post and people can get uppity about that.

Instead, I communicate it globally via an announcement in my "About A Board" forum, and by including image dimensions and what happens when images exceed it to my "Forum Rules".

I think this is best as people don't complain about automatic processes that apply the rules universally, but do complain if they perceive that they are being manually edited by admins. That, and if I communicate it as a core rule, I can actually hope to educate them about what happens and why, and thus they may start to do things properly like resize the image and attach it if they really want people to see it, etc.

All that said... if most of the people here want text inserted to reflect that a change was made, then I shall do so.

There is always the other option though, that you simply look within trimOversizedImages.php and where I insert [/url] append whatever text you want just there.

Cheers

David K

[djr]

Not a feature? Well, I'm not sure what you mean by that, but I've been thanked by lots of users who have to user dial-up from middle-America, Portugal, etc.
Hi David,

No, no, you misunderstood! I really like this hack and will definitely use this when I finally upgrade my board to 3.5. What I meant was: the text insertion isn't a feature yet, hence the request. But I can see where you coming from, and maybe a global announcement is the better way to go. But thanks for the pointer where to put it if I still feel like doing it myself.

Thanks again for this great hack, I share the sentiments on the other hacks that try to do the same thing.

[LambHyjoo]

Hello,

this hack is great and is exactly what I was looking for !

But is there a way to make it vb3.0 compliant ? I suppose I will need to edit my "postbit_legacy" template to insert the postId in the Div, but which Div is concerned, and would it be enought to make it work ?

[buro9]

Hello,

this hack is great and is exactly what I was looking for !

But is there a way to make it vb3.0 compliant ? I suppose I will need to edit my "postbit_legacy" template to insert the postId in the Div, but which Div is concerned, and would it be enought to make it work ?


A very good point... the original templates never included an identifier, the new templates now include:
[code]
<!-- message -->
<div id="post_message_$post[postid]">$post[message]</div>
<!-- / message -->
[code]


So I should now be using post_message_POSTID as the div to search for.

I'll update it now for you :)

[buro9]

Oh no, misunderstanding. It does already search for post_message_POSTID. My instructions are crap, not my code :)

[buro9]

The key message is: If you are not using the original/default postbit templates, then you will need to double check that the post_message_$post[postid] DIV exists.

You can view the original version of the template, and DIFF against it to see which DIV should have this.

All those who have installed against a default install will be fine.

If you are not on a vb3.5 variant... then the code above WILL work all the way back to vb 2.x, but you need to insert the DIV yourself:

FIND:

$post[message]


REPLACE WITH:

<div id="post_message_$post[postid]">$post[message]</div>

[LambHyjoo]

Ok that's what I thought. I'm going to test it, and I'll keep you informed ;)

Thanks for your answear, David ! :)

[Razasharp]

Does this make a call to the server 'every time' an image is viewed? If so wouldn't it be more efficient to make the call only when a user 'posts' an image, and if it's too big, either make it the url then or notify the poster to resize the image?

There was a hack for phpbb that did it that way :)

[buro9]

When a large image is viewed, a call is made to the server, but as it is then replaced with a link, no more calls are made to the server as no large image is detected. So... only one call is made per large image.

[Boofo]

If you have more than 1 image in a post and one is over the dimensions but the other is not, does it make a link for the both of them? ;)

[almukmin]

I've tried other similar mods, images resizer etc and it seems that this IS indeed the best mod. Nice job! A++. I'm so happy with the result.

[almukmin]

If you have more than 1 image in a post and one is over the dimensions but the other is not, does it make a link for the both of them? ;)

Yes, it basically changes all https://vborg.vbsupport.ru/ to ['URL]['/URL] using Javascript. (had to put ' or it'd dissapear)

[midnightsoaper]

absolutely love this hack! thanks! :)

[Boofo]

If you have more than 1 image in a post and one is over the dimensions but the other is not, does it make a link for the both of them? ;)

Bump? ;)

[buro9]

The answer was above, yes :) It does this because the server does not download the images to check which ones are too large, it simply knows that within a post an image is too large, and so it replaces all [img] tags with [url] tags.

[Thomas P]

I think this is far the best Image Resize hack out there.
Many thanks! :)
Works great in 3.5.4

Just one thing: If users visit our site via SSL the hack doesn't seem to work.
I guess this is because this call here:var resizeImagesUrl = 'http://www.example.com/forum/trimOversizedImages.php';
Could this be changed to use a relative url?

Like: var resizeImagesUrl = '/trimOversizedImages.php';

Thanks

[Battle_Ring]

dont work on 3.6