Discussion :

[flamant]

Bonjour,
j'utilise la techno amp (Accelerated Mobile Pages Project) pour mon projet
Ma question est relative au tag amp-img pour les images. D'après la documentation suivante (https://github.com/ampproject/amphtm...html-layout.md) on peut utiliser l'attribut layout=‘responsive’ pour des considération responsive ainsi que les attributs srcset,media,sizes toujours pour les mêmes considérations.

Toujours dans ce contexte, la documentation dit que l'image occupera l'espace de son élément containeur.

Je ne comprend pas cette logique. Si on est obligé de donner les dimensions (width et height) de l'élément parent pour que l'image ait le même espace, c'est vraiment lourd à gérer.

Merci d'avance pour vos réponses

[NoSmoking]

Bonjour,
je viens de parcourir rapidement et il y a ceci

Example: A simple responsive image, where width and height are used to determine the aspect ratio.

[flamant]

Bonjour NoSmoking, et merci pour ta réponse

effectivement le width et height servent à conserver le rapport (ou les proportions) width/height, mais néanmoins l'image occupe la taille de son élément parent pour la largeur (d'après ce que j'ai compris). J'ai fait un tests et c'est comme ça que ca se passe. Je trouve ce dernier point lourd à gérer

[NoSmoking]

Je trouve ce dernier point lourd à gérer

je ne vois pas en quoi, tu veux un affichage de 2 images sur la même ligne de ta page tu mets des conteneurs à 50% et le tour est joué non !?!

[flamant]

Salut, peut être que je n'ai pas bien compris mais voilà ce qui se passe sur un cas concret

quand je met ce code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="info-block"   >
    <amp-img  width="16" height="16" alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}" layout="responsive" style="vertical-align:middle"/></amp-img>                   
</div>
<span >text to comment</span>

l'image n'apparait pas et la dimension de l'élément amp-img est 0*0

Par contre lorsque je met ce code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="info-block"  style="width:16px; height:16px" >
    <amp-img  width="16" height="16" alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}" layout="responsive" style="vertical-align:middle"/></amp-img>                   
</div>
<span >text to comment</span>

l'image apparait. C'est pourquoi je dis que c'est lourd à gérer mais peut-être qu'il y a autre chose que je ne vois pas

PS: ma classe info-block est la suivante

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.info-block {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 1.5em;
    display: inline-block;
}

Merci d'avance

[NoSmoking]

Ton soucis vient de display: inline-block;, un élément ainsi défini se dimensionne en fonction des éléments qu'il contient MAIS à condition que ceux-ci soit dans le flux, donc hors éléments en float: xxxxx ou en position:absolute, ce qui a toute son importance.

Le principe de fonctionnement de AMP est justement lié à cela, il crée des éléments neutres et hors flux pour pouvoir afficher ton image au mieux, le conteneur en absence de dimension, width dans le cas présent n'a pas de « surface ».

Si l'on prend le code suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="w-50">    
  <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="AMP"></amp-img>
</div>

voilà à quoi ressemble le code HTML généré par le plugin

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="w-50">    
  <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="AMP" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout">
    <i-amphtml-sizer style="display: block; padding-top: 56.4815%;"></i-amphtml-sizer>
    <img decoding="async" alt="AMP" class="i-amphtml-fill-content i-amphtml-replaced-content" src="/img/amp.jpg">
  </amp-img>
</div>

l'image au final hérite de ce style

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.i-amphtml-layout-size-defined .i-amphtml-fill-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

[flamant]

Merci NoSmoking de tes explication, c'est très clair

Seulement lorsque j'enlève le display="inline-block" mon image 16*16 prend presque la totalité de la largeur de l'écran. Il y a quelque chose qui m'échappe

D'autre part pourrais tu me donner un/des liens qui explique les dimensions que prennent un élément dans une page ?

Merci d'avance

PS: j'en profite pour te demander un renseignement, est-ce que le sélecteur a::after fait partie de l'élément de tag a ou est-ce un nouvel élément. Ce que j'essaye de faire fera partie d'une nouvelle discussion

[NoSmoking]

D'autre part pourrais tu me donner un/des liens qui explique les dimensions que prennent un élément dans une page ?

• Liste des éléments en ligne
• Liste des éléments de bloc

[flamant]

Bonsoir NoSmoking,

j'ai lu les liens que tu m'a donné. Pour résumer les éléments en bloc prennent la largeur de leurs conteneurs et les éléments en ligne sont ceux qui occupent l'espace délimités par leurs balises.

Le principe de fonctionnement de AMP est justement lié à cela, il crée des éléments neutres et hors flux pour pouvoir afficher ton image au mieux

