Auto image resize

Please post general support questions for the phpBB3 core system on phpBB.com!
Bitte allgemeine Supportanfragen zu phpBB3 auf phpBB.de stellen!
Forum rules
Please post general support questions for the phpBB3 core system on phpBB.com!
Bitte allgemeine Supportanfragen zu phpBB3 auf phpBB.de stellen!
Locked

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Auto image resize

Post by 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]
User avatar

Kirk
Dev
Posts: 1956
Joined: 27. July 2010 18:02
phpBB.de User: Kirk
Contact:

Re: Auto image resize

Post by 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.
Gruß Udo

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Re: Auto image resize

Post by 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.
User avatar

Kirk
Dev
Posts: 1956
Joined: 27. July 2010 18:02
phpBB.de User: Kirk
Contact:

Re: Auto image resize

Post by 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
Gruß Udo

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Re: Auto image resize

Post by 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.
User avatar

archivar
Portal Professional
Posts: 1960
Joined: 19. April 2009 21:34
phpBB.de User: archivar
phpBB.com User: archivar
Location: Deutschland

Re: Auto image resize

Post by 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:
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%;" />',
V.G. archivar
sorry for my bad english

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Re: Auto image resize

Post by 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!
User avatar

archivar
Portal Professional
Posts: 1960
Joined: 19. April 2009 21:34
phpBB.de User: archivar
phpBB.com User: archivar
Location: Deutschland

Re: Auto image resize

Post by archivar »

I move the topic, as it relates to phpBB.
V.G. archivar
sorry for my bad english

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Re: Auto image resize

Post by 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
User avatar

archivar
Portal Professional
Posts: 1960
Joined: 19. April 2009 21:34
phpBB.de User: archivar
phpBB.com User: archivar
Location: Deutschland

Re: Auto image resize

Post by archivar »

archivar wrote: 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>',
Mordynak wrote: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>
V.G. archivar
sorry for my bad english

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Re: Auto image resize

Post by Mordynak »

archivar wrote: 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!

Topic author
Mordynak
Active Member
Posts: 26
Joined: 6. April 2013 01:08

Re: Auto image resize

Post by 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!
Locked

Return to “General phpBB3 Support”