Resize photos automatically

[Ryom]

Since this is a recurring issue, add the attachment mod with a max image size before being linkified, or add one of the client side javascript mods that resize embedded photos to fit the browser window. Client side resize is a 10 minute mod and allows images to match the viewers resolution instead of simply guessing what the max should be. Someone is always going to come along with 640x480 res and think the standard is too big, and someone with 2560x1600 res thinks they are too small. Client side resize for the win!

[Ryom]

http://www.phpbb.com/community/viewtopic.php?t=123690 - Simple Image Resize 1.10 - Installation time: 1 minute - Installation Level - Easy

Code: Select all

    #################################################################

       ## Mod Title:       Simple Image Resize

       ## Mod Version:    1.1.0 Final

       ## Author:       likeatim < admin @ essential-freebies.de > < http://www.efb.nu >

       ## Description:

       ## Orginal Code by opa @ invisionpower.de

       ## This adds a simple Image resize code so your tables won't get screwed by oversized images.

       ## Works dynamically with every screen resolution.

       ## Uses Javascript, so resizing might not work if people have adblocker (Proxomitron etc.) installed.

       ## Solution: Users should then add your site to their trusted sites within the adblocker.

       ##

       ## Installation Level:    Easy

       ## Installation Time:    1 Minute

       ## Files To Edit:    bb.code.tpl

       ## Included Files: n/a

       #################################################################

       ## Security Disclaimer: This MOD Cannot Be Posted To Or Added At Any Non-Official phpBB Sites

       #################################################################

       ##

       ## Author Note:

       ## No Notes.

       ##

       ## History:

       ## 1.10: Images now are resized proportionally (as an alternative)

       ## 1.00: Initial Release

       ##

       ## the phpBB Group Reserves The Right To Remove/Edit Author Notes,

       ## Should It Be Warranted

       ##

       #################################################################

       ## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD

       #################################################################

   

       #

       #-----[ OPEN ]------------------------------------------

       #

       templates/subsilver (or whatever you use/bbcode.tpl

   

   

   

       #

       #-----[ FIND ]------------------------------------------

       #

       <!-- BEGIN img --><img src="{URL}" border="0" /><!-- END img -->

   

       #

       #-----[ REPLACE WITH ]------------------------------------------

       #

       <!-- BEGIN img --><img src='{URL}' border='0' onload="javascript:if(this.width > screen.width-300)this.width = (screen.width-300)" onclick="javascript:window.open('{URL}','','scrollbars=1,toolbar=yes,resizable=1,menubar=yes,directories=yes,status=yes')" alt="Posted Image, might have been reduced in size. Click Image to view fullscreen." title="Posted Image, might have been reduced in size. Click Image to view fullscreen." />

       <!-- END img -->

   

   

   

       FOR PROPORTIANAL RESIZING:

   

       #

       #-----[ REPLACE WITH ]------------------------------------------

       #

       <!-- BEGIN img --><img src='{URL}' border='0' onload="javascript:if(this.width > screen.width-300){ this.height = Math.round(((screen.width-300)/this.width)*this.height); this.width = (screen.width-300); }" onclick="javascript:window.open('{URL}','','scrollbars=1,toolbar=0,resizable=1,menubar=0,directories=0,status=0')" alt="Posted Image, might have been reduced in size. Click Image to view fullscreen." title="Posted Image, might have been reduced in size. Click Image to view fullscreen." />

       <!-- END img -->

   

       #

       #-----[ SAVE/CLOSE ALL FILES ]------------------------------------------

       #

       # EoM

   

[ctrlsteef]

Lol, another thing we talked about many times with the difference that we now actually have something easy to implement. :)
It's all up to Ibrin.

[Paradigm Shifter]

It's more a matter of the mods conflicting with tweaks that are already made to the underlying phpBB code used on the WSGF. It might work without issues, but I don't know for sure.

[skipclarke]

I tried it this morning, but it didn't resize the pics. I did get the "Posted Image, might have been reduced in size. Click Image to view fullscreen." text when I moused-over, so I know the code took. But, it didn't resize in Safari or FireFox.

[NightBlade]

