Image resize, the easiest way!!

[mayukh]

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.

[arod-1]

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.

[sUiCiDe]

Using this now thanks

[arod-1]

Using this now thanks

just curious: the bbcode way or the css way?

peace.

[mayukh]

@ 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.

[KevC]

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.

[julianms]

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 :



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 !!?? .........

[mayukh]

Thanx to arod-1 and Kevin Clark.

I am using 800px as per my requirement just insyead of 100%.

[princec41]

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.

[arod-1]

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

[princec41]

@arod-1, U are right, it's not gotta work with ie6. So what to do in this case?

[julianms]

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 ... )

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');
            }
        }
    }
}

[julianms]

(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 :



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

[Pony99CA]

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.

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

[julianms]

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 ! .....