Integrating automatic image resizing

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The next feature release of phpBB 3 will be 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.2.x. If you need support for phpBB 3.2.x please visit the 3.2.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: 1831
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Integrating automatic image resizing

Post by DavidIQ » Mon Nov 05, 2012 8:30 pm

brunoais wrote:If you don't need any fancy animations, then:
The problem is that fancy animations is what most people look for when they want image resizing (Litebox, Lytebox, Highslide JS, etc.). I am not opposed to your idea or Callum's of course if that will at least give the core some way of resizing images client side. I'm sure many would be happy with at least that. :)
Image

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

Re: Integrating automatic image resizing

Post by brunoais » Mon Nov 05, 2012 10:11 pm

callumacrae wrote:
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.
With my solution you may use @media for different screens to obtain different solutions and deliver the user responsive design.
In your approach, if you want to also allow that, then you need to write the code for that and you need to take care of the problem properly each time the window is resized and whatnot.
I still don't know what you mean with:
callumacrae wrote:the server has no reliable way of knowing whether the image is too big or not
What does that mean?

Personally, I'm against using js to change looks, except when it really does make sense to do so (the major reason is related with js animations). This is not one of those cases. All changes can be easily made with a simple class change. All aspect changes are being taken care by the CSS itself.

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

Re: Integrating automatic image resizing

Post by brunoais » Tue Nov 06, 2012 8:10 am

Here's a CSS only solution.
http://jsfiddle.net/SrdU7/
No need to complain that it is hackish and that the markup does not stay correct because that is undoubtedly true. I just posted here for you to see that there's actually a way to make this that is able to fully adapt to what the user is currently seeing. Also... IE8 does not know what the "+" (next sibling operator) means, so this does not work on IE8.

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

Re: Integrating automatic image resizing

Post by Marc » Tue Nov 06, 2012 10:53 am

brunoais wrote:@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?
That code is over 2 years old so I'm guessing there is no problem with improving it. My main goal was to get people to talk about it again. A simple image resize should be added to phpBB 3.1.

Your CSS example is IMHO way to slow. If you click on it by accident then your second click will not be recognized. That's the downside with CSS properties.

A combination of CSS & JS should be the goal here. Also I don't like picking a random number like 300px as maximum width. That's why I used the width of div.content and substracted 30px from that. That way users don't usually have to click on the picture in order to actually see what's on it.
callumacrae wrote:
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.
That's why I added this:

Code: Select all

var maxWidth = $('div.content').innerWidth() - 30;
If we use CSS & JS we obviously would need to set a low maxWidth which kind of is against what I suggested. I don't think there is something like max-width: 98% or something though, so it wouldn't exceed the width of the parent, or did I miss something?

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

Re: Integrating automatic image resizing

Post by brunoais » Tue Nov 06, 2012 6:26 pm

Marc wrote: Your CSS example is IMHO way to slow. If you click on it by accident then your second click will not be recognized. That's the downside with CSS properties.
You mean... a double click?
Marc wrote: A combination of CSS & JS should be the goal here. Also I don't like picking a random number like 300px as maximum width. That's why I used the width of div.content and substracted 30px from that. That way users don't usually have to click on the picture in order to actually see what's on it.
callumacrae wrote:
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.
That's why I added this:

Code: Select all

var maxWidth = $('div.content').innerWidth() - 30;
If we use CSS & JS we obviously would need to set a low maxWidth which kind of is against what I suggested. I don't think there is something like max-width: 98% or something though, so it wouldn't exceed the width of the parent, or did I miss something?
You missed something.
You can make exactly that with just CSS. With CSS3, they were able to cover up just about any situation that is related to appearance. With CSS2 (required to make it work for IE8) it is breadly available. Anyway, AFAIK what you need exists in CSS2.

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 » Tue Nov 06, 2012 8:53 pm

I don't see the problem in using JavaScript here; it is what it was designed for. It is not what CSS was designed for. Hacking checkboxes is certainly not the way to do it.

It's simple enough to animate it: http://jsfiddle.net/UR8qm/3/
Made by developers, for developers!
My blog

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 » Tue Nov 06, 2012 9:13 pm

I agree with post above about css/js. This requires a JavaScript solution.

All solutions assume that image is not clickable, so you add onclick event to it. If image is inside a link, clicking link should take priority over zooming in, so onclick event should not be applied.


As for width, instead of checking for width of .content check for width of parent element. Image could be inside another block that is smaller than div.content, such as quote block. This is where things become a bit tricky.

If parent element has display:inline, such as <a> or <strong>, script should check for parent of parent element until it finds one with display:block.

If one of parent elements has display:table-cell, that element scales with content. All inner elements with display:block will also scale with table cell unless they have fixed width. This poses a problem that as far as I know cannot be solved. I think if one of parent elements has display:table-cell, image should not be scaled down.

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 » Tue Nov 06, 2012 10:19 pm

Arty wrote:I agree with post above about css/js. This requires a JavaScript solution.

All solutions assume that image is not clickable, so you add onclick event to it. If image is inside a link, clicking link should take priority over zooming in, so onclick event should not be applied.


As for width, instead of checking for width of .content check for width of parent element. Image could be inside another block that is smaller than div.content, such as quote block. This is where things become a bit tricky.

If parent element has display:inline, such as <a> or <strong>, script should check for parent of parent element until it finds one with display:block.

If one of parent elements has display:table-cell, that element scales with content. All inner elements with display:block will also scale with table cell unless they have fixed width. This poses a problem that as far as I know cannot be solved. I think if one of parent elements has display:table-cell, image should not be scaled down.
http://jsfiddle.net/UR8qm/6/

The image is linking somewhere, but it's in an iframe so it shouldn't work anyway. If it weren't in an iframe, it would follow the link.
Made by developers, for developers!
My blog

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 » Tue Nov 06, 2012 10:46 pm

edit: never mind

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

Re: Integrating automatic image resizing

Post by brunoais » Tue Nov 06, 2012 10:49 pm

Arty wrote:I agree with post above about css/js. This requires a JavaScript solution.

All solutions assume that image is not clickable, so you add onclick event to it. If image is inside a link, clicking link should take priority over zooming in, so onclick event should not be applied.
If preventDefault() (dunno about stopPropagation(), though) is not called, then if the user clicked the link, both things will happen which does not seem to be a problem. The click event will be caught
callumacrae wrote:I don't see the problem in using JavaScript here; it is what it was designed for. It is not what CSS was designed for. Hacking checkboxes is certainly not the way to do it.
Yeah... I agree. I just wanted to show an example.
callumacrae wrote:It's simple enough to animate it: http://jsfiddle.net/UR8qm/3/
If you want animations that do not use CSS animations then that's a solution I accept.
I'd still use CSS animations and use toggleClass, though.

Post Reply