MyBB Community Forums

This modification can help automatic resize images in thread with MyCode like Ncode image resizer plugin.

Admin CP > Forum settings > MyCode  > Add new MyCode >
Title: MyBB auto image resizer
Regular Expression:

\[img\](.*?)\[/img\]

Replacement:

<div class="scleimages head" data-content=" Click image for full size!"><img class="scleimg" src="$1"></img></div>

Save MyCode.


Admin CP > Templates & Style > Theme which you using > global.css > Edit Stylesheet: Advanced Mode > adding following codes.

.scleimages{
    max-width:30%;
    cursor:pointer;
 user-select:none;
    transition:.3s cubic-bezier(0,.5,1,.5);
}

.scleimages img{
  max-width:100%;
}

.scleimages:before{
  background:yellow;
  height:25px;
  width:100%;
  display:block;
  content:url(http://mybbdepo.com/ncode/xpserkan.png) attr(data-content);
  font-family:Verdana;
  text-align:center;
  line-height:25px;
  font-size:12px;
  border:1px dashed;
  box-sizing:border-box;
  cursor:pointer;
}

after remove this code from global.css

.scaleimages img {
 max-width: 100%;
}

Admin CP > Templates & Style > Templates > Theme which you're using > Ungrouped Templates > headerinclude >adding following codes before {$stylesheets}

<script>document.onclick = function (a) {
    if (a.target.className == 'scleimg') {
var x= a.target.parentElement;
        if (x.style.cssText === "") {
      x.style.cssText = "max-width:100%;";
 x.setAttribute('data-content', ' Click image for small size!');
  } else {
      x.style.cssText = "";/*empty means that it returns original css*/
  x.setAttribute('data-content', ' Click image for full size!'');
  }

    }
 
    if (a.target.className == 'scleimages head') {
var x= a.target;
        if (x.style.cssText === "") {
      x.style.cssText = "max-width:100%;";
 x.setAttribute('data-content', ' Click image for small size!'');
  } else {
      x.style.cssText = "";/*empty means that it returns original css*/
  x.setAttribute('data-content', ' Click image for full size!'');
  }
 
    }
};</script>

For after MyBB 1.8.19; MyBB don't allow using modife img tags with mycode so you can using this trick for this modification;
Configuration » Word Filters

Word *

img]

Replacement

img2]

Regular Expression
Yes

Again goin to MyCode management and change Regular Expression;

\[img2\](.*?)\[/img2\]

Preview:
http://i.hizliresim.com/3z4M7A.png
MyBB otomatik resim boyutlandırma, NCode resim boyutlandırma plugini, Ncode, Otomatik resim boyutlandırma, Modifikasyon.

Are you sure you should use id in replacement code?

(2019-06-04, 11:05 AM)effone Wrote: [ -> ]Are you sure you should use id in replacement code?

It's not necessary but i use it for to differenciate title and img.

Its not supposed to. Since there might be multiple instances of the code.
ID is unique and expected to appear once in the whole HTML of your page.

(2019-06-04, 03:38 PM)effone Wrote: [ -> ]Its not supposed to. Since there might be multiple instances of the code.
ID is unique and expected to appear once in the whole HTML of your page.

Okay, i understand. Thanks for advice, I've updated thread.