Afficher les images sur la version mobile

[Shadow]

Afficher les images sur la version mobile

 Attention : depuis le 13 juin 2016, une nouvelle version mobile existe sur les forums. Ce tutoriel est inutile pour cette nouvelle version qui affiche, par défaut, les images à une taille réduite, rendant la navigation plus confortable sur mobile. Afin de réduire le temps de chargement des pages au maximum, les images sont affichées par défaut sous forme de liens sur la version mobile des forums. Ce tutoriel vous expliquera comment afficher les images dans les messages sans quitter la page ou basculer en version classique. 1. Installer le CSS Un des risques d'afficher les images dans les messages sous la version mobile est que certaines images trop larges peuvent dépasser du sujet et déformer la page. Pour prévenir cela, il est nécessaire d'ajouter ces quelques lignes de CSS à votre feuille de style. Pour cela, rendez-vous dans Panneau d'administration > Affichage > Couleurs > Feuille de style CSS et ajoutez la règle suivante: Code: .mobile_image { max-width:99% } #mpage-body .postbody > .content > div { overflow:hidden } Ceci va permettre de réduire la taille des images afin qu'elles s'adaptent à la taille du message et va les empêcher de dépasser. 2. Installer le Javascript Pour afficher les images au lieu de leur lien, il est nécessaire d'installer un script. Pour cela, allez dans Panneau d'administration > Module > Gestion de codes Javascript et créez un nouveau script: Titre: Images version mobile Placement: Sur toutes les pages Code: $(function() {   var mode = 0;   /* -- Options -- */   // 0 : Montre toutes les images par défaut   // 1 : Montre les images uniquement au clic     if (!_userdata.page_desktop) return;     var a = document.getElementsByTagName('A'), i = 0, j = a.length,       showImage = function() {         if (/img_link/.test(this.className)) {           this.onclick = null;           this.removeAttribute('class');           this.innerHTML = '<img class="mobile_image" src="' + this.href + '" alt="' + this.innerHTML + '" />';           return false;         }       };     for (; i < j; i++) {     if (/img_link/.test(a[i].className)) {             switch (mode) {         case 0 :           a[i].removeAttribute('class');           a[i].innerHTML = '<img class="mobile_image" src="' + a[i].href + '" alt="' + a[i].innerHTML + '" />';           break;                   case 1 :           a[i].onclick = showImage;           break;                   default :           a[i].onclick = showImage;           break;       }           }   } }); 2.1 Modification du script Il est possible de faire une modification dans ce script pour la variable mode à la deuxième ligne. Cette variable peut prendre deux valeurs différentes, ce qui modifie les options d'affichage des images. mode = 0 : C'est le mode par défaut, indiquer 0 affiche toutes les images. Ainsi, les sujets où les images apparaissaient comme des liens doivent désormais les afficher normalement. mode = 1 : en indiquant 1 comme valeur, les images ne seront affichées qu'au clic sur le lien. Préférez cette option pour garantir un temps de chargement plus rapide du forum sous version mobile tout en laissant à vos membres la possibilité d'afficher les images dans les messages directement.

Cette astuce a été proposée par Ange Tuteur et a été traduite par Vivi. Display topic images on the mobile version Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.

[Walt]

	Attention : depuis le 13 juin 2016, une nouvelle version mobile existe sur les forums. Ce tutoriel est inutile pour cette nouvelle version qui affiche, par défaut, les images à une taille réduite, rendant la navigation plus confortable sur mobile.