SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 231 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Adaptive Images > Adaptive Images

Adaptive Images

15 novembre 2013 – par Cerdic – 74 commentaires

43 votes

Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation.

Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans une page web en fonction de l’utilisateur.

Les images adaptatives sont nécessaires pour les sites responsive qui vont adapter leur affichage au périphérique de consultation [1] : sur un site responsive la même page est rendue de manière différente selon la taille de l’écran.

Il y a 4 raisons d’adapter l’image envoyée à l’utilisateur :

  • la taille de l’écran (inutile d’envoyer une image de 1000px de large sur un téléphone qui affiche la page en 320px de large) ;
  • la résolution de l’écran (écrans de haute densité, capables d’afficher plus de pixels par pouce qu’un écran habituel) ;
  • la qualité de la connexion internet (notamment en mobilité) ;
  • le contenu éditorial (une image affichée en petit peut devenir illisible et il est alors préférable de la recadrer).

Adapter les images vise donc à améliorer l’expérience utilisateur, en lui délivrant l’image qui convient le mieux à son usage.

Cependant HTML 5 ne prévoit pas encore de balisage ni d’API spécifique à ce besoin, et il est compliqué d’y répondre en l’état : de nombreuses techniques existent, toutes ayant des avantages et inconvénients, plus ou moins simples à mettre en œuvre.

Ce plugin automatise la technique des 3 couches basée sur HTML/CSS/JS.
Cette technique requiert un markup un peu compliqué mais elle a quelques avantages :

  • elle préserve l’accessibilité ;
  • elle ne nécessite pas JavaScript ;
  • elle permet un rendu progressif ;
  • elle prend en compte les problèmes de performance et de cache.
L’utilisation du plugin Adaptive Images n’a de sens que si on veut servir à la fois de grandes images de haute résolution pour les tablettes et desktop, sans pénaliser pour autant les smartphones à petits écrans Si les plus grandes images dont on dispose ont des dimensions de l’ordre de 640px, il sera aussi rapide et bien plus simple de servir ces images pour tous les utilisateurs sans recourir à ce plugin.

Mise en place

Il suffit d’installer et activer le plugin pour qu’il prenne immédiatement en charge toutes les images du site.

Par défaut le plugin va intercepter toutes les pages HTML, et agir sur toutes les images plus larges que 320px et les adapter à l’utilisateur :

  • adaptation à la largeur de l’écran, en supposant une largeur maximale affichée de 640px dans tous les cas ;
  • adaptation à la résolution de l’écran en envoyant une image 1.5x ou 2x ;
  • adaptation à la qualité de la connexion : rendu progressif avec une prévisualisation de basse qualité, et pas d’image 1.5x ou 2x si mauvaise connexion ;
  • adaptation du contenu : possibilité de fournir une version recadrée de l’image pour les petits écrans mobiles.

Limitations
Le plugin ne fournit pas d’image adaptée dans Internet Explorer<10.

La qualité de connexion n’est pas détectée sur les périphériques iOS à ce jour (mais sera presque certainement automatiquement prise en charge dans une prochaine mise à jour de iOS).

Les périphériques Androïd 2.x sans JavaScript risquent de charger plusieurs versions de la même image. Mais ce devrait être un cas très rare.

Optimisation