Je ne comprend pas très bien. Si AMP crée des éléments hors flux pour afficher une image au mieux, alors comment l'afficher dans mon cas sur mon écran large avec une largeur de 16px (et donc une hauteur de 16px). J'ai essayé les choses suivantes

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="display: value;" >
          <amp-img  width="16" height="16" alt="{% t phoneicon %}" src="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }}" layout="responsive" style="vertical-align:middle"/></amp-img>                   
 
</div>

avec toutes les valeurs que peuvent prendre la propriété display (inline, block (valeur par défaut pour la div), inline-block, flex, inline-flex, je n'ai pas essayé les autres). Et la page s'affiche soit avec une image de dimension 0*0, donc sans image, soit avec la largeur de tout l'écran. Dans le premier cas (value=block (ou rien car par défaut) ou flex ou inline-flex par exemple) , c'est du au fait comme tu l'a souligné au fait que le conteneur div n'a pas de surface. Dans le second cas (value=inline-block ou inline par exemple)la div prend la largeur de tout l'écran et l'image prend donc la largeur de tout l'écran.

J'ai donc essayé autre chose en partant de l'hypothèse qu'il fallait rajouter les attribut srcset et sizes

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 <div >
     <amp-img  width="16" height="16" alt="{% t phoneicon %}" sizes="100vw" srcset="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }} 16w" layout="responsive" style="vertical-align:middle"/></amp-img>                   
 
</div>

mais ça ne marche pas, l'image prend la largeur de tout l'écran.
Je ne vois pas d'autre solution que de donner une width au container div et si c'est le cas, je trouve cela très lourd à gérer.

Peux-tu me dire si il y a une autre solution et laquelle s'il te plait ?

[Invité]

Bonjour,

sans vouloir te vexer, je pense que :

• tu n'as rien compris de l'utilisation et de l'intérêt de <amp-img...>
• quand on te donne des liens à lire, LIS BIEN ATTENTIVEMENT ! Ne te contente pas de "parcourir rapidement", au risque de comprendre de travers

RELIS aussi l'explication de NoSmoking, et le CODE qu'il te montre :

• les dimensions doivent être données dans la balise <amp-img...> (qui EST le "conteneur" !)
• c'est la balise <img .../> générée qui est en position:absolute; PAR RAPPORT à la balise <amp-img...> !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<amp-img  width="16" height="16" alt="{% t phoneicon %}" src="{{'.....Phone_number-16px-16px.png' | ..... }}" layout="responsive" ....../></amp-img>

Explique-nous :

• l'intérêt de amp-img dans ce cas précis : une icône de 16 x 16px !
• l'intérêt de layout="responsive", alors que l'icône fera TOUJOURS 16 x 16px !!

Cette techno est essentiellement adaptée pour de grandes images, dont l'affichage a EFFECTIVEMENT besoin d'être optimisé en fonction du media (temps de chargement,...).
(du moins, c'est ce que j'ai cru comprendre... Sinon, je n'en vois pas l'intérêt )
Pas pour des icônes de 16 x 16px...

Commence déjà par :

• écrire et maitriser le code HTML(5) "classique" (connais-tu la balise <img .../> ? )
• apprendre les subtilités du CSS (ne serait-ce que la différence entre "block", "inline", "inline-block" !)
• comprendre ce que "responsive" veut dire, comment et pourquoi l'appliquer,... (voir aussi les media queries,...)
• ...

Bref :

Ce ne sont pas les outils qui font le bon ouvrier.

[NoSmoking]

Je rajouterais que je ne suis même pas persuadé que l'utilisation de ce plugin se justifie de nos jours (excepté pour IE11 et -), il existe les attributs srcset et size pour les images.

[flamant]

Bonjour jreaux62 ,

je me présente d'abord. Je suis développeur Java/J2ee et mes compétences sont surtout tout ce qui concerne la programmation dynamique du coté front-end (angularjs par exemple) et la programmation du coté serveur. Je n'ai que des connaissances basiques en html/css. Aujourd'hui je fais en plus de mon emploi un site web gratuitement pour une amie. Ce site est statique et j'utilise Jekyll. C'est en faisant ce site que je me rend compte que le métier de web-designer demande de vrais compétences en html/css et donc je débute.

Je suis désolé de t'avoir agacé avec mes questions, mais je pense qu'avant de juger, tu pourrais me laisser avancer mes arguments.

- tu n'as rien compris de l'utilisation et de l'intérêt de <amp-img...>
Explique-nous :

l'intérêt de amp-img dans ce cas précis : une icône de 16 x 16px !
l'intérêt de layout="responsive", alors que l'icône fera TOUJOURS 16 x 16px !!
Cette techno est essentiellement adaptée pour de grandes images, dont l'affichage a EFFECTIVEMENT besoin d'être optimisé en fonction du media (temps de chargement,...).
(du moins, c'est ce que j'ai cru comprendre... Sinon, je n'en vois pas l'intérêt )
Pas pour des icônes de 16 x 16px...

j'avais très bien compris que amp est utilisé pour des images de grande taille. Seulement voilà je fais mes tests pour cette icône qui est ma première image sur mon projet. C'est uniquement UN CAS DE TEST

- les dimensions doivent être données dans la balise <amp-img...> (qui EST le "conteneur" !)
- c'est la balise <img .../> générée qui est en position:absolute; PAR RAPPORT à la balise <amp-img...> !

D'après la documentation (https://www.ampproject.org/docs/guid...control_layout) il est dit

This amp-img element automatically fits the width of its container element, and its height is automatically set to the aspect ratio determined by the given width and height

C'est ce que je ne comprend pas. Dans mon exemple, j'écris le code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div   >
     <amp-img  width="16" height="16" alt="{% t phoneicon %}" sizes="100vw" srcset="{{'assets/images/icons/Phone_number-16px-16px.png' | absolute_url }} 16w" layout="responsive" style="vertical-align:middle"/></amp-img>                   
</div>

D'après toujours la même documentation l'élément <amp-img> prend la largeur de son container (bien qu'il y ait des dimensions précises qui soient spécifiées (16*16)), donc toute la largeur de l'écran.

- les dimensions doivent être données dans la balise <amp-img...> (qui EST le "conteneur" !)
- c'est la balise <img .../> générée qui est en position:absolute; PAR RAPPORT à la balise <amp-img...> !

Les dimensions de la balise <amp-img...> sont fixées à 16*16 et elle prend pourtant toute la largeur de l'écran. (ou alors je ne la construit pas correctement)

Commence déjà par :

écrire et maitriser le code HTML(5) "classique" (connais-tu la balise <img .../> ? )
apprendre les subtilités du CSS (ne serait-ce que la différence entre "block", "inline", "inline-block" !)
comprendre ce que "responsive" veut dire, comment et pourquoi l'appliquer,... (voir aussi les media queries,...)

Je compte bien bien progresser en html/css mais ça ne se fait pas du jour au lendemain. Sinon pour le site que je fais je suis pressé par le temps et c'est pourquoi je fais appel à votre aide quand il y a vraiment quelque chose que je n'arrive pas à faire (après avoir essayé plusieurs options et m'être renseigné sur les balises et propriétés csss que je ne connais pas). J'ai lu les liens de NoSmoking et pense avoir compris l'essentiel. Je faisais juste des tests exhaustifs (pour épuiser toutes les possibilités au cas où je n'aurais pas compris) pour la propriété display


Pour conclure d'après ce que j'ai cité

This amp-img element automatically fits the width of its container element, and its height is automatically set to the aspect ratio determined by the given width and height

il y a quelque chose qui m'échappe vraiment
1) Soit cela fait référence au conteneur <div> dans mon exemple cité plus haut (et c'est ce que la documentation semble dire) et ce conteneur prend toute la largeur de l'écran
2) Soit comme NoSmoking le dit le conteneur est la balise <amp-img> et dans ce cas elle prend aussi toute la largeur de l'écran. Je ne vois qu'une seule explication : je construit mal cette balise <amp-img>

Si cela ne te prend pas trop de temps, aurais-tu l'amabilité de me dire quelle est la solution. Merci d'avance

[Invité]

Bonsoir,

Non, je ne suis pas énervé ni agacé
J'aboie parfois, mais je mords rarement.

La solution est simple : faire simple !

Oublie ce plug-in inutile.
Écrit une simple balise <img>, aux dimensions voulues (le width suffit ici).
Point barre.

Pour l'aspect "responsive", la largeur peut être exprimée en % (% de son conteneur).

• HTML5 : le guide du débutant
• 101 balises HTML5 + exemples
• cours et tutoriels pour apprendre le CSS
• Utilisation de boîtes flexibles de CSS

• Ajouter des images responsive à une page web

[NoSmoking]

2) Soit comme NoSmoking le dit le conteneur est la balise <amp-img> et dans ce cas elle prend aussi toute la largeur de l'écran.

je n'ai rien dit de tel, la balise <amp-img> est uniquement porteuse des informations nécessaires à l'affichage via le plugin, c'est TON conteneur qui détermine la largeur finale d'affichage.