responsiveImage : Images réactives - Blogger XML Documentation

Extrait de la documentation personnelle de
Blogger - responsiveImage [Common]
Description de l'inclusion
responsiveImage est le nom d'une inclusion commune qui génère des images réactives.
Une image réactive est une image qui s'adapte automatiquement à la taille du container.
Il s'agit également d'une solution qui permet de limiter le chargement de ressources inutiles en fonction du matériel du visiteur.
En 2016, l’ingénierie Blogger a travaillé sur plusieurs concepts allant dans ce sens. Entre autres, les images réactives, ou encore, les arrière plans réactifs.
Directives d'usage et niveau de priorité de mise à jour
Thème Version 1
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 2
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Dynamique
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 3
Garantie d'usage : Oui
Priorité haute
Variante par thème
Des variantes existent.
Inclusion de gadget équivalente
Aucune.

Contenu de l'inclusion

Le code XML

<b:includable id='responsiveImage'>
  <img expr:src='data:image'>

    <b:class expr:name='data:imageClass'/>

    <b:attr expr:value='data:altText ?: data:messages.image' name='alt'/>

    <b:attr cond='data:enhancedSourceset.isYoutube' expr:value='resizeImage(data:enhancedSourceset, 1152, "1152:864")' name='data-ess'/>

    <b:attr expr:value='data:originalWidth' name='data-original-width'/>

    <b:attr expr:value='data:originalHeight' name='data-original-height'/>

    <b:attr expr:value='data:image.isResizable ? data:sourceSizes : ""' name='sizes'/>

    <b:attr expr:value='sourceSet(data:image, (data:imageSizes ?: [120,240,480,640,800]), data:imageRatio)' name='srcset'/>

  </img>
</b:includable>

Les nœuds parents

Appel de l'inclusion et paramètres

<b:include name='responsiveImage'/>

Présenté tel quel, l'appel ne travaillera pas, puisque le contenu requiert un objet de données qui doit être ajouté dans un attribut data.

<b:include data='{ ITEMS }' name='responsiveImage'/>

L'objet doit contenir ces items:

Exemple
<b:include cond='data:view.featuredImage'
           data='{ image: data:view.featuredImage, imageSizes: [240,480,960,1600], imageRatio: "16:9" }'
           name='responsiveImage'/>

Modifier l'inclusion

L'inclusion peut être modifiée dans un marquage commun.

En savoir plus

<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='responsiveImage'>

      <!-- Add new code for "responsiveImage" inclusion here -->

    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Lorsque l'inclusion est marquée explicitement dans le thème, la version "BackEnd" n'est plus prioritaire.

Dans ce cas-ci, pour appeler l'inclusion "BackEnd", vous devez mentionner le préfixe super à l'identifiant de l'inclusion.

En savoir plus

  <!-- Call Custom version -->
  <b:include name='responsiveImage'/>

  <!-- Call BackEnd version -->
  <b:include name='super.responsiveImage'/>

Disponibilité des variantes de l'inclusion

Thèmes FrontEnd BackEnd
Original Inexistant Original
Contempo Inexistant Original
Emporio Inexistant Original
Essential Inexistant Original
Notable Inexistant Original
Soho Theme Original+
Afficher les variantes
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant

Source & contribution

Google PE Program
Équipe Blogger/Experts Produit Blogger

Classifications, corrélations & échantillonnages

Soraya Lambrechts

Dernière mise à jour

Licence

Ce contenu est protégé par la licence CC BY-NC-ND 4.0

🛈 Info

Il arrive fréquemment que nos contenus soient reproduits sans autorisation. Si vous avez trouvé cette fiche ailleurs, nous vous recommandons vivement de consulter Blogger Code PE pour bénéficier de la version originale, à jour et vérifiée.

Spotlight

La balise TITLE sur Blogger

Image
Histoire, bonnes pratiques, optimisation SEO et conseils avancés ! Découvrez dans ce dossier complet comment maîtriser parfaitement la balise <title> sur votre blog Blogger : de ses origines historiques à son rôle crucial en référencement naturel (SEO), en passant par les bonnes pratiques actuelles. Apprenez à rédiger des titres efficaces, attractifs, optimisés pour Google et l'expérience utilisateur, tout en évitant les erreurs fréquentes. Un guide incontournable pour améliorer votre visibilité et propulser votre blog Blogger au sommet des résultats de recherche !
En savoir plus ➤

Populaires cette semaine

Ajouter des boutons à la barre de partage Blogger

Image
Customiser la barre de partage Blogger en choisissant les services que vous souhaitez proposer à vos lecteurs.
Taille des boutons, thèmes de couleurs, restrictions d'affichage, etc.
Boutons Facebook, Twitter, Envoi par mail, Orkut, StumbleUpon, LinkedIn, BlogThis, Google+ Share, HelloCoton, Pinterest et Google +1.
Tous les boutons partagent l'adresse canonique de l'article.
etc, etc, etc...
En savoir plus ➤