Certains squelettes, notamment squelettes-dist/ fourni avec SPIP, appliquent automatiquement un filtre |image_reduire sur tous les contenus éditoriaux, comme par exemple :

  1. [(#TEXTE|image_reduire{500})]

Dans ce cas le plugin ne pourra pas bien faire son travail, car la taille maximale dont il dispose pour l’image est de 500px. Il est donc préférable de supprimer ces filtres.

Cependant, il est conseillé d’utiliser le filtre |adaptive_images fourni par le plugin, qui permettra la mise en cache des images adaptées (ce qui est plus écologique et permettra à votre site d’être plus rapide) :

  1. [(#TEXTE|adaptive_images{640})]

L’argument fourni est la largeur maximale dans laquelle l’image est affichée tous écrans confondus. Ici on met 640 px comme largeur maximale d’affichage, ce qui veut dire que le plugin sera susceptible d’envoyer une image en 1280px de large pour les écrans Retina (si l’image d’origine est assez grande).

Si vous ne mettez pas d’argument c’est la valeur par défaut qui est utilisée, qui est personnalisable comme indiqué ci-dessous.

Personnalisation

Il est possible de personnaliser un certain nombre de réglages du plugin via la page de configuration du plugin, si les réglages par défauts, aussi génériques que possibles, ne vous conviennent pas.

En pratique il y a très peu de choses à personnaliser : si vous avez besoin d’une largeur maximale supérieure à 640px, le mieux est d’appliquer le filtre |adaptive_images avec la bonne valeur, comme indiqué ci-dessus.
Une fois l’image adaptée à la bonne largeur, elle ne sera plus modifiée ensuite.

Couleur de fond
Si jamais votre site utilise un fond de couleur foncé (noir ou autre), il peut alors être utile de personnaliser cette couleur utilisée quand l’aperçu au format JPG est produit à partir d’une image PNG ou GIF qui utilise la transparence.

Largeur maximale affichée pour les images adaptées
Cette valeur permet de définir la largeur maximale affichée des images. Il faut éventuellement l’adapter à votre site, en fonction de la largeur maximale de la zone de contenu dans les différentes tailles d’écran.

Largeur maximale de la version mobile
Permet de définir la largeur maximale pour laquelle la version mobile —si elle existe— est utilisée. Par défaut c’est 320px : quand l’image est affichée en 320px ou moins de large, on utilise la version recadrée pour les mobiles, sinon la version complète de l’image.

Largeur minimale pour adapter
Permet de définir la largeur minimale des images qui seront adaptées à l’utilisateur. Les images plus petites seront laissées telles quelles et identiques pour tout le monde.

Poids minimal pour adapter
Permet de définir le poids minimal des images qui seront adaptées à l’utilisateur. Les images plus légères seront laissées telles quelles et identiques pour tout le monde, car générer une image adaptée augmenterait le poids total téléchargé.

Breakpoints
Permet de définir les breakpoints pour lesquels on produit des variantes d’image. Indiquez une liste de largeur en px, séparés par une virgule, dans l’ordre croissant. Les valeurs par défaut sont calées sur des multiples de 160px.

Production des images à la demande
Par défaut, le plugin fabrique toutes les variantes d’images au calcul de la page. Si vous avez beaucoup de grosses images dans vos pages, cela peut provoquer des timeout et vous obliger à recharger la page plusieurs fois.

Cette option permet de fabriquer chaque variante d’image adaptée lorsqu’elle est demandée pour la première fois par un utilisateur.
Pour l’utiliser il faut ajouter les lignes suivantes dans votre fichier .htaccess, après la partie qui vérifie l’existence du fichier, c’est-à-dire juste avant la section # URLs "propres", "propres2", "libres", "arbo" :

Largeur minimale pour adapter
Permet de définir la largeur minimale des images qui seront adaptées à l’utilisateur. Les images plus petites seront laissées telles quelles et identiques pour tout le monde.

Compression JPG
Vous pouvez définir la qualité de la compression des images JPG utilisées pour les différents affichages : Image d’aperçu basse qualité, image 1x, image 1.5x, image 2x.

Pour l’image d’aperçu la valeur indiquée est prise comme une valeur de base pour une image d’origine de 450Kpx, et le plugin pourra varier de +/- 50% autour de cette valeur en fonction de la taille de l’image utilisée pour produire l’aperçu (afin de garder un niveau d’information à peu près constant)

Les autres réglages (moins utiles)

Bon, si vous aimez vraiment bidouiller, vous pouvez jouer avec les quelques autres réglages via le fichier mes_options.php.

_ADAPTIVE_IMAGES_NOJS_PNGGIF_PROGRESSIVE_RENDERING permet de conserver ou non le rendu progressif des images PNG et GIF quand JavaScript est désactivé. Si le rendu progressif est conservé sans JavaScript, les images avec transparence pourront être dégradées. Par défaut on ne le conserve donc pas.

  1. define('_ADAPTIVE_IMAGES_NOJS_PNGGIF_PROGRESSIVE_RENDERING',false);

_ADAPTIVE_IMAGES_DOMAIN permet de définir un nom de domaine qui sera utilisé pour les URLs des images adaptatives. Cela peut-être utile si vous voulez placer vos images sur un domaine statique sans cookie par exemple.

  1. define('_ADAPTIVE_IMAGES_DOMAIN','http://example.org/');

Variante d’image pour petits écrans

Le plugin permet également de joindre à chaque image une variante pour mobiles. Pour cela il suffit de modifier l’image dans l’espace privé de SPIP, et de joindre la version recadrée dans le cartouche du bas intitulé Version mobile :

À noter que pour pouvoir fournir une version haute résolution aux écrans de type Retina, il convient de fournir une image dont la largeur minimale est au moins 2x la valeur de _ADAPTIVE_IMAGES_MAX_WIDTH_MOBILE_VERSION. L’interface indique la largeur minimum attendue, ici 640px donc.

Pour que le rendu soit correct dans toutes les conditions, la variante pour petits écrans doit avoir les mêmes proportions que l’image principale. Si la variante que vous ajoutez ne respecte pas ces proportions, un message d’avertissement vous le signalera accompagné d’une suggestion de dimensions :

Si vous voulez spécifier une variante mobile d’une image insérée par votre squelette ou autrement que par le contenu éditorial de SPIP, il suffit de préciser le chemin de l’image dans un attribut data-src-mobile :

Le plugin repèrera automatiquement l’attribut et utilisera cette variante pour les mobiles.

Classes spécifiques au plugin

Le plugin utilise quelques classes dont vous pouvez avoir besoin dans vos feuilles CSS.

Les images adaptées ont une classe adapt-img et sont encapsulées dans un wrapper avec la classe adapt-img-wrapper. Si par exemple vous voulez mettre des coins arrondis sur vos images, il faudra aussi les appliquer sur .adapt-img-wrapper :

  1. img,.adapt-img-wrapper { border-radius:5px; }

Les images fournies à Internet Explorer < 10 ont aussi une classe spécifique adapt-img-ie.

Cas particuliers

Une image plus grande sur la home

Certaines pages peuvent contenir une image plus large que dans le reste du site. Par exemple votre contenu ne dépasse jamais 640px de large, mais sur la page d’accueil du site vous avez une image en 960px de large sur les grands écrans.

Pour traiter ce cas il suffit de lui appliquer le filtre |adaptive_images avec la largeur adaptée. Dans l’exemple ci-dessus ce serait |adaptive_images{960}

Ne pas adapter certaines images

Pour empêcher le plugin d’adapter certaines images que vous voulez conserver intactes, il suffit de leur ajouter une classe no-adapt-img.

Voir en ligne : http://plugins.spip.net/adaptive_images

Notes

[1on parle de device en anglais

Dernière modification de cette page le 8 novembre 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 16 novembre 2016 à 12:50, par formatec En réponse à : Adaptive Images

    Bonjour,
    Ca ne fonctionne pas sur une mutualisation car le chemin vers les images adaptées conduit à un 404

    où et comment peut on modifier le filepath ?

    • Le 8 décembre 2016 à 00:37, par Yohooo En réponse à : Adaptive Images

      Hello formatec,

      tu as trouvé ?

    • Le 8 décembre 2016 à 01:50, par Yohooo En réponse à : Adaptive Images

      Une bidouille qui a l’air de marcher :

      1./ Utiliser la variable _ADAPTIVE_IMAGES_DOMAIN :

      1. define('_ADAPTIVE_IMAGES_DOMAIN','http://mondomaine.fr');

      2./ Dans adaptive_images_options.php, remplacer la ligne 35 pour ajouter :

      1. $ndd = replace(_ADAPTIVE_IMAGES_DOMAIN,'http://','');
      2. $filepath = replace($filepath,'/IMG','/sites/'.$ndd.'/IMG');
      3. $filepath = rtrim(_ADAPTIVE_IMAGES_DOMAIN,"/")."/sites/$ndd/".$filepath;

      Télécharger

    • Le 8 décembre 2016 à 11:38, par formatec En réponse à : Adaptive Images

      A vrai dire, j’avais laissé tomber et remis un |image_reduire au lieu de |adaptive_images
      Ce matin, ta piste m’a donné envie de m’y remettre et ça marche nickel. Un grand merci yohoo !!!

      J’explique un peu plus ta bidouille pour ceux que cela intéresse.

      CONFIGURER LE PLUGIN ADAPTATIVE IMAGE POUR DES SPIPS MUTUALISES

      dans un site normal, le chemin est :
      /local/adapt-img/1000/10x/IMG/jpg/monimage.jpg
      alors que sur un site mutualisé, le chemin vers l’image devient :
      /local/adapt-img/1000/10x/ sites/mondomaine.fr/ IMG/jpg/monimage.jpg
      il va donc falloir bidouiller pour insérer sites/mondomaine.fr/ au coeur de l’url générée par le plugin.

      1/ Modifier le plugin. Penser à recommencer cette modif en cas de mise à jour du plugin
      remplacer la ligne 35 par ces trois lignes :

      1. $ndd = replace(_ADAPTIVE_IMAGES_DOMAIN,'http://','');
      2. $filepath = replace($filepath,'/IMG','/sites/'.$ndd.'/IMG');
      3. $filepath = rtrim(_ADAPTIVE_IMAGES_DOMAIN,"/")."/sites/$ndd/".$filepath;

      Télécharger

      Ces trois lignes créent une variable qui sera le nom de domaine sans le http puis viennent l’insérer dans l’url existante et regénère le bon chemin

      2/ A faire pour chaque domaine mutualisé
      dans votre config, ouvrez ou crééz un fichier mes_options.php
      et insérez la ligne suivante :

      1. define('_ADAPTIVE_IMAGES_DOMAIN','http://mondomaine.fr');

      cela servira au plugin modifié lors de la première étape de retrouver votre nom de domaine et de réécrire correctement vos url.

      Une fois fait, votre plugin fonctionnera normalement et la doc de cette page reste valable.

    • Le 8 décembre 2016 à 12:12, par Cerdic En réponse à : Adaptive Images

      il me semble que le chemin vers les images adaptées devrait être

      sites/mondomaine.fr/local/adapt-img/1000/10x/IMG/jpg/monimage.jpg

      et pas

      local/adapt-img/1000/10x/sites/mondomaine.fr/IMG/jpg/monimage.jpg

      car je crois que chaque site mutalisé a bien son dossier sites/xxx/local/
      cette histoire de mutualisation me semble définitivement bancale, tout ça est hors garantie du constructeur s’entends ^^

    • Le 8 décembre 2016 à 13:42, par Yohooo En réponse à : Adaptive Images

      Hello,

      1./ Tout d’abord, un préalable :
      Attention, il s’agit bien d’une bidouille. Il faudrait que je me penche d’avantage sur le sujet pour, au moins, surcharger la fonction dans le squelette plutôt que de modifier le plugin à volo.

      2./ Ensuite, pour répondre à Cerdic :
      Sur un site mutualisé, le plugin crée des fichiers images dans des adresses de type :

      sites/mondomaine.fr/adapt-img/1000/10x/sites/mondomaine.fr/IMG/jpg/monimage.jpg

      La variable « sites/ » + nom de domaine apparaît donc 2 fois dans le chemin, sûrement pour différencier les cas de figure au cas où plusieurs site utiliseraient le même fond d’images.

      3./ Enfin, une petite modif concernant une situation non envisagée dans mon premier post :
      Dans certains cas de figure, les images ne sont pas situés dans ’/IMG’, mais dans ’/local/cache-gd2’. Pour que la bidouille fonctionne, il faut donc répondre à ce cas de figure. Le code à rajouter devient donc :

      1. $ndd = replace(_ADAPTIVE_IMAGES_DOMAIN,'http://','');
      2. $filepath = replace($filepath,'/IMG','/sites/'.$ndd.'/IMG');
      3. $filepath = replace($filepath,'/local/cache-gd2','/sites/'.$ndd.'/local/cache-gd2');
      4. $filepath = rtrim(_ADAPTIVE_IMAGES_DOMAIN,"/")."/sites/$ndd/".$filepath;

      Télécharger

    • Le 16 février à 17:45, par Yohooo En réponse à : Adaptive Images

      Hello,

      J’avance dans mon système de bidouillage spécial sites mutualisés :

      Il faut mettre une condition au code délivré ci-dessus car l’adaptive image peut aussi être appliqué à un élément d’ergonomie d’un squelette (amené par la balise #CHEMIN par exemple). Dans ce cas, il ne faut pas modifier le chemin de l’image :

      1. if (match($filepath,'/IMG') || match($filepath,'/cache-gd2') ) {
      2. $ndd = replace(_ADAPTIVE_IMAGES_DOMAIN,'http://','');
      3. $filepath = replace($filepath,'/IMG','/sites/'.$ndd.'/IMG');
      4. $filepath = replace($filepath,'/local/cache-gd2','/sites/'.$ndd.'/local/cache-gd2');
      5. $filepath = rtrim(_ADAPTIVE_IMAGES_DOMAIN,"/")."/sites/$ndd/".$filepath;
      6. }

      Télécharger

    Répondre à ce message

  • Le 2 février à 20:20, par Fennec72 En réponse à : Adaptive Images

    Bonsoir,

    Pour les fichiers du portfolio de l’article la boucle ci-dessous m’affiche « IMG/jpg/nom_du_fichier.jpg » au lieu de l’image correspondante.

    [

    (#FICHIER|adaptive_images655)

    ]

    Une idée de ce qui cloche dans ma boucle ?

    Merci d’avance

    • Le 2 février à 21:15, par Fennec72 En réponse à : Adaptive Images

      Je suis allé un peu vite et j’ai oublié de saisir la boucle entre des balises <code>

      Pour les fichiers du portfolio de l’article la boucle ci-dessous m’affiche « IMG/jpg/nom_du_fichier.jpg » au lieu de l’image correspondante.

      <BOUCLE_diaporama(DOCUMENTS){id_article=3}{extension==jpg|png|gif}{mode=document}{doublons}>

      [<div>(#FICHIER|adaptive_images{655})</div>]

      </BOUCLE_diaporama>

      Une idée de ce qui cloche dans ma boucle ?

      Merci d’avance

    • Le 2 février à 21:27, par Fennec72 En réponse à : Adaptive Images

      une précision :
      la boucle fonctionne bien avec
      [<div>(#FICHIER|image_reduire{655,*})</div>]
      mais pas avec
      [<div>(#FICHIER|adaptive_images{655,*})</div>]

    • Le 3 février à 09:00, par Cerdic En réponse à : Adaptive Images

      Bonjour,
      #FICHIER n’est pas une image mais un nom de fichier. Les filtres image_xx savent prendre un nom de fichier en entrée et le transformer en image avant de la transformer si besoin, mais le filtre adaptive_images ne fait pas ça.

      Il faut écrire :
      [<div>(#FICHIER|balise_img|adaptive_images{655})</div>]

      Attention le filtre adaptive_images ne prend qu’une seule dimension (la largeur) en argument, et pas 2.

    Répondre à ce message

  • Le 13 octobre 2016 à 11:12, par baloo En réponse à : Adaptive Images

    bonjour,
    J’ai récupéré un site en local pour tester de nouvelles fonctionnalités.

    en local, windows10, si j’ai une image de taille 373473 ou plus ( 3872*2592) - Les rédacteurs ne respectent pas toujours les consignes ..)
    j’obtiens un erreur
    fatal error : Allowed memory size of 134217728 bytes exhausted (tried to allocate 35987329 bytes) in D :\saint jean 2015\EasyPHP-5.3.8.0\www\sete\plugins-dist\filtres_images\filtres\images_transforme.php on line 401

    y a-t-il une limitation dans le plugin ? est-ce que c’est parce que je suis en local ?

    • Le 13 octobre 2016 à 11:16, par Maïeul En réponse à : Adaptive Images

      la limite se trouve au niveau de PHP, pas du plugin.

      Si c’est du local, tu peux regler ton PHP.ini pour mettre plus de memoire… mais après en ligne…

    Répondre à ce message

  • Le 2 juillet 2016 à 15:39, par RastaPopoulos En réponse à : Adaptive Images

    J’ai un bug depuis quelque temps avec |adaptive_images : quand je l’utilise SANS indiquer de taille, ya du JS qui ne se charge plus (« adaptImgFix is not defined » dans la console JS) et on se retrouve avec la méga basse qualité pixel partout, sans que ce soit remplacé par la haute qualité de la bonne taille.

    Dès que je fais |adaptive_images1600 ça remarche, ou n’importe quelle taille hein |adaptive_images640 etc. C’est quand c’est tout seul |adaptive_images sans rien.

    Et ya bien une taille max et des breakpoints configurés dans l’admin.

    Si je peux donner d’autres infos…

    Répondre à ce message

  • Le 5 janvier 2016 à 23:33, par bob En réponse à : Adaptive Images

    Une urgence !

    Bonsoir,

    j’ai besoin d’utiliser le plugin dans un background, mais il ne semble pas fonctionner.

    En l’état voici le code
    <BOUCLE_Z(DOCUMENTS){id_rubrique=6}{mode=image}{par hasard}{0,1}><section style="background: url('[(#FICHIER|adaptive_images{1920})]')" class="topite"></BOUCLE_Z>

    Une idée ??

    Répondre à ce message

  • Le 17 février 2016 à 23:20, par DD En réponse à : Adaptive Images

    Bonjour,

    J’utilise le plugin Massicot (dernière version) avec SPIP 3.1.
    Pour une bannière pleine largeur [(#LOGO_ARTICLE_RUBRIQUE|adaptive_images{2000})]
    l’image traitée par adaptive n’est pas la version recadrée.

    Alors que dans une liste d’article [(#LOGO_ARTICLE|image_reduire{200,0})] l’image est bien recadrée.

    Il y a une incompatibilité entre Massicot et Adaptive images ou bien je dois adapter mon filtre ?

    dd

    • Le 17 février 2016 à 23:49, par DD En réponse à : Adaptive Images

      J’ai trouvé : c’est LOGO_ARTICLE_RUBRIQUE qui ne lui plaît pas.

    Répondre à ce message

  • Le 2 juin 2015 à 16:34, par Renée Picard En réponse à : Adaptive Images

    Les images sur un petit écran ont une opacitée si faible que je ne les voit à peine. Que faire ?

    • Le 4 juin 2015 à 18:29, par Fred En réponse à : Adaptive Images

      Idem pour moi.

      Est-ce qu’il est possible d’appliquer le filtre adaptative_images après un filtre de recadrage et/ou de redimensionnement ?

      Est-il possible de fixer une hauteur spécifique dans des blocs précis car seule la largeur est définie ?

    • Le 28 janvier 2016 à 11:32, par Seb En réponse à : Adaptive Images

      Je serai intéressé aussi par une réponse sur la contrainte de hauteur et sur les filtres préalables.

      Merci

    Répondre à ce message

  • Le 7 décembre 2015 à 19:43, par Sandrine En réponse à : Adaptive Images

    Bonjour,

    J’utilise le plugin sur plusieurs de mes sites.
    J’ai configuré mes squelettes pour insérer automatiquement un alt via le filtre |inserer_attributalt,#TITRE

    Je me rends compte que sur l’espace public le alt est effectivement renseigné pour mes images est effectivement renseigné dans la partie commentée « [if IE]>... », mais est vide pour la balise img non commentée...
    Est-ce une erreur de manip de ma part ?

    Merci d’avance
    Sandrine

    • Le 15 décembre 2015 à 16:53, par Cerdic En réponse à : Adaptive Images

      Il faut appliquer le filtre |inserer_attribut{alt,#TITRE} avant le filtre |adaptive_images car ce dernier génère plein de code à partir de la balise <img />

    Répondre à ce message

  • Le 4 septembre 2015 à 15:53, par joz En réponse à : Adaptive Images

    Salut,
    merci pour ce plugin !

    J’ai un problème avec les images en float, comme

    1. <imgXX|right>

    Le float rend l’image invisible :(
    Est-ce qu’il y a moyen d’utiliser le plugin uniquement sur les images centrés ?
    Ou est-ce que mon problème viens d’ailleurs ? A part moi personne ne rencontre ce problème ?

    merci d’avance pour vos lumières
    joz

    • Le 4 septembre 2015 à 16:28, par joz En réponse à : Adaptive Images

      j’imagine que ce n’est pas idéale, mais pour l’instant j’ai mis ceci comme work-around :

      .spip_documents_right,
      .spip_documents_left{
              max-width: 100%;
      }
      @media (min-width: 768px) {
              .spip_documents_right,
              .spip_documents_left{
                      max-width: 50%;
              }
      }

    Répondre à ce message

  • Le 16 août 2015 à 23:19, par jeromeD En réponse à : Adaptive Images

    Bonjour,

    J’ai tenté pour la première fois d’installer ce plugin pour l’utiliser. Je suis actuellement en local donc je ne peux pas donner d’URL.

    Cependant, voilà mon soucis. J’ai des images qui font entre 400 et 650px de large et je souhaite qu’elles soient adaptables sur une résolution < à320px (smartphone)
    Mais cela ne semble pas fonctionner.

    Avec firebug, je vois bien ce code là :

    1. <span class="spip_document_49 spip_documents spip_documents_right" style="float:right; width:560px;">
    2. <span class="adapt-img-wrapper c1858570588 jpg">
    3. <img class="adapt-img " width="560" height="273" onmousedown="adaptImgFix(this)" alt="" src="http://127.0.0.1/genevoislaser/local/adapt-img/320/10x/IMG/jpg/testa.jpg?1439745448">
    4. </span>
    5. </span>

    Télécharger

    mais finalement on a l’impression que l’image adaptée par le plugin en 320px est redimensionnée dans sa taille d’origine ?

    Est-qu’il y a une configuration que je n’ai pas comprise ?

    Merci d’avance pour vos conseils
    Jérôme

    • Le 17 août 2015 à 10:39, par Cerdic En réponse à : Adaptive Images

      Bonjour, avec des images qui ne dépassent pas 650px cela ne sert à rien d’utiliser le plugin, comme expliqué en détail dans l’article de référence sur la méthode html utilisée. Je viens d’ajouter un avertissement clair à ce sujet.

    • Le 17 août 2015 à 10:45, par jeromeD En réponse à : Adaptive Images

      Bonjour et merci pour ta réponse.

      Alors j’ai juste une question...avec des images au dessus de 320px, les utilisateurs ne voit pas l’image en entier sur un smartphone, non ?

      ou plutôt si il la voit mais cela affiche le site en fonction de l’image.

      Y-a-t-il une solution simple pour qu’une image de plus de 320, soit redimensionnée en 320 si l’utilisateur est sur smartphone ?

      j’ai bien un max-width:100% mais il n’a pas l’air de s’appliquer

      Merci pour ton éclairage

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Accès Restreint Partiel

    8 septembre 2014 – 20 commentaires

    Voulez-vous masquer une partie du contenu de vos articles aux visiteurs de passage ? et réserver la totalité à certains de vos membres ? Voulez-vous remplacer le contenu occulté par un appel à l’action (pour devenir Membre, bla bla bla...) ? Le (...)

  • Site multilingue facile

    3 mai 2012 – 97 commentaires

    Site multilingue facile permet de mettre en place facilement un site multilingue avec une langue par secteur. Introduction Même si le multilinguisme est nativement intégré dans spip, réaliser un site multilingue n’est pas toujours évident. Ce (...)

  • Nivo Slider

    2 mars 2011 – 452 commentaires

    Nivo Slider pour SPIP permet d’intégrer des diaporamas en JQuery dans vos articles et squelettes.

  • Ferme à SPIP

    3 janvier 2008 – 130 commentaires

    Un petit article synthétique qui explique en quelques mots et captures d’écrans comment faire une « ferme à SPIP » avec le plugin "Mutualisation" à partir d’un nom de domaine principal.

  • Module de paiement Paypal Express Checkout

    12 juin 2015 – commentaires

    Ce mode de paiement par Paypal Express Checkout est sécurisé et peut-être utilisé en toute confiance. Il permet également, dans le cadre de certaines boutiques, d’optimiser le workflow de paiement en sautant l’étape de création de compte et en (...)

Ça spipe par là