Image resize, the easiest way!!

Do not post support requests, bug reports or feature requests. Discuss phpBB here. Non-phpBB related discussion goes in General Discussion!
Ideas Centre

Image resize, the easiest way!!

Postby mayukh » Thu Dec 23, 2010 9:35 pm

Resizing image is necessary for most of the forums. I am sharing a very simple process to do this without using any mod.

Follow the steps one by one:

1>Add a new BBCode in the ACP - "Image".It is not necessarily that you have to add BBCode named "Image".You can give it any name other than "Img".

2>In the "BBCode usage" section, copy paste the following:
Code: Select all
[image]{URL}[/image]


3>In the "HTML replacement" section, copy paste the following:
Code: Select all
<a href="{URL}"><img style="max-width:800px; max-height; 800px;" src="{URL}" alt="Image" /></a>

You can change the values of max-height and max-width according to your forum width.

4>In the "Help line" section, copy paste the following:
Code: Select all
Image: [image]Link to image[/image]


Don't forget to select the Display on posting page option just below it.


Now you have 2 bbcodes "Img" and "Image" , where "Img" just display the picture and "Image" resize if the width and height crosses it's boundary and display the picture.

So, you have to remove the "Img" tag to prevent this duplicate problem.

To do this, open the Posting.php file in the root directory and find the following:
Code: Select all
'S_BBCODE_IMG'         => $img_status,


Delete this line and save it.

Now you are done, Have fun, enjoy.

For screenshots, see the attachments.

Removed animation

Notify me if i have done anything wrong, or find a way to improve further.
Though it is not fancy, but i think, it will do your work.
Attachments
Capture4.PNG
Look here the 2 codes- "Img" and "Image"
Capture4.PNG (4.58 KiB) Viewed 7214 times
Capture5.PNG
Look here only one code for image: "Image"
Capture5.PNG (4.58 KiB) Viewed 7214 times
Last edited by Pit$Bull on Sat Dec 25, 2010 12:10 pm, edited 1 time in total.
Reason: Removed animation image link
mayukh
Registered User
 
Posts: 12
Joined: Wed Sep 01, 2010 2:29 am

Re: Image resize, the easiest way!!

Postby arod-1 » Thu Dec 23, 2010 10:10 pm

this is of course possible, but i have two small suggestion:
  • for width, do not use hardcoded 800px. instead use 100%.
  • no need to limit height.

personally, instead of creating alternative bbcode and all the grief it can give you (e.g., it does not fix the problem for existing posts, nor does it prevent future posts with the wrong bbcode), i so one simple thing.
to the css i add one line:
Code: Select all
img { max-width: 100%; }

in my experience, this is good enough in all cases.

the only downside to both your solution *and* mine is that the visitors to the forum do not have any clear indication that the picture is displayed smaller than it really is.

peace.
standard disclaimer:
backup your db and files before you do anything.
absolutely no guarantee.
if you do what i advise and it blows in your face, all you'll hear from me is: "ah... sorry, i guess"
arod-1
Registered User
 
Posts: 1307
Joined: Mon Sep 20, 2004 1:33 pm

Re: Image resize, the easiest way!!

Postby sUiCiDe » Thu Dec 23, 2010 10:46 pm

Using this now thanks
sUiCiDe
Registered User
 
Posts: 5
Joined: Mon Jan 21, 2008 6:41 pm

Re: Image resize, the easiest way!!

Postby arod-1 » Fri Dec 24, 2010 12:05 am

sUiCiDe wrote:Using this now thanks

just curious: the bbcode way or the css way?

peace.
arod-1
Registered User
 
Posts: 1307
Joined: Mon Sep 20, 2004 1:33 pm

Re: Image resize, the easiest way!!

Postby mayukh » Fri Dec 24, 2010 7:35 pm

@ arod-1:
Yeah, you are right that we don't have to limit the height.

But i don't agree to do
Code: Select all
img { max-width: 100%; }


Bcoz, if the limit is 100% then, where are you resizing it??

I have used hardcoded 800px based on my forum width, this hardcoding is necessary to resize when the limit han been reached or crossed. You can change this fixed width according to your forum width.

And one more thing, which css file you want to edit, please give the location.
mayukh
Registered User
 
Posts: 12
Joined: Wed Sep 01, 2010 2:29 am

