Set a limit for the number of images in the signature Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    Set a limit for the number of images in the signature

    mpelmmc
    mpelmmc
    mpelmmc
    Helper
    Helper


    Male Posts : 1092
    Reputation : 170
    Language : English and Spanish
    • Post n°1

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

    Post by mpelmmc 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.
    • Back to top