Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB automatic image resizer [without plugin]
#1
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.
Reply
#2
Are you sure you should use id in replacement code?
[Image: logo.svg.svg]
Reply
#3
(06-04-2019, 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.
Reply
#4
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.
[Image: logo.svg.svg]
Reply
#5
(06-04-2019, 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.
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)