Integrating automatic image resizing

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Integrating automatic image resizing

Post by DavidIQ »

callumacrae wrote:
DavidIQ wrote: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. :-P
callumacrae wrote: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.
Image

User avatar
Ger
Registered User
Posts: 293
Joined: Mon Jul 26, 2010 1:55 pm
Location: 192.168.1.100
Contact:

Re: Integrating automatic image resizing

Post by Ger »

Above message may contain errors in grammar, spelling or wrongly chosen words. This is because I'm not a native speaker. My apologies in advance.

MaFeSa
Registered User
Posts: 69
Joined: Sun Aug 26, 2012 1:44 pm

Re: Integrating automatic image resizing

Post by MaFeSa »

Unknown Bliss wrote:
VSE+ wrote: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

;)

User avatar
Marc
Development Team Leader
Development Team Leader
Posts: 185
Joined: Thu Sep 09, 2010 11:36 am
Location: Munich, Germany

Re: Integrating automatic image resizing

Post by 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.

User avatar
Arty
Former Team Member
Posts: 985
Joined: Wed Mar 06, 2002 2:36 pm
Location: Mars
Contact:

Re: Integrating automatic image resizing

Post by Arty »

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

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Integrating automatic image resizing

Post by 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?

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Integrating automatic image resizing

Post by DavidIQ »

How do you let the user expand the image using only CSS? ;-)
Image

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: Integrating automatic image resizing

Post by callumacrae »

DavidIQ wrote: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?
Made by developers, for developers!
My blog

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Integrating automatic image resizing

Post by brunoais »

DavidIQ wrote: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/

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: Integrating automatic image resizing

Post by callumacrae »

brunoais wrote: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.
Made by developers, for developers!
My blog

Post Reply