How to fix huge posted images

[rodr]

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!

// ==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");
});

[OldBlade]

Or, you can just right-click on the image and select 'View Image'.

[rodr]

Well sure, if you like getting out of your car to open the garage door.

[rodr]

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]

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]

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

[OneRedLT4]

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]

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.

[phocup]

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]

Originally Posted by phocup

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]

// ==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.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...?

[rodr]

Go here to see if it's working. If you can see the panoramas without horizontal scrolling, it is.

[ariacode]

Originally Posted by rodr

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:

[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]

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.

[rodr]