Set a limit for the number of images in the signature

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial Set a limit for the number of images in the signature

Post by mpelmmc on December 23rd 2018, 1:36 am

Set a limit for the number of images in the signature


This tutorial works for all the Forumotion versions, including the newest ModernBB and AwesomeBBBETA

With this tutorial, we will be able to limit the number of images allowed in the signatures of our users, in order to avoid them to have an excessively long signature.

If a user tries to save a signature having more images than allowed, this message will show up to him:

Set a limit for the number of images in the signature 40411310

2. Javascript code:

We will add the following code in ACP Arrow Modules Arrow HTML & Javascript Arrow Javascript:

  • Title: (whichever you want)
  • Position: Set a limit for the number of images in the signature Checkb10 In all the pages
  • Code:
    Code:
    // ZONA EDITABLE
    const NUM_MAX_IMAGENES = 3;
    const TEXTO_ERROR = 'Signature not saved. Maximum number of images you can use are';
    // FIN ZONA EDITABLE

    if (encontrarParametroGET('mode') === 'editprofile' && encontrarParametroGET('page_profil') === 'signature') {
      document.addEventListener('DOMContentLoaded', function() {
        document.getElementsByName('submit')[0].addEventListener('click', function(e) {
          var textoFirma = $('#text_editor_textarea').sceditor('instance').val();
          if (numeroImagenes(textoFirma) > NUM_MAX_IMAGENES) {
            e.preventDefault();
            if (!document.getElementById('error_max_images')) {
              var divError = document.createElement('div');
              divError.id = 'error_max_images';
              divError.innerHTML = TEXTO_ERROR + ' <strong>' + NUM_MAX_IMAGENES + '</strong>';
              var post = document.getElementById('message-box') ? document.getElementById('message-box') : document.getElementsByClassName('sceditor-container')[0];
              post.prepend(divError);
            }
          }
        });
      });
    }

    function encontrarParametroGET(nombreParametro) {
        var resultado = null,
            tmp = [];
        var items = location.search.substr(1).split('&');
        for (var index = 0; index < items.length; index++) {
            tmp = items[index].split('=');
            if (tmp[0] === nombreParametro) resultado = decodeURIComponent(tmp[1]);
        }
        return resultado;
    }

    function numeroImagenes(texto) {
      return texto.split('[img]').length-1;
    }

We may edit the variables NUM_MAX_IMAGENES with the number of images allowed, and TEXTO_ERROR with the text that will return if more images than allowed are posted (we don't have to add the number of images allowed here as the script itself will do it automatically.

3. Customizing the returning error:

We can also edit the style of the returning error. We will have to go to ACP Arrow Pictures and Colors Arrow Colors Arrow CSS Stylesheet and add the following CSS:

Code:
#error_max_images {
  border: 1px solid #630b0b;
  background-color: #ff0000;
  padding: 4px;
  border-radius: 3px;
  color: white;
  width: 79%;
}

We can apply the CSS rules we want to the error_max_images identifier in order to customize the style of the error message.

This tutorial was written by @JoEl-jr for the Spanish support forum of Forumotion and translated by @mpelmmc.
mpelmmc
mpelmmc
Helper
Helper

Male Posts : 1084
Reputation : 166
Language : English and Spanish

View user profile https://help.forumotion.com/

Back to top Go down

Back to top

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

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