Bonjour,
Mon environnement est Node.js et Fastify, du JavaScript donc.
Le contenu de mes articles (`data`) est parsé par plusieurs regex ayant pour but de transformer des shortcodes "maison" par des balises HTML appropriées (lecteur YouTube, map Leaflet, etc). Ici il s'agit de rendre une image.
Mon shortcode est défini ainsi :
Le rendu HTML généré est celui-ci (le code généré n'a pas d'indentation, je le fais ici pour la lisibilité) :
Nota bene : je sais que faire un alt et un figcaption identique "c'est pas bien", mais pour l'instant je développe, je ferais une itération du code plus tard...
Pour vous faire une idée voici un rendu visuel (il s'agit ici du framework statique uniquement, mais ça donne la même chose avec ma solution backend) : Article . Scriptura
Et maintenant voici le script qui me permet d'obtenir ce résultat (je ne mets ici que le shortcode pour les images) :
Et maintenant ma problématique : mes attributs doivent respecter un ordre précis pour être compris par ma regex, or j'aimerais que les définitions facultatives puissent être annoncées comme bon me semble (à la limite ont pourrait laisser de côté les deux premières définitions obligatoires qui resteraient en premier). Par exemple j'aimerais pouvoir détecter ceci :
Comment faire cela ? Peut être une solution à partir de "drapeaux" ? Mais alors moi et les regex... je m'en sors sur un point ou un autre et puis j'oublie très vite...
Modifié par Olivier C (20 Feb 2024 - 06:54)
Mon environnement est Node.js et Fastify, du JavaScript donc.
Le contenu de mes articles (`data`) est parsé par plusieurs regex ayant pour but de transformer des shortcodes "maison" par des balises HTML appropriées (lecteur YouTube, map Leaflet, etc). Ici il s'agit de rendre une image.
Mon shortcode est défini ainsi :
{{"/medias/images/uploads/clay-banks-original.webp" "Yaquina Head, Newport, États-Unis." align="right" width="2002" height="3000"}}Le rendu HTML généré est celui-ci (le code généré n'a pas d'indentation, je le fais ici pour la lisibilité) :
<figure class="figure-image-focus-thumbnail-alignright">
<picture>
<source srcset="/medias/images/uploads/clay-banks-w600.webp, /medias/images/uploads/clay-banks-w1000.webp 2x">
<img src="/medias/images/uploads/clay-banks-original.webp" alt="Yaquina Head, Newport, États-Unis." width="2002" height="3000">
</picture>
<figcaption>Yaquina Head, Newport, États-Unis.</figcaption>
</figure>Nota bene : je sais que faire un alt et un figcaption identique "c'est pas bien", mais pour l'instant je développe, je ferais une itération du code plus tard...
Pour vous faire une idée voici un rendu visuel (il s'agit ici du framework statique uniquement, mais ça donne la même chose avec ma solution backend) : Article . Scriptura
Et maintenant voici le script qui me permet d'obtenir ce résultat (je ne mets ici que le shortcode pour les images) :
export default async function shortcodes(data) {
/* Sont inclus ici les shortcodes qui précèdent */
/**
* Images
* 1. Le premier paramètre, obligatoire, doit être une image valide.
* 2. Le deuxième paramètre, obligatoire, est une description de l'image.
* 3. Les autres paramètres sont facultatifs et doivent être nommés, ils sont insérés dans le tag HTML img.
* 4. Le paramètre align="right", s'il est présent, doit être inséré dans la balise figure.
* @param {string} data Un shortcode décrivant l'image : l'URL et une description chancun entre guillemets doubles, ensuite des paramètres nommés, facultatifs.
* @returns {string} data Les tags HTML de l'image.
* @see https://regex101.com/r/vxAbSB/1
* Exemple de paramètre en entrée : {{"/medias/images/uploads/clay-banks-original.webp" "Yaquina Head, Newport, États-Unis." align="right" width="2002" height="3000"}}
*/
data = data.replace(
/\{\{\s*"([^"]+\.(webp|avif|jpg|jpeg|png|gif))"\s*"([^"]+)"(?:\s*(align="right"))?(?:\s*width="(\d+)"\s*height="(\d+)")?\s*\}\}/gi,
(match, src, ext, alt, align, width, height) => {
const classAlign = align ? `-alignright` : `-alignleft`
const imgSrc = `src="${src}"`
const imgSrcset = `<source srcset="${src.replace(/-original\./, `-w600.`)}, ${src.replace(/-original\./, `-w1000.`)} 2x">`
const imgAlt = `alt="${alt}"`
const imgTag = `<img ${imgSrc} ${imgAlt} width="${width}" height="${height}">`
const figcaption = `<figcaption>${alt}</figcaption>`
return `<figure class="figure-image-focus-thumbnail${classAlign}"><picture>${imgSrcset}${imgTag}</picture>${figcaption}</figure>`
},
)
return data
}Et maintenant ma problématique : mes attributs doivent respecter un ordre précis pour être compris par ma regex, or j'aimerais que les définitions facultatives puissent être annoncées comme bon me semble (à la limite ont pourrait laisser de côté les deux premières définitions obligatoires qui resteraient en premier). Par exemple j'aimerais pouvoir détecter ceci :
{{"/medias/images/uploads/clay-banks-original.webp" "Yaquina Head, Newport, États-Unis." height="3000" width="2002" align="right"}}Comment faire cela ? Peut être une solution à partir de "drapeaux" ? Mais alors moi et les regex... je m'en sors sur un point ou un autre et puis j'oublie très vite...
Modifié par Olivier C (20 Feb 2024 - 06:54)
, je ne connaissais pas avant de voir ce message, mais je ne pige pas bien l’intérêt d'avoir des "shortcodes". Cela ne serait pas plus simple d'avoir directement un format json 
?