MyBB Community Forums

Full Version: Set maximum size limit for MyCode Image insert??
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
For some reason the image insert button on threads allows images to be posted which are bigger than the forum. How do I limit the maximum display size of inserted images?? (not attachments, but the images inserted with the standard mycode image button) thanks
You need to either use some CSS styling (hint: take a look at max-width) or a plugin. here's my personal favourite plugin option: http://mods.mybb.com/view/fit-on-page
Thank you, I looked at the plugin and don't like this, "- Automatically adds a imgnoresize mycode which can be used to post images that you do not want to "

I wouldn't want that.. but all i want to do is keep embedded images from going outside the bounds of the thread container. it's not fixed as the theme has a narrow mode and wide mode.

I guess I would have to put max-width: inherit since w3 school says that doesn't have an auto like other CSS functions. and since I don't see max-width anywhere in the Global CSS I'm at a loss. I really don't want to limit the width to a hard number. Any code advice?
The plugin does add a MyCode, but it's simply so you can post pictures larger than the limit. You can easily remove the MyCode IIRC.

What I'd do is something like this:

.post_body img {
    max-width: 80%;
}

That would make images have a maximum width of 80% of the post container.
(2012-04-29, 02:03 PM)GunnerAIO Wrote: [ -> ]Thank you, I looked at the plugin and don't like this, "- Automatically adds a imgnoresize mycode which can be used to post images that you do not want to "

You could just delete the my code after you install/active the plugin. Or simply disable it since it actually shows up in the mycode list so to get rid of it is quite easy.

for the css thing wouldnt it be easier to use a Mycode?

Regular expression:
\[img\](.*?)\[/img\]

Replacement:
<a href="javascript:void(0)" onclick="window.open('$1', '', 'toolbar=no');myWindow.focus();"><img src="$1" style="max-width: 640px;" alt="Image" title="Full sized Picture" /></a>

Change the width pixel to what you need ofcourse.
(2012-04-29, 02:09 PM)euantor Wrote: [ -> ]
.post_body img {
    max-width: 80%;
}
That's what I'd want but in either existing stock MyCode that I can't edit via configuration>MyCode... or global css. So where could I edit the stock MyCode buttons because they aren't listed in the config section??

also i tried inserting
.post_body img {
    max-width: 80%;
}
into global CSS but it didn't like it... did all crazy things like adding $nspb; or something like that all over the place in global css after I saved it.
(2012-04-29, 06:15 PM)GunnerAIO Wrote: [ -> ]That's what I'd want but in either existing stock MyCode that I can't edit via configuration>MyCode... or global css. So where could I edit the stock MyCode buttons because they aren't listed in the config section??


Simply create a new MyCode (will overwrite the default and when you delete the default becomes active again):

then insert
regular expression:
\[img\](.*?)\[/img\]

And the replacement:
<a href="javascript:void(0)" onclick="window.open('$1', '', 'toolbar=no');myWindow.focus();"><img src="$1" style="max-width: 640px;" alt="Image" title="Full sized Picture" /></a>

Determine the width of your site first though, which can be found in the css templates.
(2012-04-29, 06:22 PM)anori Wrote: [ -> ]regular expression:
\[img\](.*?)\[/img\]

And the replacement:
<a href="javascript:void(0)" onclick="window.open('$1', '', 'toolbar=no');myWindow.focus();"><img src="$1" style="max-width: 640px;" alt="Image" title="Full sized Picture" /></a>

Oh snap.. I think I understand now.. so the MyCode in config EDITs what's already there.. I thought it was to add completely new items..
alright so is it correct if I did this???
<a href="javascript:void(0)" onclick="window.open('$1', '', 'toolbar=no');myWindow.focus();"><img src="$1" style="max-width: 80%;" alt="Image" title="Full sized Picture" /></a>
So your replacement code not only resizes but allows a user to click to open into new tab to see full size image??
Thanks so much for all the awesome help!

EDIT: it doesn't look like it works...image looks maybe 80% of it's own length.... so I have to use a set pixel amount?
(2012-04-29, 06:27 PM)GunnerAIO Wrote: [ -> ]So your replacement code not only resizes but allows a user to click to open into new tab to see full size image??
Thanks so much for all the awesome help!


Yes i use it for a
[thumpnail] [/thumpnail]

Thumpnail mycode with max height and width both set to 150 so. But for your idea this will work well to. Just specify the width and done.

Quote:it doesn't look like it works...image looks maybe 80% of it's own length.... so I have to use a set pixel amount?

Indeed works better with pixels one second let me find where it is the width of a forum
Couldnt find it quickly but google breaking the site up it appears to be native based on the main body, which for my site is 960 so the thread width was 672. But i do use the traditional layout with the avatar on the left side and not above like here.

General safe width would be 500px-600px or something
why bump a thread which has already been solved?
Pages: 1 2