Image Resizer

This image resizer is meant to be an improvement over Forumotion's default resizer, by using CSS to resize the images and JavaScript to provide additional options. It'll resize the images much faster as it utilizes CSS to set height and width restrictions rather than JavaScript.

Click to view demo

Features
- Enlarge / Reduce Image size
- Show full image
- Download image ( Chrome, Edge, Opera, Brave Only )
- Lightbox effect when clicking on resized images

Since this plugin does the same thing as the default resizer, you should disable it if you have it enabled. Go to Admin Panel > General > Messages and Emails > Configuration find "Images resize" and delete any numbers that are in the width / height fields and then save. After that you can proceed with the installation.

Installation

To install this plugin on your Forumotion forum, go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Image Resizer
Placement : In all the pages

Code:

(function() {
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)

    selector : '.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img', // where images should be resized

    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },

    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></i> Show full size',
        enlarge : '<i class="fa fa-search-plus"></i> Enlarge image',
        reduce : '<i class="fa fa-search-minus"></i> Reduce image',
      download : '<i class="fa fa-download"></i> Download image',
      tooltip : 'Click to view full image'
    },

    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector).not('.mention-ava'), i = 0, j = a.length; i < j; i++) {
        if (!a[i].longdesc && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';

          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;

            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }

          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },

    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;

      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }

      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }

      that.parentNode.style.width = img.width - 8 + 'px';
    },

    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];

      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;

      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';

      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },

    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');

      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };

  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );

  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);

  // kill forumactif's image resizer
  if (window.resize_images) {
    window.resize_images = function() {
      return false;
    };
  }
}());


Save the script when you're finished, and the new image resizer will be installed on your forum ! Please see the next section, if you want to make any modifications to it.

Modifications

Below are all the modifications that can be made to this plugin.

1. Max Dimensions
To adjust the maximum height and width of images, find the max_height and max_width variables towards the top of the script :

Code:

    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)

These fields determine at what size(s) the images should be resized.


2. Selector
If you want images to be resized in other areas on your forum, find the selector variable and add the CSS selector for the image.

Code:

    selector : '.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img', // where images should be resized

3. Options
The options object allows you to enable and disable certain options offered by the image resizer. By default all options are enabled, however, if you want to disable any, set the value(s) to false.

Code:

    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : true, // Download image link
      lightbox : true // lightbox effect
    },

4. Language
If you want to change / translate the texts present in this plugin, find and edit the lang object.

Code:

    // texts
    lang : {
      full_size : '<i class="fa fa-external-link"></i> Show full size',
        enlarge : '<i class="fa fa-search-plus"></i> Enlarge image',
        reduce : '<i class="fa fa-search-minus"></i> Reduce image',
      download : '<i class="fa fa-download"></i> Download image',
      tooltip : 'Click to view full image'
    },

5. Theme
Lastly, if you want to change the theme / style of the image resizer find this stylesheet near the bottom of the script :

Code:

  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'+
    (!$('link[href$="font-awesome.min.css"]')[0] ? '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />' : '') // require font awesome
  );

There you will be able to change the style of the image resizer however you like. But if you want a dark theme of the image resizer replace the following in the above stylesheet :

Code:

'.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+

with this :

Code:

'.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#111; border:1px solid #333; }'+

That's everything ! If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy !

Notice

Tutorial written by Ange Tuteur. Special thanks to the Beta Testers for testing this plugin. Reproduction not permitted without consent from the author.

thanks i will add it ! nice work

I have installed it on both of my forums.  Thanks for this improved image resizer.

No problem

Thanks you two !

Okay so.. It's really an awesome feature you made. I absolutely love it. Have added it on one of my friends' forumotion forum and while I was going through the code to just see how it's done (I am trying to learn JavaScript lately ) I noticed this one doesn't have anything too specific for forumotion except maybe for selectors.
So I decided to try and put this on my phpbb test forum (I hope that's alright?) and guess what, it does resize, gives no error. But the resizer bar does not appear above the image, nor is the image clickable.
I wonder what could be the issue?
I simply added the code in the

Code: <head>

of the html.

I know this is strictly "FM design" but can you help identify the issue?
I think the script is running fine though :/

@Rhino.Freak since Forumotion was built around the phpbb software it's no wonder it works. ^^

Now.. the only problem I can think of would be the selector or jQuery library.. This function is executed when the window is loaded :

Code:

    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector), i = 0, j = a.length; i < j; i++) {
        if (!a[i].alt && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';

          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;

            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }

          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },

