WordPress : Comment ajouteriez-vous des étiquettes numérotées séquentiellement aux images dans les publications ?

J’aimerais ajouter des étiquettes numérotées séquentiellement aux images dans les publications. Juste un petit nombre dans le coin de chaque image pour aider à les référencer dans mon écriture.

Toutes les images sont wp-block-image (pas de galeries). La numérotation doit être simple +1 addition basée sur l’ordre d’apparition dans les images pour ce post (en haut à gauche = #1, suivant img = #2…)

L’ordre ne devrait pas changer après la publication du message – c’est un contenu statique – mais au stade du brouillon, les images sont déplacées et seront hors d’usage à partir de leur téléchargement/insertion/nom de fichier/ID.

Quelques plugins de galerie sont apparus dans la recherche qui prétendent avoir cette fonctionnalité, mais je ne pense pas qu’ils fonctionneront avec wp-block-images et mon contenu existant. Et je préfère ne pas utiliser de plugin s’il peut être géré plus proprement sans lui.

Comment ajouteriez-vous ces étiquettes correctement et efficacement ?

Solution n°1 trouvée

Pas besoin de plugins ou de modification du balisage – vous pouvez faire tout cela en CSS pur avec ce qu’on appelle des compteurs, qui ont un large support de navigateur.

body {
  counter-reset: imageLabel;
}

.wp-block-image::before {
  counter-increment: imageLabel;
  content: "#" counter(imageLabel);
}

Cela produira déjà le numéro après l’image, vous pouvez le ::beforestyler comme vous le souhaitez et le positionner là où il doit être.

Attention, cela pourrait nuire à l’accessibilité de la page, je ne sais pas dans quelle mesure les lecteurs d’écran peuvent interagir avec les deux ::beforeet le CSS content. Cependant, pour résoudre ce problème, vous devrez probablement créer un nouveau bloc ou modifier le bloc d’image .