Limiter le nombre d'images dans un post

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Limiter le nombre d'images dans un post

Message par Walt Jeu 20 Avr 2017 - 12:49

Limiter le nombre d'images dans un post


La demande en ayant été faite plusieurs fois, voici un tutoriel vous expliquant comment limiter le nombre d'images qui seront affichées dans un message. Ce script fonctionne pour toutes les versions de forum actuellement proposées.

Limiter le nombre d'images dans un post Hideim10


Installation du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Limiter citations" et pour placement "Sujets".

Insérez-y le code suivant :
Code:
$(function() {
  var maxImages = 1, /* nombre maximum d'images par post */
      displayTextReplace = true, /* "false" pour ne rien afficher à la place de l'image masquée */
      displayTextFinal = true,  /* "false" pour ne pas afficher l'information sur le nombre d'images masquées en fin du message */
      maxTextReplace = "Cette image a été masquée",
      maxTextFinal = "L'administrateur de ce forum a choisi de n'afficher que {MAX} images par message.<br />{DIFF} images ont été masquées dans ce message.",
      m = maxImages - 1;

  $('td .postbody:not(.clearfix), #ipbwrapper .post-entry, .pun .post-entry, #phpbb div.post div.postbody div.content').each(function() {
    if( $('img:not([longdesc])', this).length > maxImages ) {
      var totalImages = $('img:not([longdesc])', this).length,
          diffImages = totalImages - maxImages,
          maxTextFinalValues = maxTextFinal.replace("{MAX}", maxImages).replace("{DIFF}", diffImages);

      if(displayTextReplace == true)
        $('img:not([longdesc]):gt('+ m +')', this).hide().wrap("<div class='hideImage'>"+ maxTextReplace +"</div>");
      else
        $('img:not([longdesc]):gt('+ m +')', this).hide();

      if(displayTextFinal == true)
        $(this).append( "<div class='hideImagesMessage'>"+ maxTextFinalValues +"</div>" )
        }
  });
});

Voici les lignes pouvant être modifiées :
Code:
var maxImages = 4, // nombre maximum d'images par post
    displayTextReplace = true, // "false" pour ne rien afficher à la place de l'image masquée
    displayTextFinal = true,  // "false" pour ne pas afficher l'information sur le nombre d'images masquées en fin du message
    maxTextReplace = "Cette image a été masquée",
    maxTextFinal = "L'administrateur de ce forum a choisi de n'afficher que {MAX} images par message.<br />{DIFF} images ont été masquées dans ce message.",

La variable maxImages définit le nombre maximum d'images par post, par défaut 4. La variable displayTextReplace vous permet de choisir si les images masquées sont remplacées ou non par un texte (true : elles sont remplacées, false : elles sont simplement masquées). Ce texte peut être modifié par la variable maxTextReplace. Même fonctionnement s'agissant du texte qui s'affiche en fin du message avec les variables displayTextFinal pour l'activer ou non, et la variable maxTextFinal pour le texte affiché.

Installation du CSS

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Ajoutez le code suivant à votre CSS :
Code:
.hideImage, .hideImagesMessage {
    color: red;
    background-color: #FFF;
    width: 200px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 3px;
}
.hideImagesMessage {
    width: 70%;
    margin: auto;
}

L'astuce est fonctionnelle. Vous pouvez bien entendu modifier ce CSS qui ne modifie que l'apparence des textes remplaçant les images. Very Happy

Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6087
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum