Auto image resize

[Mordynak]

Your Portal Version: 2.0.1
Your phpBB Type: Standard phpBB3
MODs installed: No
Your knowledge: Basic Knowledge
Boardlink: http://highrock.project-tamriel.com

What have you done before the problem was there?
Nothing yet

What have you already tryed to solve the problem?
I tried to add this.

.portal-body img{
padding: 3px;
max-width: 100%;
}

Description and Message
Hi again. Got a minor problem that i cant seem to figure out.

On my board i added

Code: Select all

/* AUTO RESIZE IMG IMAGES*/
.postbody img{
	padding: 3px;
	max-width: 100%;
}

To the bottom of common.css to stop images from breaking out of the theme no matter what size they are.

And i wanted to be able to post images that would show up on the announcements block in the portal. Problem is that the images are full sized on the portal.

Any ideas how i could fix this?

Thanks in advance. I really love this portal, keep up the great work![/i]

[Kirk]

Hi
At max-width: 100% the images are displayed in original size.
Try it this way

Code: Select all

/* AUTO RESIZE IMG IMAGES*/
.postbody img{
   padding: 3px;
   max-width: 700px;
}

Change the value 700px as you want it.

[Mordynak]

Not thats not actually the problem. The images display at 100% of the post body with a padding of 3px. So if i resize the window the images scale with it.

The problem is that this doesnt work in the announcements part of the portal. So if an announcement post contains an img it stretches the entire page.

[Kirk]

Put this code in the portal.css

Code: Select all

.postbody img {
    max-width: 500px;
    padding: 3px;
}

A look here: http://allround-phpbb.de/viewtopic.php?p=3622#p3622

[Mordynak]

Sorry if i sound rude but i think you are missing the point.
This code here...

Code: Select all

/* AUTO RESIZE IMG IMAGES*/
.postbody img{
	padding: 3px;
	max-width: 100%;
}

Works 100%, it literally does exactly as i wish. However, it only affects the forum itself, and not the area on the portal.

Say there is an image in an announcement, it will display on the portal, but instead of automatically resizing like it does on the forum itself, it displays at full size.

EDIT:
If you look on the announcements here
http://highrock.project-tamriel.com/portal.php
You see the second announcement down the list has massive images, they are at full size.

Whereas in the actual topic itself
http://highrock.project-tamriel.com/vie ... ?f=57&t=13
They are automatically scaled to fit the width of the post body / window.

[archivar]

You can create a different BBCode with its own name:
BBCode-Name:

Code: Select all

[Imgres100]{URL}[/Imgres100]

html:

Code: Select all

<img width="100%" src="{URL}" />

Or change like this:

A look here: http://allround-phpbb.de/viewtopic.php?p=3622#p3622

In line with this snippet: externe Bilder zu groß
External images to message size
Open root/includes/bbcodes.php :
search:

Code: Select all

'#\[img:$uid\](.*?)\[/img:$uid\]#s'		=> $this->bbcode_tpl('img', $bbcode_id),

replace this:

Code: Select all

'#\[img:$uid\](.*?)\[/img:$uid\]#s'     => '<img alt="Image" src="$1" style="width:100%;" />',

[Mordynak]

Ahh i thought it might end up with something like that.

In that case I'll just use the highslide image code instead.

Thanks for all the help guys i really do appreciate your time.

Just curious. I dont suppose you know if its possible to change the img implementation?

Code: Select all

<div class="highslide-gallery">
<a href="{URL}" class="highslide" onclick="return hs.expand(this)"><img src="{URL}" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
</div>

It would be nice to have the standard img bbcode to do this. Instead of having a separate one.

Much appreciated!

[archivar]

I move the topic, as it relates to phpBB.

[Mordynak]

Thank you for moving the topic for me Archivar.

Is that part you posted from the bbcode.php where i can add this?

Code: Select all

<div class="highslide-gallery">
<a href="{URL}" class="highslide" onclick="return hs.expand(this)"><img src="{URL}" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
</div>

Thanks again

[archivar]

In line with this snippet: externe Bilder zu groß
External images to message size
Open root/includes/bbcodes.php :
search:

Code: Select all

'#\[img:$uid\](.*?)\[/img:$uid\]#s'		=> $this->bbcode_tpl('img', $bbcode_id),

replace this:

Code: Select all

'#\[img:$uid\](.*?)\[/img:$uid\]#s'     => '<img alt="Image" src="$1" style="width:100%;" />',

when they highslide replace this:

Code: Select all

    '#\[img:$uid\](.*?)\[/img:$uid\]#s'        => '<a href="$1" class="highslide" onclick="return hs.expand(this)"><img alt="Image" src="$1" style="width:100%;" /></a>',

Thank you for moving the topic for me Archivar.

Is that part you posted from the bbcode.php where i can add this?

Code: Select all

<div class="highslide-gallery">
<a href="{URL}" class="highslide" onclick="return hs.expand(this)"><img src="{URL}" alt="" title="Click to enlarge" style="max-width:300px; max-height:300px;" /></a><div class="highslide-heading"></div>
</div>

Thanks again

Or they just do that:

Code: Select all

<div class="highslide-gallery">
    <a href="{URL}" class="highslide" onclick="return hs.expand(this, { wrapperClassName: 'controls-in-heading', slideshowGroup: 'highslide' })">
      <img src="{URL}" width=100% />
    </a>
    <div class="highslide-heading"></div><br />
</div>

[Mordynak]

when they highslide replace this:

Code: Select all

    '#\[img:$uid\](.*?)\[/img:$uid\]#s'        => '<a href="$1" class="highslide" onclick="return hs.expand(this)"><img alt="Image" src="$1" style="width:100%;" /></a>',

This was absolutely perfect! Also I like that you added the image scale in there for me too.

Also, my apologies Kirk. I completely misunderstood you.

Thank you both very much, you've both been great help.

EDIT: I'd just like to add that i changed it from 100% to 98% because it slightly cropped off the right edge. I may still change it to pixels anyway and have small boxes. If only i could figure out how to have them side by side.

EDIT 2: Wow, just changed the width to 200px and they sit side by side. Most places ive searched for said that it was impossible. Youre the best Archivar!

[Mordynak]

Hi guys. As much as i appreciate your help ive noticed a minor issue.

Obviously all this affects all uses of the [IMG] bbcode. This is generally fine for everywhere, except for signatures.

Would it be possible to make it not affect them or should i just settle with a new bbcode?

Thanks a lot in advance!