Re: Image resize, the easiest way!!

Postby Kevin Clark » Fri Dec 24, 2010 7:51 pm

I use the same edit as arod-1.
It's simple and very good.
It resizes any large images to 100% of the page width the user happens to have.

It's in the common.css file. You just add that one line to the img css code.
User avatar
Kevin Clark
Support Team Member
Support Team Member
 
Posts: 59471
Joined: Fri Jun 04, 2004 10:44 am
Location: Oxford, UK

Re: Image resize, the easiest way!!

Postby julianms » Sat Dec 25, 2010 1:52 pm

Kevin Clark wrote:I use the same edit as arod-1.
It's simple and very good.
It resizes any large images to 100% of the page width the user happens to have.

It's in the common.css file. You just add that one line to the img css code.


I'm using Getaway style.
I've tried to modify the file styleshhet.css as in the photo below :

Image

It didn't work. Previously I put 100% (not "100%"). In any case it didn't work.

On my forum the big images (over 800 px I believe) are scaled to 732 px (width). I would like to be 600 px (instead of 732).
Which file decide what large the image should be ? ca_scripts.js ?? ... (If so I'll try to modify it ...) ...
Or maybe is an easier solution ...

I put the code max-width: 100% in the IMG existing block (I thought not creating another IMG block ...)

*********************************

PS1 It worked with
Code: Select all
max-width: 600px;
... but it resize to 496px (that is too small) ... I'll tray in other ways ...

PS2 I put 700px and it works well enough.
But it resize the LOGO too !!?? .........
Last edited by julianms on Sat Dec 25, 2010 2:09 pm, edited 1 time in total.
Julian M.
User avatar
julianms
Registered User
 
Posts: 32
Joined: Sat Dec 26, 2009 10:00 pm
Location: Bucharest - Romania

Re: Image resize, the easiest way!!

Postby mayukh » Sat Dec 25, 2010 2:08 pm

Thanx to arod-1 and Kevin Clark.

I am using 800px as per my requirement just insyead of 100%.
mayukh
Registered User
 
Posts: 12
Joined: Wed Sep 01, 2010 2:29 am

Re: Image resize, the easiest way!!

Postby princec41 » Sat Dec 25, 2010 2:23 pm

I am using mayukh's way but with 2 modifications.

1. Added target="_blank" in the html replacement section and added img { max-width: 800px; } in the common.css section.
And it works fine.

I prefer mayukh's way bcoz here, you can click on the image and it will open in a new window.
princec41
Registered User
 
Posts: 2
Joined: Sat Dec 25, 2010 2:16 pm

Re: Image resize, the easiest way!!

Postby arod-1 » Sat Dec 25, 2010 5:51 pm

julianms wrote:PS2 I put 700px and it works well enough.
But it resize the LOGO too !!?? .........


yes, setting "img" in the css would limit the width of *any* image in your site.

using 100% means "the size of the containing element". some people prefer to leave small margins/padding/whatever around images, so they use something like 98% (or somesuch) instead of 100%.

the advantage of using % instead of px is exactly why "my" methos would not create an issue with the logo while "px" way does:
the element containing the logo is wider than the element containing the message body. using % would mean the logo is not affected, while if using "px" it might be.

note that "max-width" is a css2 construct, and will not solve the problem for people with old enough browsers (i am not sure about ie6, but i am almost certain ie5 does *not* recognize max-width).

all sane browsers - ff, safari, opera, chrome etc. have no problem with it.
for browsers not supporting max-width, the method suggested by the OP - using bbcode - would also fail, 'cause the bbcode uses max-width...
standard disclaimer:
backup your db and files before you do anything.
absolutely no guarantee.
if you do what i advise and it blows in your face, all you'll hear from me is: "ah... sorry, i guess"
arod-1
Registered User
 
Posts: 1307
Joined: Mon Sep 20, 2004 1:33 pm

Re: Image resize, the easiest way!!

Postby princec41 » Sun Dec 26, 2010 3:58 am

@arod-1, U are right, it's not gotta work with ie6. So what to do in this case?
princec41
Registered User
 
Posts: 2
Joined: Sat Dec 25, 2010 2:16 pm

Re: Image resize, the easiest way!!

Postby julianms » Sun Dec 26, 2010 11:00 am

Kevin Clark wrote:I use the same edit as arod-1.
It's simple and very good.
It resizes any large images to 100% of the page width the user happens to have.

It's in the common.css file. You just add that one line to the img css code.


If I have Getaway (this is based on subsilver2 - and is a phpBB validated style) I have no common.css file ...
(I make changes on styleshhet.css. I believe this is the correspondent ... )

arod-1 wrote:this is of course possible, but i have two small suggestion:
  • for width, do not use hardcoded 800px. instead use 100%.
  • no need to limit height.

personally, instead of creating alternative bbcode and all the grief it can give you (e.g., it does not fix the problem for existing posts, nor does it prevent future posts with the wrong bbcode), i so one simple thing.
to the css i add one line:
Code: Select all
img { max-width: 100%; }

in my experience, this is good enough in all cases.

the only downside to both your solution *and* mine is that the visitors to the forum do not have any clear indication that the picture is displayed smaller than it really is.

peace.


I put 100% again and I put a picture in a forum without pictures (previously I wrote "it doesn't work with 100%). Well it worked now. But not in those threads with larger photos ...

What I'm trying to say it is it doesn't fix the problem for existing posts with this solution either ...

-----------------

Now I'm trying to put again 700px (all images will be scaled) and then replace 700px with 100% (or 98 %) - because the threads are "enlarged" already ... (and theirs sizes is already "affected") ...
... and then see if it works ... (I doubt a little ...)


-------------------------------------

PS1 It doesn't work ... (I came back to max-width: 700 px; and thus the pictures in posts over 700 px are resized to 587 px - and the LOGO is reduced to 700 px)

I have in the folder TEMPLATE a file JavaScript and I believe it is responsible for all this (before fixing to 700px in CSS file all files larger than 800 px were scaled to 732 px - while a file with 799 px stayed intact ...)

The file is this (I'm trying to find out where can be modified there):

File ca_scripts.js :

Code: Select all
var ca_item;
var ca_item2;
var ca_list;

onload_functions[onload_functions.length] = 'ca_resize_images();';

// resize images
function ca_resize_images()
{
    var i, limit, diff;
    limit = 600;
    diff = 225;
    ca_item = document.getElementById('contentrow');
    if(ca_item && ca_item.clientWidth)
    {
        limit = ca_item.clientWidth - diff;
    }
    if(limit < 500)
    {
        limit = 500;
    }
    if(document.body.clientWidth && document.body.clientWidth < (limit + diff) && document.body.clientWidth > 800)
    {
        limit = document.body.clientWidth - diff;
    }
    else if(window.innerWidth && window.innerWidth < (limit + diff) && window.innerWidth > 800)
    {
        limit = window.innerWidth - diff;
    }
    /* IE6 limit fix */
    if(!window.XMLHttpRequest && limit > 1500)
    {
        limit = 800;
    }
    if(ca_main_width && ca_main_width.indexOf('%') == -1)
    {
        ca_main_width.replace(/px/, '');
        if(ca_main_width > 0)
        {
            limit = ca_main_width - diff;
        }
    }
    if(ca_item)
    {
        ca_list = ca_item.getElementsByTagName('img');
    }
    else
    {
        ca_list = document.getElementsByTagName('img');
    }
    for(i=0; i<ca_list.length; i++)
    {
        ca_item = ca_list[i];
        if(ca_item.width > limit)
        {
            if(document.all)
            {
                ca_item.style.cursor = 'hand';
            }
            else
            {
                ca_item.style.cursor = 'pointer';
            }
            ca_item.style.width = (limit - 50) + 'px';
            ca_item.onclick = function() {
                window.open(this.src, 'image', 'width=700,height=500,resizable=1,scrollbars=1');
            }
        }
    }
}

Julian M.
User avatar
julianms
Registered User
 
Posts: 32
Joined: Sat Dec 26, 2009 10:00 pm
Location: Bucharest - Romania

Re: Image resize, the easiest way!!

Postby julianms » Sun Dec 26, 2010 11:25 am

(Because I'm talking about BBCode, I thought I must post another message - instead of making other PS to the last message ...)

I had already a BBCode for resizing the images (I installed the forum this October and after 2 days I added the BBCode for resizing images - it was one of my main concerns ...)

On this page : http://forum.roumanie-site.com/viewtopic.php?p=281#p281

you could find a photo with [dImg]

[dimg=300]http://topnews.in/usa/files/Google_logo_7.jpg[/dimg]


The BBCode is :

1)
[dImg={NUMBER1}]{URL}[/dImg]

2)
<img src="{URL}" style="width: {NUMBER1}px; max-width:98%;"/>

3) (Help)
Image ayant largeur spécifiée (l'image est redimensionnée pour ne pas dépasser le cadre) : [dImg=largeur]http://...[/dImg]

---------------------
(just today I added here : max-width:98%; - but not tested yet with a BIIIG photo ... see If It works ... )

PS1 WOOOOOOOOOOOOOOOW !!

I put

Code: Select all
[dimg=1200]http://topnews.in/usa/files/Google_logo_7.jpg[/dimg] 


and I get an image width=717 !! ...
I must work here too ..........

PS2

My Post Box looks like this :

Image

and I want to keep the tags IMG and dImg too ...

PS3 I replace in BBCode 90% with 700% and I solved the problem at least for the BBCode (every image larger than 700 is transform to width=587 ...)

Now I'm curious with pictures 600< size < 700 (because this is my purpose - at least not having images larger than 600px. But for those who are the screen resolution bigger, let's say 1280 X 1024, the problem it isn't solved - the pictures are too small for them.
But I saw the trick with that 100% doesn't work at all at my place !!! ...)

-----------

It works for the images 600<width<700 too .......

PS4 When I passed to screen resolution 1280 X 1024 the large picture are resized to width=700 (it's better ... When I am to 1024 X 768 the large picture are resized to 587 - because I put max-width: 700 ... and surely it's that JavaScript file who is working ...)

I wonder why the trick with putting 100% doesn't work at all in my forum .....
Julian M.
User avatar
julianms
Registered User
 
Posts: 32
Joined: Sat Dec 26, 2009 10:00 pm
Location: Bucharest - Romania

Re: Image resize, the easiest way!!

Postby Pony99CA » Sun Dec 26, 2010 8:58 pm

julianms wrote:Now I'm trying to put again 700px (all images will be scaled) and then replace 700px with 100% (or 98 %) - because the threads are "enlarged" already ... (and theirs sizes is already "affected") ...

I suggest reading about CSS. You seem to be under the misconception that CSS is "affecting" the actual image. It doesn't; it just affects how the image is displayed (or scaled), like specifying height and width attributes on the IMG HTML tag does.

So your images have not been "enlarged" anywhere.

julianms wrote:PS1 It doesn't work ... (I came back to max-width: 700 px; and thus the pictures in posts over 700 px are resized to 587 px - and the LOGO is reduced to 700 px)

If you don't want the logo resized, create a special CSS class for logo images with max-width: 20000px or something.

Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.
User avatar
Pony99CA
Registered User
 
Posts: 4535
Joined: Thu Sep 30, 2004 3:13 pm
Location: Hollister, CA
Name: Steve

Re: Image resize, the easiest way!!

Postby julianms » Sun Dec 26, 2010 11:03 pm

I read about CSS only few pages on a book ... for the rest I was trying only "to guess" ... lol ...(well, it's not my domain, I'm with Java and Delphi ... I'm Mathematician, working with algorithms ...etc ...
About WebDesign ... I'm just trying to learn now ...) ...

I prefer JavaScript and PHP (I began learning PHP 2 years ago, but I did it from time to time only ...)
But it's obvious I must learn CSS if I want to "embellish" my forum and my site (when I wanted CSS styles I looked through the Internet, found something I liked ... modified a little (of course) ... I never wrote an entire page myself in CSS ...)
The same things with JavaScript codes, because I found on the Internet what I wanted ... and I modified ...etc.

Difficulties ("much time spent" I mean) I had with flashes ... Right on this moment I like VisualLightBox ... and other things ...

On my forum the things are going well (because I modified the logos side, and now I have 3 photos there - problem solved ...).
I don't wanna make classes right now ( ... very busy ...) but I'll make later ...

Thanks for the advices ! ..... :)
Julian M.
User avatar
julianms
Registered User
 
Posts: 32
Joined: Sat Dec 26, 2009 10:00 pm
Location: Bucharest - Romania

Next

Return to phpBB Discussion

Who is online

Users browsing this forum: Ger, omgili [Bot] and 9 guests