Image Resizer

First topic message reminder :

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.

@zizou2012 you're welcome ! ^^

thks great angel

Hmm... I tried to install the image resizer on Edge, @Ange Tuteur , but it gave me back several headaches. Here's a screen cap ...



So, we've got a double option bar sitting on top and the images won't reduce to their prior size and state (text just switches back and forth between reduce & enlarge when clicking).

Samantha NL wrote:Hmm... I tried to install the image resizer on Edge, @Ange Tuteur , but it gave me back several headaches. Here's a screen cap ...



So, we've got a double option bar sitting on top and the images won't reduce to their prior size and state (text just switches back and forth between reduce & enlarge when clicking).

It is already included with Edge.

SLGray wrote:

Samantha NL wrote:Hmm... I tried to install the image resizer on Edge, @Ange Tuteur , but it gave me back several headaches. Here's a screen cap ...



So, we've got a double option bar sitting on top and the images won't reduce to their prior size and state (text just switches back and forth between reduce & enlarge when clicking).

It is already included with Edge.

Really now? I should have known. Boy I feel stupid I even translated the lot into Dutch .... Thanks for that, @SLGray!

I can confirm this will work on ModernBB.