FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 25 users online :: 0 Registered, 0 Hidden and 25 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Image Resizer

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 02 May 2016, 10:35

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.

resize - Image Resizer - Page 2 A66dSMI

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. Wink


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. Wink


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. Wink
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 ! Coffee


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


Last edited by Ange Tuteur on Wed 15 May 2019, 09:42; edited 3 times in total

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sun 28 Aug 2016, 10:26

@zizou2012 you're welcome ! ^^
zizou2012
zizou2012
New Member
Gender : Male
Posts : 3
Points : 2774
Reputation : 2
Location : algeria
Language : arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2

Postzizou2012 Thu 15 Sep 2016, 05:02

thks great angel
Anonymous
Guest
Guest

PostGuest Fri 02 Dec 2016, 15:11

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

resize - Image Resizer - Page 2 87af72a55f1a4411beeebfdb1a078145

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).

SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7106
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Fri 02 Dec 2016, 16:20

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 ...

resize - Image Resizer - Page 2 87af72a55f1a4411beeebfdb1a078145

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.
Anonymous
Guest
Guest

PostGuest Fri 02 Dec 2016, 17:18

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 ...

resize - Image Resizer - Page 2 87af72a55f1a4411beeebfdb1a078145

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 Razz I even translated the lot into Dutch .... lol! Thanks for that, @SLGray!
SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7106
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Tue 28 Mar 2017, 23:07

I can confirm this will work on ModernBB.
Sponsored content

PostSponsored content

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum