Topic: Image resizing

Hi there
I`m using PunBB and love it:)
But i have a little problem with the [*img] tags. If someone posts a picture, 1024x768px, the hole layout crashs because the forum is only 900px. Is it possible to resize an image that was linked within the img tags? And if yes, is it possible to link to the original when you click on the resized image?

I`ve tested something with java but it don`t work. Perhaps it would work with php?
It would be pretty cool if someone have an idea to realize this.


greetings
Mischa

p.s. my english is bad i know, hope you understand what i mean;)

2

Re: Image resizing

yes you can do that using style sheets.. wait ill look it up for you smile

a new game in the making:
A new Dawn

3 (edited by vin99 2004-09-16 11:07)

Re: Image resizing

see this link:

the 4th foto is resized.
http://www.vin99.net/forum/viewtopic.php?t=649 (contains partial nudity.. just to say so)

look into the code and change the [img] tags of your forum and your done. it only works in browsers that resize images when viewing them like IE6 firefox Netscape etc..

a new game in the making:
A new Dawn

4

Re: Image resizing

so you need:

<script type="text/javascript">

var maxWidth = 580;

function scaleImage(im) {

  if (typeof im.naturalWidth == 'undefined') im.naturalWidth = im.width;

  if (im.naturalWidth > maxWidth) {

    im.width = maxWidth;
    im.style.maxWidth = im.naturalWidth + 'px';
    im.className = 'resized';
    im.title = 'Klik voor originele grootte';
    im.onclick = unscaleImage;

  }

}

function unscaleImage() {

  if (this.width == maxWidth) {

    this.width = this.naturalWidth;
    this.style.borderWidth = '0px';
    this.title = 'Klik om te verkleinen';

  } else {

    this.width = maxWidth;
    this.style.borderWidth = '2px';
    this.title = 'Klik voor originele grootte';

  }

}

</script>

in your head section and the image code looks like this:

<img src=" URL " border="0"  onload="scaleImage(this);" alt=""/>
a new game in the making:
A new Dawn

Re: Image resizing

Hey
Wow thank you for this fast reply. I will test this right now and then give some feedback:)

6

Re: Image resizing

thats ok smile

a new game in the making:
A new Dawn

Re: Image resizing

Ok it works,
but i hoped to become some ideas to realize this in php. I`m not a fan of javascript. Although thank you for your proposal.

If anyone has another idea, i still got an open ear:)

8

Re: Image resizing

You mean really resising the image like making a thumbnail or somethnig?

this can be done with GD2 or GD1 allthough im not a great fan of that. also you have the problem that images are remote (not on your server) so that would mean you have to grab the image and place it on your server...

but again im not sure about this wink

and you could always just check the size and scale it % wise if it is bigger than a certain size.

a new game in the making:
A new Dawn

Re: Image resizing

In PunBB 1.2, scrollbars appear on the image if it does not fit in the window.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

10

Re: Image resizing

scrolleble divs?

a new game in the making:
A new Dawn

Re: Image resizing

Images are placed in a div with "OVERFLOW: auto".

"Programming is like sex: one mistake and you have to support it for the rest of your life."

12

Re: Image resizing

nice big_smile is it in the pre launch code? or do i have to wait for it wink

a new game in the making:
A new Dawn

Re: Image resizing

http://66.98.138.31/~connorhd/pundev/vi … ?pid=34#34

14

Re: Image resizing

oeoe looking nice big_smile

a new game in the making:
A new Dawn

Re: Image resizing

wow, that's awesome stuff!!  let me just rip the code for my forums... smile

Digital photography news, reviews, discussions and more!
http://www.shuttertalk.com

The online bible for all
http://www.publicbible.com

Re: Image resizing

Gaah! I'm going crazy!

Why does IE show a vertical scrollbar too!? I think it's beqause the "image" gets a bit higher when the horizontal scrollbar is added. Someone knows whats wrong?

Re: Image resizing

Yes, it's an IE bug. We'll have to live with it.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Re: Image resizing

I was afraid that was the answer :(

Thanks.

19

Re: Image resizing

When calculating height IE fails to take account of the height of the horizontal scrollbar. Therefore instead of putting the horizontal scrollbar after the image it plonks it on top of the end of the image. Result is vertical scrolling by an amount equivelant to the height of the horisontal scrollbar. I am still working on eliminating it but I can't promise a solution. There might be an answer using getimagesize so IE can be fed real height rather than having to calculate it though that feels like overkill. You can turn the vertical scrollbar off in IE but then you loose the bottom 16px of the image. If you want to try it add overflow-y: hidden to the relevant class in the stylesheet.

Incidentally, it should be possible to make this work with PunBB 1.1x but it almost certainly requires a fixed width on the div containing the image rather than 100% to stop the table expanding in IE.

20

Re: Image resizing

Could somebody who is running the 1.2 dev code try this in their stylesheet

.postimg {WIDTH: 100%; OVERFLOW: auto;overflow-y:hidden; padding:0px 0px 18px 0px}
DIV>DIV>.postimg {padding-bottom: 0px}

This should fix the IE glitch. Only downside is that small images without scrollbars get an extra 18px of padding at the bottom i.e. between the end of the image and whatever comes next.

Re: Image resizing

done - http://66.98.138.31/~connorhd/pundev/vi … ?pid=34#34 works ;D

Re: Image resizing

Hi,
wich files i need to change?

" your head section and the image code looks like this:"

Greetings
Mcihaela

Re: Image resizing

Me again.  smile

Please tell me have i can insert this mod.

PLEASSEEE  smile

Greetings
Michaela

24 (edited by cherry1499 2004-10-07 13:53)

Re: Image resizing

Hey,
i dont know where i can change the [img] tags ...

Michaela

update: ok, i find it self: include/parser.php

Re: Image resizing

Ok, it works, but only when i refresh the page!

So, if i open the topic, nothing happened... but when i refreh the site (F5), the images get small.

Why?
Sorry, but i hate it, when nothing works and i still work at the script till i havent the problems ...

Michaela