Auto-Size adjustment for large images

[iBlackHornet]

I've seen this on a few forums. If the title doesn't explain it well to you, then I'm gonna explain it briefly.

There are a lot of threads in which a person posts a picture of large dimensions i.e. 1920x1080 or larger. For someone using a computer with resolution smaller than the image (i.e. 800x600 or 1280x1024), the horizontal scroll will appear.

My suggestion is that if an image is posted which is larger than a specific size, the image size will be auto adjusted to a smaller size (x0.5 of original)
Like, if an image is posted of dimensions 2000x1400, it will be auto-resized to 1000x700.

The larger image should be auto-resized to half as default, but one can press a button, to have it back to original size.

Example of a large image that gets auto-adjusted to a smaller size:

I hope you get what I'm trying to say. If you've any queries regarding this or just don't get what I meant, post below or PM me.

 

If possible, would be good for folks like me with stone-age monitors

 

[AmitZ]

Support. This is much needed.

 

[n4n0]

Wouldn't mind seeing this. It has my support, and I'll try and push it to Sythe when I get the time.

 

[Syed]

If possible, would be good for folks like me with stone-age monitors

There are multiple image resizers for vbulletin already available, so of course it's possible.

And yea, support.

 

[Add My Msn]

Support. neo's pics are always big -.-

 

I would do it client-side only. Anyone got a link to a page on a site that already does this? Can probably borrow some code and save some time.

 

[Syed]

I would do it client-side only. Anyone got a link to a page on a site that already does this? Can probably borrow some code and save some time.

This works, however you'll need jQuery to use this. Modified one I found on stackoverflow to work on vbulletin. Tried it out in the chrome console on Delta's alcohol thread, worked fine as far as I can see. I coulda made it resize based on browser width, but im2lazy.

$(window).load(function() {
	$('div[id^="post_message_"]').find('img').each(function() {
		var maxWidth = 800; // Max width for the image
		var maxHeight = 800;    // Max height for the image
		var ratio = 0;  // Used for aspect ratio
		var width = $(this).width();    // Current image width
		var height = $(this).height();  // Current image height

		// Check if the current width is larger than the max
		if(width > maxWidth){
			ratio = maxWidth / width;   // get ratio for scaling image
			$(this).css("width", maxWidth); // Set new width
			$(this).css("height", height * ratio);  // Scale height based on ratio
			height = height * ratio;    // Reset height to match scaled image
			width = width * ratio;    // Reset width to match scaled image
			$(this).wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + this.src + '" target="_blank"></a></div></td></tr></table>');
			$(this).parent().before('<p style="padding-left:10px;">NOTE: This image was resized. To view it full-size, click on the image.</p>');
		}

		// Check if current height is larger than max
		if(height > maxHeight){
			ratio = maxHeight / height; // get ratio for scaling image
			$(this).css("height", maxHeight);   // Set new height
			$(this).css("width", width * ratio);    // Scale width based on ratio
			width = width * ratio;    // Reset width to match scaled image
		}
	});
});

 

[Swadq]

I coulda made it resize based on browser width, but im2lazy.

$(window).load(function() {
	$('div[id^="post_message_"]').find('img').each(function() {
		var $this = $(this);
		var maxWidth = 800; // Max width for the image
		var maxHeight = $(window).width() - 80;    // Max height for the image. Will have to change if CSS changes
		var ratio = 0;  // Used for aspect ratio
		var width = $this.width();    // Current image width
		var height = $this.height();  // Current image height

		// Check if the current width is larger than the max
		if(width > maxWidth){
			ratio = maxWidth / width;   // get ratio for scaling image
			$this.css("width", maxWidth); // Set new width
			$this.css("height", height * ratio);  // Scale height based on ratio
			height = height * ratio;    // Reset height to match scaled image
			width = width * ratio;    // Reset width to match scaled image
			$this.wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + this.src + '" target="_blank"></a></div></td></tr></table>');
			$this.parent().before('<p style="padding-left:10px;">NOTE: This image was resized. To view it full-size, click on the image.</p>');
		}

		// Check if current height is larger than max
		if(height > maxHeight){
			ratio = maxHeight / height; // get ratio for scaling image
			$this.css("height", maxHeight);   // Set new height
			$this.css("width", width * ratio);    // Scale width based on ratio
			width = width * ratio;    // Reset width to match scaled image
		}
	});
});

 

[Syed]

$(window).load(function() {
	$('div[id^="post_message_"]').find('img').each(function() {
		var $this = $(this);
		var maxWidth = 800; // Max width for the image
		var maxHeight = $(window).width() - 80;    // Max height for the image. Will have to change if CSS changes
		var ratio = 0;  // Used for aspect ratio
		var width = $this.width();    // Current image width
		var height = $this.height();  // Current image height

		// Check if the current width is larger than the max
		if(width > maxWidth){
			ratio = maxWidth / width;   // get ratio for scaling image
			$this.css("width", maxWidth); // Set new width
			$this.css("height", height * ratio);  // Scale height based on ratio
			height = height * ratio;    // Reset height to match scaled image
			width = width * ratio;    // Reset width to match scaled image
			$this.wrap('<table><tr><td class="tborder"><div class="resized_image"><a href="' + this.src + '" target="_blank"></a></div></td></tr></table>');
			$this.parent().before('<p style="padding-left:10px;">NOTE: This image was resized. To view it full-size, click on the image.</p>');
		}

		// Check if current height is larger than max
		if(height > maxHeight){
			ratio = maxHeight / height; // get ratio for scaling image
			$this.css("height", maxHeight);   // Set new height
			$this.css("width", width * ratio);    // Scale width based on ratio
			width = width * ratio;    // Reset width to match scaled image
		}
	});
});

Nice.

Well if Sythe were going to implement this, he could just modify the above code.

 

[candarin]

Support excellent idea, lol.

 

Thanks for the code Swadq. I'll forward this to Sythe as soon as he replies to my PM about another suggestion. Hopefully we can implement this sort of feature.