data:widgets[i].posts[i].featuredImage
- Blogger Data Documentation
![Blogger - data:widgets[i].posts[i].featuredImage](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxEVhSltbbsTrf8ajFdpvPCAlkBrmpzcxJIfRpdpsj5qcEftTi75GEPoWrGW5CPrnQWQF66YQPJU7dXLU6GUXcDu312-sD1CL9dXnuDEyxO2u1_xzeoaszIFuL7i7jDpJCPDAkvZaGCY4C/s600-rw/widgets-posts-featuredImage.jpg)
- Description de la donnée
data:widgets[i].posts[i].featuredImage
est une donnée universelle Blogger contenant l'URL de l'image de l'article ou de la vignette de la vidéo YouTube disponible dans l'article/page de la page courante.- Intégration dans le code XML
- Dans les nœuds enfants de la balise
<html>
, excepté à l'intérieur des marqueurs<![CDATA[ ]]>
. - Directives d'usage et niveau de priorité de mise à jour
-
Thème Version 1Garantie d'usage : InexistantAucune prioritéThème Version 2Garantie d'usage : InexistantAucune prioritéThème DynamiqueGarantie d'usage : InexistantAucune prioritéThème Version 3Garantie d'usage : OuiPriorité haute
- Disponibilité par défaut par type de pages
- Toutes les pages, sauf les pages 404.
- Disponibilité par type de gadgets
- Gadget Blog.
- Recadrage de l'image
- Image : Taille définie dans l'éditeur d'article.
- Vignette Vidéo : 480x360
- Set de réglages XML
- Disponible.
- Condition additionnelle
- L'article doit contenir une image ou une vidéo.
- Donnée de gadgets apparentée
posts[i].featuredImage
- Données universelles similaires
blog.postImageThumbnailUrl
blog.postImageUrl
view.featuredImage
- Données de gadgets similaires
posts[i].firstImageUrl
posts[i].thumbnailUrl
Table des matières
Ressources
Échantillonnage des ressources
widgets:
posts:
featuredImage: image,
isResizable: boolean,
isYoutube: boolean,
youtubeMaxResDefaultUrl: image,
width: number,
height: number,
size: number,
length: number,
escaped: string,
jsEscaped: string,
jsonEscaped: string,
cssEscaped: string
Implémentation de la donnée
La donnée étant emboîtée dans plusieurs tableaux, le choix de la méthode d'implémentation dépendra du résultat que vous voulez obtenir.
Pour réduire le temps de réponse, limitez le nombre de boucles et privilégiez l'usage de filtres :
- Filtres par type de gadget
- Filtres premier et dernier set d'un tableau
- Les opérateurs de tableaux
- Les opérateurs Lambdas
Méthode d’Aliasing de l’Array
<b:loop values='data:widgets.Blog.first.posts' var='post'>
<!-- Tag -->
<data:post.featuredImage/>
<!-- Attribute value -->
<b:eval expr='data:post.featuredImage'/>
</b:loop>
L’Alias Array Method est utilisée pour parcourir un tableau (Array
) en stockant temporairement chaque élément dans une variable avec <b:loop>
. Cette approche est indispensable, car il est impossible d’accéder directement aux indices d’un tableau sans une boucle.
Indice de l'item
<b:loop values='data:widgets.Blog.first.posts' var='post' index='i'>
<!-- Index (number) -->
<data:i/>
<!-- Index [i] -->
<b:eval expr='data:widgets.Blog.first.posts[i].featuredImage'/>
<!-- Index [i+1] -->
<b:with value='data:i + 1' var='next'>
<b:eval expr='data:widgets.Blog.first.posts[next].featuredImage'/>
</b:with>
<!-- Index [i-1] -->
<b:if cond='data:i gt 0'>
<b:with value='data:i - 1' var='prev'>
<b:eval expr='data:widgets.Blog.first.posts[prev].featuredImage'/>
</b:with>
</b:if>
</b:loop>
L'indice est un nombre entier positif (0 compris) qui représente la position de l'élément dans un tableau. Il peut être intègré directement dans la donnée de cette manière : data:array[index].item
. Quant à la donnée, elle doit obligatoirement être dans un attribut d'expression.
Dans notre exemple, nous utilisons l'indice pour retrouver l'élément courant [i]
, l'élément suivant [i+1]
et l'élément précédant [i-1]
.
Premier et dernier item
<!-- First -->
<b:eval expr='data:widgets.Blog.first.posts.first.featuredImage'/>
<!-- Last -->
<b:eval expr='data:widgets.Blog.first.posts.last.featuredImage'/>
first
et last
sont des filtres qui permettent d'obtenir respectivement le premier et dernier élément d'un tableau sans avoir à recourir à l'usage d'une boucle.
Mappage
<b:loop values='data:widgets.Blog.first.posts map (post => post.featuredImage)' var='featuredImage'>
<!-- Tag -->
<data:featuredImage/>
<!-- Attribute value -->
<b:eval expr='data:featuredImage'/>
</b:loop>
Le mappage est une opération qui consiste à regrouper des items d'un ensemble dans un nouvel ensemble.
Dans ce cas-ci, nous utilisons l'opérateur lambda map
.
Réglages de la donnée
Les réglages sont des items contenus dans l'objet de la donnée qui renvoient une nouvelle valeur. Ils s'ajoutent à la suite de la donnée.
Introduction aux réglages des données
Les réglages autorisés pour cette donnée sont :
L'image est redimensionnable ?
<b:loop values='data:widgets.Blog.first.posts' var='post'>
<!-- IS RESIZABLE ? -->
<b:if cond='data:post.featuredImage.isResizable'>
<img expr:src='resizeImage(data:post.featuredImage,500,"1:1")'/>
</b:if>
</b:loop>
En ajoutant le paramètre .isResizable
à la donnée, la donnée renvoie une valeur booléenne true
ou false
.
Lorsque la valeur est true
, la donnée principale pourra être traitée avec les opérateurs d'images.
Image YouTube
<b:loop values='data:widgets.Blog.first.posts' var='post'>
<!-- IS YOUTUBE ? -->
<b:if cond='data:post.featuredImage.isYoutube'>
<img expr:src='resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl,497,"16:9")'/>
</b:if>
</b:loop>
Les images en provenance de vidéos YouTube peuvent être détectées grâce au suffixe .isYoutube
. Lorsque la valeur est vraie, l'url de l'image maxresdefault.jpg
pourra être obtenue avec le suffixe .youtubeMaxResDefaultUrl
.
Les images maxresdefault.jpg
peuvent être également traitées avec les opérateurs d'images.
Métadonnées de l'image de l'article
<b:loop values='data:widgets.Blog.first.posts' var='post'>
<!-- WIDTH (DISPLAY) -->
<data:post.featuredImage.width/>
<!-- HEIGHT (DISPLAY) -->
<data:post.featuredImage.height/>
</b:loop>
Si les dimensions de l'image ont été mentionnées explicitement, elles peuvent être extraites grâce aux suffixes .width
(Largeur) et .height
(Hauteur).
Lorsque ces informations ne sont pas disponibles, les suffixes peuvent renvoyer les valeurs 0
, NULL
ou vide.
Longueur de la chaîne de caractères
<b:loop values='data:widgets.Blog.first.posts' var='post'>
<!-- WITH SIZE -->
<data:post.featuredImage.size/>
<!-- WITH LENGTH -->
<data:post.featuredImage.length/>
</b:loop>
Le nombre de caractères de la chaîne peut être obtenu en utilisant les suffixes size
ou length
.
Échappements de la chaîne de caractères
<b:loop values='data:widgets.Blog.first.posts' var='post'>
<!-- HTML ESCAPED -->
<data:post.featuredImage.escaped/>
<!-- JS ESCAPED -->
<data:post.featuredImage.jsEscaped/>
<!-- JSON ESCAPED -->
<data:post.featuredImage.jsonEscaped/>
<!-- CSS ESCAPED -->
<data:post.featuredImage.cssEscaped/>
</b:loop>
La chaîne de caractères peut être échappée en utilisant les suffixes escaped
, jsEscaped
, jsonEscaped
et cssEscaped
.
Alias dans le modèle
Cette section permet d'identifier les emplacements dans le fichier XML où la donnée est implémentée sous différents alias. L’alias peut être identique à la clé d’origine ou être une adaptation spécifique à une ou plusieurs inclusions.
Dans le tableau ci-dessous, nous ne mentionnons que les assignations directes sans manipulation de la valeur, à l'exception des réglages appliqués par suffixe.
Alias | ID Inclusion | Balisage |
---|---|---|
p.featuredImage |
openGraphMetaData |
Original |
widgets.Blog.first.posts.first.featuredImage |
<body> |
Emporio |
image |
responsiveImageStyle |
Original |