Image resizing (Page 1 of 2)

Mischa · 2004-09-16 10:58

Mischa
Junior Member
Offline

Registered: 2004-09-07
Posts: 4

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

vin99 · 2004-09-16 11:02

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

Re: Image resizing

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

a new game in the making:
A new Dawn

vin99 · 2004-09-16 11:07

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

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

vin99 · 2004-09-16 11:10

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

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

Mischa · 2004-09-16 11:26

Mischa
Junior Member
Offline

Registered: 2004-09-07
Posts: 4

Re: Image resizing

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

vin99 · 2004-09-16 11:28

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

Re: Image resizing

thats ok

a new game in the making:
A new Dawn

Mischa · 2004-09-16 11:47

Mischa
Junior Member
Offline

Registered: 2004-09-07
Posts: 4

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

vin99 · 2004-09-16 11:58

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

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

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

Rickard · 2004-09-16 16:55

Rickard
PunBB Developer
Offline

From: 127.0.0.1
Registered: 2001-11-02
Posts: 9,167

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

vin99 · 2004-09-16 20:22

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

Re: Image resizing

scrolleble divs?

a new game in the making:
A new Dawn

Rickard · 2004-09-16 20:29

Rickard
PunBB Developer
Offline

From: 127.0.0.1
Registered: 2001-11-02
Posts: 9,167

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

vin99 · 2004-09-16 21:21

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

Re: Image resizing

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

a new game in the making:
A new Dawn

Connorhd · 2004-09-16 21:47

Connorhd
Former PunBB Developer
Offline

From: Leeds, UK
Registered: 2004-06-13
Posts: 4,195

Re: Image resizing

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

FluxBB.
Connorhd.co.uk.

vin99 · 2004-09-16 21:50

vin99
Member
Offline

Registered: 2004-09-04
Posts: 23

Re: Image resizing

oeoe looking nice

a new game in the making:
A new Dawn

cuteseal · 2004-09-17 07:49

cuteseal
Senior Member
Offline

From: Melbourne, Australia
Registered: 2004-05-19
Posts: 220

Re: Image resizing

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

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

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

Chacmool · 2004-09-17 11:20

Chacmool
Senior Member
Offline

From: Gothenburg, Sweden
Registered: 2002-07-03
Posts: 946

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?

Rickard · 2004-09-17 11:51

Rickard
PunBB Developer
Offline

From: 127.0.0.1
Registered: 2001-11-02
Posts: 9,167

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

Chacmool · 2004-09-17 11:53

Chacmool
Senior Member
Offline

From: Gothenburg, Sweden
Registered: 2002-07-03
Posts: 946

Re: Image resizing

I was afraid that was the answer :(

Thanks.

Paul · 2004-09-17 13:18

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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.

Paul · 2004-09-17 15:04

Paul
Senior Member
Offline

From: Wales, UK.
Registered: 2003-08-13
Posts: 3,089

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.

Connorhd · 2004-09-17 17:12

Connorhd
Former PunBB Developer
Offline

From: Leeds, UK
Registered: 2004-06-13
Posts: 4,195

Re: Image resizing

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

FluxBB.
Connorhd.co.uk.

cherry1499 · 2004-10-01 15:32

cherry1499
Member
Offline

Registered: 2004-08-22
Posts: 68

Re: Image resizing

Hi,
wich files i need to change?

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

Greetings
Mcihaela

cherry1499 · 2004-10-04 11:26

cherry1499
Member
Offline

Registered: 2004-08-22
Posts: 68

Re: Image resizing

Me again.

Please tell me have i can insert this mod.

PLEASSEEE

Greetings
Michaela

cherry1499 · 2004-10-07 13:48

cherry1499
Member
Offline

Registered: 2004-08-22
Posts: 68

Re: Image resizing

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

Michaela

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

cherry1499 · 2004-10-07 14:26

cherry1499
Member
Offline

Registered: 2004-08-22
Posts: 68

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

Image resizing (Page 1 of 2)

Posts: 1 to 25 of 37

1 Topic by Mischa 2004-09-16 10:58

Topic: Image resizing

2 Reply by vin99 2004-09-16 11:02

Re: Image resizing

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

Re: Image resizing

4 Reply by vin99 2004-09-16 11:10

Re: Image resizing

5 Reply by Mischa 2004-09-16 11:26

Re: Image resizing

6 Reply by vin99 2004-09-16 11:28

Re: Image resizing

7 Reply by Mischa 2004-09-16 11:47

Re: Image resizing

8 Reply by vin99 2004-09-16 11:58

Re: Image resizing

9 Reply by Rickard 2004-09-16 16:55

Re: Image resizing

10 Reply by vin99 2004-09-16 20:22

Re: Image resizing

11 Reply by Rickard 2004-09-16 20:29

Re: Image resizing

12 Reply by vin99 2004-09-16 21:21

Re: Image resizing

13 Reply by Connorhd 2004-09-16 21:47

Re: Image resizing

14 Reply by vin99 2004-09-16 21:50

Re: Image resizing

15 Reply by cuteseal 2004-09-17 07:49

Re: Image resizing

16 Reply by Chacmool 2004-09-17 11:20

Re: Image resizing

17 Reply by Rickard 2004-09-17 11:51

Re: Image resizing

18 Reply by Chacmool 2004-09-17 11:53

Re: Image resizing

19 Reply by Paul 2004-09-17 13:18

Re: Image resizing

20 Reply by Paul 2004-09-17 15:04

Re: Image resizing

21 Reply by Connorhd 2004-09-17 17:12

Re: Image resizing

22 Reply by cherry1499 2004-10-01 15:32

Re: Image resizing

23 Reply by cherry1499 2004-10-04 11:26

Re: Image resizing

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

Re: Image resizing

25 Reply by cherry1499 2004-10-07 14:26

Re: Image resizing

Posts: 1 to 25 of 37