The Javascript code seems to open up a new window with the full sized image, maybe your popup blocker is being overzealous? To do inline resizing, you might have something like this (keep in mind I don't really work with Javascript, so this code might not be perfect):

Code: Select all

<!-- BEGIN img --><img src='{URL}' border='0' onload="javascript:origwidth = this.width; origheight = this.height; if(this.width > screen.width-300){ this.height = Math.round(((screen.width-300)/this.width)*this.height); this.width = (screen.width-300); }" onclick="this.width = origwidth; this.height = origheight;" alt="Posted Image, might have been reduced in size. Click Image to view fullscreen." title="Posted Image, might have been reduced in size. Click Image to view fullscreen." />

       <!-- END img --> 

[skipclarke]

It would open the "full size" image in the new window. The issue is that it didn't to the inline re-size. Will try this one later.

[NightBlade]

My previous example does work, but it would only go from the scaled size to the full size. I've reworked it so that if you click it multiple times, it toggles between the scaled size and the full size :D If you want it to scale it smaller, increase the last two "300" values.

Code: Select all

<img src='{URL}' border='0' onload="javascript:this.origwidth = this.width; this.origheight = this.height; this.resized = 0; if(this.width > screen.width-300){ this.height = Math.round(((screen.width-300)/this.width)*this.height); this.width = (screen.width-300); this.resized = 1;} this.scaledheight = this.height; this.scaledwidth = this.width;" onclick="if(this.resized){this.width = this.origwidth; this.height = this.origheight; this.resized = 0;} else {this.width = this.scaledwidth; this.height = this.scaledheight; this.resized = 1;}" alt="Posted Image, might have been reduced in size. Click Image to view fullscreen." title="Posted Image, might have been reduced in size. Click Image to view fullscreen." />

[Ryom]

Any luck?

[skipclarke]

Just tried it, and no go. Must be some way that phpBB is handling the code. I do get the new alt txt when I mouse-over, but no resize.

[Ryom]

There are a few other mods that come up in a search for Image resize under the Mod section of phpbb.com, and probably a few at http://phpbbhacks.com

Would you be willing to try another one?

[Ryom]

Here are two more quick mods to try:

http://phpbbhacks.com/download/7842 <--- Same as my first link, but coded differently... worth a shot.

http://phpbbhacks.com/download/3957 <--- Resizes to a static max image size specified during install.

[Ryom]

Is this a no go, or is there just no time to try the other mods for now?

[ctrlsteef]

I think Ibrin is again really busy. Give it some time and he'll reply without a doubt. :wink:

[Ryom]

Those last two I posted are all I've found that seems to be worthwhile (minus a full blown attachment mod.) So once those are tried (and if they don't work for some reason), I'm out of suggestions :)

[MobsterOO7]

I'm a member of another forum that resizes images automatically. The only glitch is that it says "click to view full size image" and when you do it just takes to the imageshack homepage. Other wise it works pretty good.

heres an example: http://www.geekstogo.com/forum/Unstable-operating-system-t141471.html&st=315

[DaFox]

I'm a member of another forum that resizes images automatically. The only glitch is that it says "click to view full size image" and when you do it just takes to the imageshack homepage. Other wise it works pretty good.

heres an example: http://www.geekstogo.com/forum/Unstable-operating-system-t141471.html&st=315

Thats an IPB Mod though, its different software then what Ibrin uses here (phpBB2) and will not work with phpbb2.

Oh and the reason why it takes you to the imageshack homepage is that the picture is bound to a clickable link, if it wasent then you would be able to view it full size.

[g00seberry]

You actually click on the text in the black bar to see it full size, rather than the image.
And I'm not sure how useful that mod will be. Yes it will stop the forum from being stretched, but you still download the whole image before it resizes, so for the time it's downloading it still humgofies the page, and you don't save on bandwidth.

[Evil Incarnate]

And I'm not sure how useful that mod will be. Yes it will stop the forum from being stretched, but you still download the whole image before it resizes, so for the time it's downloading it still humgofies the page, and you don't save on bandwidth.

I completely agree on this one. I think it is the poster's responsibility to resize images before posting. It would be more effective to just check the size of an embedded image and, if it is greater than the maximum width, alert the poster and return to the post creation page. That way the user is forced to use thumbnails, links, or resize the image(s) before the post can even be completed.

[Ryom]

The point is to allow our computers to do the menial time consuming tasks so that we don't have to do that every single time. You WANT people to contribute as much as possible, making it a chore to contribute reduces the value that others choose to add to the forum.