Integrating automatic image resizing

[DavidIQ]

Not really what most users would be expecting for this but sure!

The current behaviour is this:

[snip huge image...]

Nice way to ignore the point.

Having looked at the code, it would need a rewrite - no offence, David!

None taken. I already knew it needed a rewrite. It's 5+ year old code.

[Ger]

Already made this an RFC 2 years ago...

[MaFeSa]

Just integrate ReIMG into the core and call it a day! It is, afterall, one of the most downloaded MODs for phpBB anyways. Maybe that is saying something about how much people like its functionality. It also, to get back on topic, is basically what OP was asking for.

+1

+1

[Marc]

Adding this would be as easy as adding this or a similar code and executing it in $(document).ready():

Code: Select all

/**
* Image resizer
*/
function resize_images()
{
	var maxWidth = $('div.content').innerWidth() - 30;
	
	// resize the attached images
	$('img', 'dt.attach-image').each(function(i){
		// check the width of the image
		if ($(this).width() > maxWidth)
		{
			// calculate new image dimensions
			newWidth = maxWidth;
			newHeight = $(this).height() / ( $(this).width() / maxWidth );
			   
			// set new image dimensions
			$(this).height(newHeight).width(newWidth);
		}
	});
	
	// resize the images that were added via [img] bbcode
	$('img', 'div.content').each(function(i){
		// check the width of the image
		$(this).css('max-width', maxWidth); // fix for IE
		if ($(this).width() > maxWidth)
		{
			// calculate new image dimensions
			newWidth = maxWidth;
			newHeight = $(this).height() / ( $(this).width() / maxWidth );
			   
			// set new image dimensions
			$(this).height(newHeight).width(newWidth);
		}
	});
}

While that doesn't take care of thumbnails and therefore doesn't reduce the transferred bytes it at least doesn't break the style anymore.

[Arty]

No need to set height, browsers automatically scale height when you change width.

[brunoais]

@Marc ... Personally, I don't like that code. There are parts that are too repeated. For example, the $() is executed excessively.
There's no need to execute that function that many times. You could simplify the browser's work with very simple changes to that code. IMO, if you reduce the use of the $() to the amount you really need, then it's enugh.

@Arty That is not entirely true. You may be surprised with the results with some rendering engines if you don't explicitly specify that you want the image width to be a certain value.

Now, the ultimate question:
Why are you doing that with js when CSS can do the same job but in a much more efficient way?

[DavidIQ]

How do you let the user expand the image using only CSS?

[callumacrae]

How do you let the user expand the image using only CSS?

You can only do it on hover, unless you do something hacky like put it in an anchor.

I already wrote the code in a previous post, by the way: http://jsfiddle.net/UR8qm/

Are you happy with that behaviour, but with a "Click to expand" text above it?

[brunoais]

How do you let the user expand the image using only CSS?

If you don't need any fancy animations, then:
CSS:

Code: Select all

.image{
	width: 100px;
	height: auto;
}

.image:hover{
	width: 531px;
	height: auto;
}

If you want to choose when you want to do that using other rules, but still no need for animations:

CSS:

Code: Select all

.image{
	width: 100px;
	height: auto;
}

.image.showHuge{
	width: 531px;
	height: auto;
}

javascript (the jQuery equivalent may be used):

Code: Select all

imageNode.classList.add('showHuge');

to return to normal:

Code: Select all

imageNode.classList.remove('showHuge');

If you need animations, you may use "beautiful" CSS animations and just don't care about animating for the IE8 and IE9. If you do care about those 2 in those animations, then we have the jQuery animations.

(forgot to post this...)

EDIT:
using callumacrae's idea:
http://jsfiddle.net/UR8qm/2/

[callumacrae]

EDIT:
using callumacrae's idea:
http://jsfiddle.net/UR8qm/2/

You shouldn't be adding a class - the server has no reliable way of knowing whether the image is too big or not. It's also not very clean when it can be done entirely in one language.