and it'll insert the options bar before any images that are large. Do you have a link to the forum so I can take a look ?

Selectors are the same, I checked, and yes I added jQuery too. And sadly I can't link you to the forum because it's installed on localhost right now :/

But you can get the info that it is indeed working from this screenshot.


The image in the post is this and you can see it did get resized!

Oh yeah, that's definitely a problem. xD I made a test on another phpbb forum, try changing this selector :

Code:

.postbody > div:not(.user):not(.postprofile) img

into this :

Code:

.postbody .content img

If it still doesn't work let me know.

Did, still working the same. Resizing is taking place but no bar above the image and not clickable...

here's the code I added just above </head> btw

Code:

<script type = "text/javascript"
        src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t544-image-resizer#8305';
 
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.postbody .content img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : false, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : 'Show full size',
        enlarge : 'Enlarge image',
        reduce : 'Reduce image',
      download : 'Download image',
      tooltip : 'Click to view full image'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = $(fa_img_resizer.selector), i = 0, j = a.length; i < j; i++) {
        if (!a[i].alt && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (fa_img_reduced.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(fa_img_reduced, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(fa_img_enlarged, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = $('<div id="fa_img_lb_overlay" />')[0],
          img = $('<img id="fa_img_lb_image" src="' + that.src + '" />')[0];
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'
  );
 
  // begin modifying images when the page is loaded
  $(window).load(fa_img_resizer.resize);
}());
</script>


Hmm.. perhaps it could be related to the use of the $ character ? I know that can sometimes cause problems on forumotion, especially in the widgets. Try replacing all instances of $ with jQuery.

If the document.write statement for the style works, it's most likely related to jQuery OR the window.load() function.

Ange Tuteur wrote:Hmm.. perhaps it could be related to the use of the $ character ? I know that can sometimes cause problems on forumotion, especially in the widgets. Try replacing all instances of $ with jQuery.

If the document.write statement for the style works, it's most likely related to jQuery OR the window.load() function.

Done. Still the same

@Rhino.Freak try replacing your script with this :

Code:

(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t544-image-resizer#8305';
 
  window.fa_img_resizer = {
    max_width : 400, // maximum image width (400px)
    max_height : 250, // maximum image height (250px)
 
    selector : '.postbody .content img', // where images should be resized
 
    options : {
            bar : true, // resized image options bar
        toggler : true, // Enlarge / Reduce Image
      full_size : true, // Show full size
      download : false, // Download image link
      lightbox : true // lightbox effect
    },
 
    // texts
    lang : {
      full_size : 'Show full size',
        enlarge : 'Enlarge image',
        reduce : 'Reduce image',
      download : 'Download image',
      tooltip : 'Click to view full image'
    },
 
    // resize all images inside the "resizeIn" elements
    resize : function() {
      for (var a = document.querySelectorAll(fa_img_resizer.selector), i = 0, j = a.length; i < j; i++) {
        if (!a[i].alt && (a[i].naturalWidth > fa_img_resizer.max_width || a[i].naturalHeight > fa_img_resizer.max_height)) {
          a[i].className += ' fa_img_reduced';
 
          // make the image a "link" if it's not wrapper with one
          if (fa_img_resizer.options.lightbox && a[i].parentNode.tagName != 'A') {
            a[i].style.cursor = 'pointer';
            a[i].title = fa_img_resizer.lang.tooltip;
 
            a[i].onclick = function() {
              fa_img_resizer.lightbox(this);
            };
          }
 
          // create the resize bar
          if (fa_img_resizer.options.bar) {
            (a[i].parentNode.tagName == 'A' ? a[i].parentNode : a[i]).insertAdjacentHTML('beforebegin',
              '<div class="fa_img_resizer" style="width:' + (a[i].width - 8) + 'px;">'+
                (fa_img_resizer.options.toggler ? '<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">' + fa_img_resizer.lang.enlarge + '</a>' : '')+
                (fa_img_resizer.options.full_size ? '<a class="fa_img_full" href="/viewimage.forum?u=' + a[i].src + '" target="_blank">' + fa_img_resizer.lang.full_size + '</a>' : '')+
                (fa_img_resizer.options.download && !/Firefox/.test(navigator.userAgent) && 'download' in document.createElement('A') ? '<a class="fa_img_download" href="' + a[i].src + '" target="_blank" download>' + fa_img_resizer.lang.download + '</a>' : '' )+
              '</div>'
            );
          }
        }
      }
    },
 
    // toggle between enlarged and reduced image sizes
    toggle : function(that) {
      var img = that.parentNode.nextSibling;
 
      if (img.tagName == 'A') {
        img = img.getElementsByTagName('IMG')[0];
      }
 
      if (/fa_img_reduced/.test(img.className)) {
        that.innerHTML = fa_img_resizer.lang.reduce;
        that.className = 'fa_img_reduce';
        img.className = img.className.replace(/fa_img_reduced/, 'fa_img_enlarged');
      } else {
        that.innerHTML = fa_img_resizer.lang.enlarge;
        that.className = 'fa_img_enlarge';
        img.className = img.className.replace(/fa_img_enlarged/, 'fa_img_reduced');
      }
 
      that.parentNode.style.width = img.width - 8 + 'px';
    },
 
    // lightbox effect
    lightbox : function(that) {
      var frag = document.createDocumentFragment(),
          overlay = document.createElement('DIV'),
          img = document.createElement('IMG');

      overlay.id = 'fa_img_lb_overlay';
      img.id = 'fa_img_lb_image';
      img.src = that.src;
 
      overlay.onclick = fa_img_resizer.kill_lightbox;
      img.onclick = fa_img_resizer.kill_lightbox;
 
      frag.appendChild(overlay);
      frag.appendChild(img);
      document.body.appendChild(frag);
      document.body.style.overflow = 'hidden';
 
      img.style.marginTop = '-' + (img.height / 2) + 'px';
      img.style.marginLeft = '-' + (img.width / 2) + 'px';
    },
 
    // kill the lightbox
    kill_lightbox : function() {
      var overlay = document.getElementById('fa_img_lb_overlay'),
          img = document.getElementById('fa_img_lb_image');
 
      overlay && document.body.removeChild(overlay);
      img && document.body.removeChild(img);
      document.body.style.overflow = '';
    }
  };
 
  // write styles into the document head
  document.write(
    '<style type="text/css">'+
      fa_img_resizer.selector + ', .fa_img_reduced { max-width:' + fa_img_resizer.max_width + 'px; max-height:' + fa_img_resizer.max_height + 'px; }'+
      '.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+
      '.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+
      '.fa_img_resizer a { margin:0 3px; }'+
      '.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+
      '#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+
      '#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+
    '</style>'
  );
 
  // begin modifying images when the page is loaded

  if (document.readyState === 'complete') {
    fa_img_resizer.resize();
  } else {
    window.addEventListener('load', fa_img_resizer.resize);
  }
}());

I replaced all jQuery statements with the vanilla JS equivalents, and added an additional check for the load event.

Sadly, this doesn't work either. It's still the same as before. Thanks for your efforts! I appreciate it!

Hmm.. the last thing you can try is placing the script in a .js file. Just create a new text file with the contents as the script I posted, and then change the extension to .js. Put it wherever you place your JS files, then you can link to it like this for example :

Code:

<script type="text/javascript" src="/javascripts/image_resize.js"></script>

( /javascripts/image_resize.js would be the path to the file, I'm sure you already know that though. )

After this I'm out of ideas..

Tried and that doesn't work as well. I guess there's something more to Phpbb than just adding javascripts.. thanks for your help! Really appreciate it!
I'll ask on the phpbb forum what could be the issue.

Oh well, I gave it all I had. Unfortunately I have no idea why it isn't working.

If you figure out the problem lemme know.

ok i have just installed this on my forum at first i was like Wow i love it then after looking over the forum i see the following little problems i don't like

it resizes everything on my forum in the posts

like the siggy bar its got the resize bar on it and it was no there before

and any pic in your siggy is also doing the same is there any way to fix this ?

screen cap :

Post : http://www.achatworld.com/t35p600-what-is-the-weather-like-where-you-live#5534

Hi @Ape,

In the script, replace this selector :

Code:

.postbody > div:not(.user):not(.postprofile) img

With this one :

Code:

.postbody > div.content > div img

Yes that fixed it thank you

but it still shows in the PM system when reading your PM's lol

@Ape ooh I'll try to take a look at that tomorrow then !

Thank you No big rush

Ah I see what the problem is now. Change this selector :

Code:

.postbody > div.content > div img

into this :

Code:

.postbody > div.content > div:not(.signature_div) img

yeps that fixed it

Thank you

No problem, if it goes bonkers again just give me a holler.

cool angel tuteur
thank you