Autoresize images on MyBB

[Nevil]

Hello FreeVPS Community,

since I'm a very big fan of the famous forum software called MyBB (MyBulletinBoard) and I even prefer it over every paid forum software I have decided to release a piece of code I and a good old friend from China have written to prevent template breaking through too huge images.

I have already released a MyBB tutorial which shows off how to add a user legend to the "Who's Online" area at the bottom of all MyBB forums to let the people see who exactly is who (which user group and so on...). You can find it here on FreeVPS as soon as possible.

This one is really easy and only requires you to edit a template and the showthread.css inside your themes.

Let's begin:

1. Login into your ACP and go to "Templates & Styles".
2. Now press on the "Templates" area, at the left menu.
3. Select the theme, where you wish to use the script.
4. Now expand the "Footer Templates" entry and select "footer" to edit it.
5. Scroll down to the end and add the following code after "{$auto_dst_detection}":

Code:

<script type="text/javascript">
var divnodes = document.getElementsByTagName("div");
var i, j, anode, oldimgnode;
for(j in divnodes) {
    if('post_body' == divnodes[j].className) {
        var imgnodes = divnodes[j].getElementsByTagName("img");
        for(i in imgnodes)
            if(null != imgnodes[i]
                    && parseInt(i) == i
                    &&'A' != imgnodes[i].parentNode.tagName
                    && null != imgnodes[i].src) {
                anode = document.createElement('a')
                anode.href = imgnodes[i].src;
                oldimgnode = imgnodes[i].parentNode.replaceChild(anode, imgnodes[i]);
                anode.appendChild(oldimgnode);
            }
    }
}
</script>

You can place it even at the end, it does not really matter.

6. Save the template and now we are done with part 1, do the same for all themes you want to use with the script.


Let's do part 2:

1. In your AdminCP go back to "Templates & Styles".
2. Now select the theme you have selected as you did part 1.
3. Inside the theme settings click on the "showthread.css" file.
4. Select the "Edit Stylesheet: Advanced Mode" mode to edit the file.
5. Scroll down to the end of the file and add this:

Code:

#posts img { max-width: 800px; }

6. Save the file and you are done.

Do the same thing with all other themes to apply it on them.

That's it.

Result:
http://i.imgur.com/Slt9x.jpg

As you can see rAzoR8's double screen image does not break the template. To make it larger simply click on the image and you will get it in the real size .


Credits:
Me
RichardGv

[Retry]

You'd choose MyBB over paid forum suite? That's crazy
That's a nice and usefull addon, prevents images from disrupting the layout.

[Kaloy]

Sometimes the difference between free/open source applications and commercial ones are some features and support. For Murderwrecker who seems to have good knowledge in coding/programming, I think he can manage to add feature or modify open source applications base on his needs and he probably could fix error/bugs by himself thus not needing paid support. So I think its not craziness...

[dmmcintyre3]

[IMHost]

very nice but may not usefull for new using MyBB may any addons for this ?

in my UP thats image very BIG

[Nevil]

Dmm you did something wrong, have you added the css code to showthread.css of this theme and the longer code to the footer template of this theme?

I checked the source code and the longer code seems to be in the footer so I guess you forgot to add the css code to showthread.css file in the current theme.

[dmmcintyre3]

It works for me, but only after clearing my cache.

[Nevil]

Indeed.

It really works after clearing cache or CTRL + F5.