How to fix huge posted images

rodr

Well-known member
This works with Firefox or Google Chrome. It fixes the problem of posted images that are too wide to fit your browser window. It also limits image height to 800 pixels (you might adjust that to your taste).

Instructions below are for Firefox. For Chrome see post #4.

First you have to install GreaseMonkey:

1. Go to Tools -> Add-ons -> Get Addons.
2. Search for GreaseMonkey.
3. Install, then Restart Now.

To install the magic BARF script:

1. Highlight the script code below and copy it into your clipboard with Ctrl-C or Edit -> Copy.
2. Click the dropdown arrow next to the monkey icon near the top right of your screen.
3. Select New User Script.
4. Click "Use Script from Clipboard".
5. Click Save.
6. Close the script window.
7. Go BARFing!

Code:
// ==UserScript==
// @name        resizeBARF
// @namespace   rodr
// @description Limit images in vBulletin 3 posts to available width.
// @include     http://bayarearidersforum.com/*
// @include     http://www.bayarearidersforum.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @version     1
// @grant       none
// ==/UserScript==
$(document).ready(function() {
  $('[id^="post_message_"] img').css("maxWidth", "100%");
  $('[id^="post_message_"] img').css("maxHeight", "800px");
});
 
Last edited:

rodr

Well-known member
Well sure, if you like getting out of your car to open the garage door. :x
 

rodr

Well-known member
Instructions for Google Chrome turn out to be very similar to Firefox:

First you have to install TamperMonkey:

1. Go to Settings -> Extensions -> Get more extensions
2. Search for TamperMonkey.
3. Install.

To install the magic BARF script:

1. Highlight the script in post #1 and copy it into your clipboard with Ctrl-C.
2. Click the TamperMonkey icon near the top right of your screen (black rectangle with two white dots).
3. Select "Add a new script...".
4. Hit Ctrl-A or otherwise highlight all the default script text and then Ctrl-V to paste in the script from your clipboard.
5. Click Save (the floppy disk icon).
6. Close the script tab and any other tabs you don't want any more.
7. Go BARFing!
 

budman

General Menace
Staff member
I am going to stick this so I can point to it easily in the future.
Not sure we can get folks to engage, but for rally pic threads having the pictures historically attached is such a hug win.
 

rodr

Well-known member
Thanks Dennis. Yeah folks are smarter about posting pics now, but this should help with the older threads.
 

OneRedLT4

Well-known member
IDK, still seems like a lot of clicking to scale down physical size. If the file size is too large, does it trim that too?

I've use Image Resizer (https://imageresizer.codeplex.com/) for years. Just right clickan image file, select resize image, check which size (it'll remember you choice from here after), and by default it creates a copy of the original, both smaller dimensions and file size.
You can select multiple files and resize all at once. I use it for forums emailing, etc
 

rodr

Well-known member
If you are posting photos you should definitely resize them as appropriate. This tool is not for that; it's for easier viewing of the occasional pictures where that was not done.
 
Last edited:

phocup

Well-known member
Or perhaps since Budman seem to be in support of this workaround, BaRF can add those two lines to its CSS and save everyone that's not a webbie the trouble of dealing with greasemonkey ?
 

rodr

Well-known member
Or perhaps since Budman seem to be in support of this workaround, BaRF can add those two lines to its CSS and save everyone that's not a webbie the trouble of dealing with greasemonkey ?

If there's a sufficiently trusted techie who knows how to modify the CSS, that would be ideal.
 

EastBayDave

- Kawasaki Fanatic -
// ==UserScript==
// @name resizeBARF
// @namespace rodr
// @description Limit images in vBulletin 3 posts to available width.
// @include http://bayarearidersforum.com/*
// @include http://www.bayarearidersforum.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @version 1
// @grant none
// ==/UserScript==
$(document).ready(function() {
$('[id^="post_message_"] img').css("maxWidth", "100%");
$('[id^="post_message_"] img').css("maxHeight", "800px");
});

woops, no workie.....likely hard headed old rider...?
 

Attachments

  • kwikasfaki.jpg
    kwikasfaki.jpg
    34.7 KB · Views: 221
Last edited:

ariacode

Well-known member
If there's a sufficiently trusted techie who knows how to modify the CSS, that would be ideal.

I've never dealt with vbullitin, and I'm not much of a css person, but if you have a place to add custom css you'd want the css rules instead of javascript:

Code:
[id^="post_message_"] img {
 max-width: 100%;
 max-height: 800px;
}

You can also change max-height for different screen sizes (phone, etc...). Way overboard top 5 google result here.

Just mentioning incase this is not known/obvious.
 

insyder

Like a Boss.
Staff member
No need for the OP workaround.

The autoresizing has been added to the CSS for images. If you encounter any "super wide" images, please let me know.
 

Enchanter

Ghost in The Machine
Staff member
No need for the OP workaround.

The autoresizing has been added to the CSS for images. If you encounter any "super wide" images, please let me know.

What are the settings? I just inserted a fairly small image, 530x353, using (IMG) (/IMG) and it was auto resized to a much smaller size. Too small.
 

rodr

Well-known member
Re the above, "width: auto\9;" looks like an error.

EDIT: By that I mean a web site programming error, not a problem with the image.
 

Attachments

  • Screenshot at 2018-01-02 07-17-00.jpg
    Screenshot at 2018-01-02 07-17-00.jpg
    67.4 KB · Views: 110
Last edited:
Top