` lors de la publication de la page. Les attributs disponibles sont : * `id="xxx"` **\[obligatoire]** L'identifiant unique du widget Editor, caractères alphanumériques uniquement. * `class="xxx"` *\[optionnel]* Liste de classes associées à ce bloc de texte * `data-rrw-edit-bgcolor="#HexColor"` *\[optionnel]* Lorsque le widget est en mode édition, #hexColor est appliquée comme couleur de fond. * `data-rrw-edit-fgcolor="#HexColor"` *\[optionnel]* Lorsque le widget est en mode édition, #hexColor est appliquée comme couleur de texte. Le "`contenu HTML par défaut`" est optionnel, il s'affiche lorsque le widget n'a jamais été édité. Ce peut être n'importe quelle balise HTML. Le widget Editor accepte les widgets enfants suivants : * [\](/widgets/widget-image) * [\](/widgets/widget-video) # \ Ce widget fournit une image modifiable ```markup ``` Le widget `` est rendu comme un image `` lors de la publication. Les attributs disponibles sont : * `id="xxx"` **\[obligatoire]** L'identifiant unique du widget Image, caractères alphanumériques uniquement. * `width="xxx"` **\[obligatoire]** La largeur en pixel de l'image * `height="xxx"` **\[obligatoire]** La hauteur en pixel de l'image * `class="xxx"` *\[optionnel]* Liste de classes associées à cette image * `alt="texte alternatif"` *\[optionnel]* Texte alternatif à l'affichage de l'image * `data-rrw-lazy="no"` *\[optionnel]* Désactive le [chargement différé](/widgets/widget-image#chargement-differe-ou-lazy-loading) de l'image * `data-rrw-srcset="auto"` *\[optionnel]* Définit les tailles alternatives de l'image selon la taille de l'écran pour [les images responsive](/widgets/widget-image#image-responsive). #### Optimisation de l'image Quelque soit la taille de l'image sur votre ordinateur, elle sera redimensionnée dans les dimensions définies par les attributs du widget. Un action sur la molette de la souris permet de zoomer/dézoomer l'image, un cliquer/déplacer permet de la recadrer. Conformément aux bonnes pratiques SEO, les images PNG et JPG sont également optimisées pour réduire leur taille et accroitre les performances de votre site. #### Chargement différé ou lazy-loading Le chargement différé consiste à ne charger l'image depuis le serveur au moment ou celle-ci va apparaitre à l'écran, cela permet d'optimiser les temps de chargement de page. Par défaut cette fonctionnalité est activé par RunRunWeb lors de l'utilisation du widget Image, elle peut être désactivée en précisant l'attribut `data-rrw-lazy="no"`. #### Image responsive Sur un site responsive, c'est à dire qui s'adapte à la taille de l'écran (ordinateur, mobile, tablette), une même image peut avoir une taille différente. HTML prévoit cette fonctionnalité avec l'attribut `srcset` d'une balise ``. RunRunWeb va automatiquement générer plusieurs déclinaisons de l'image dans une taille différente et créer le rendu HTML avec les attributs qui conviennent. Pour activer cette fonctionnalité, il faut ajouter l'attribut `data-rrw-srcset="auto"`. Selon la taille initiale de l'image, deux versions, 640px de largeur et 320px de largeur, vont être créés et proposés au chargement (la hauteur est calculée pour conserver les proportions de l'image). Ces valeurs automatiques peuvent être personnalisées, en remplaçant la valeur `auto` par la taille en pixel suivie de w, par exemple `500w` pour une largeur de 500px. Plusieurs tailles sont possibles en séparant les tailles par une virgule, par exemple, `100w,500w,800w` va générer les tailles 100 pixels de large, 500 et 800. # \ Ce widget fournit un lecteur vidéo pour youtube, vimeo et dailymotion ```markup ``` Les attributs disponibles sont : * `id="xxx"` **\[obligatoire]** L'identifiant unique du widget Video, caractères alphanumériques uniquement. * `width="xxx"` **\[obligatoire]** La largeur en pixel de la vidéo * `height="xxx"` **\[obligatoire]** La hauteur en pixel de la vidéo * `class="xxx"` *\[optionnel]* Liste de classes associées à cette vidéo * `data-rrw-lazy="no"` *\[optionnel]* Désactive le [chargement différé](/widgets/widget-image#chargement-differe-ou-lazy-loading) de la vignette associée à la vidéo Ce widget encapsule le lecteur selon le fournisseur de la vidéo (youtube, vimeo, dailymotion). Le chargement se fait uniquement au lancement de la vidéo et optimise ainsi le chargement de la page. Si plusieurs vidéos sont intégrées à la page, la lecture de l'une arrête automatiquement la lecture des autres. # \ Ce widget encapsule un ensemble de widgets ou de code HTML. ```markup HTML et/ou autres widgets ``` Les attributs disponibles sont : * `id="xxx"` **\[obligatoire]** L'identifiant unique du widget Block, caractères alphanumériques uniquement. * `data-rrw-wrapper="xxx"` \[optionnel] définit la balise qui sera rendu lors de la publication de la page. un bloc `

` est définit par défaut. * `class="xxx"` *\[optionnel]* Liste de classes associées à ce bloc de contenus Ce widget est particulièrement utile pour réutiliser un même bloc de contenu dans plusieurs page via le mécanisme de [widget externe](/widgets/widgets-externes), par exemple une entête ou un bandeau. Le widget Block accepte les widgets enfants suivants : * [text](/widgets/widget-text) * [editor](/widgets/widget-editor) * [image](/widgets/widget-image) * [video](/widgets/widget-video) * [iterator](/widgets/widget-iterator) * [pattern](/widgets/widget-pattern) * [form](/widgets/widget-form) # \ Ce widget permet de générer une liste de contenus qui partage le même modèle. ```markup HTML et/ou widgets ``` Les attributs disponibles sont : * `id="xxx"` **\[obligatoire]** L'identifiant unique du widget Iterator, caractères alphanumériques uniquement. * `data-rrw-wrapper="xxx"` *\[optionnel]* définit la balise qui sera rendu lors de la publication de la page. un bloc `

` est définit par défaut. * `data-rrw-insert="first|last"` *\[optionnel]* indique si l'ajout d'un élément à la liste se fait au début '`first`' ou à la fin '`last`'. * `class="xxx"` *\[optionnel]* Liste de classes associées à ce bloc de contenus Le contenu défini dans la balise `rrw:iterator` sert de modèle pour chaque élément de la liste ainsi créée. Si un widget est utilisé dans le modèle, celui-ci ne doit pas déclarer d'attribut `id`, il sera généré automatiquement à chaque nouvel élément de la liste.
Par exemple : ```markup

``` Le widget Iterator accepte les widgets enfants suivants : * [text](/widgets/widget-text) * [editor](/widgets/widget-editor) * [image](/widgets/widget-image) * [video](/widgets/widget-video) * [pattern](/widgets/widget-pattern) # \ Ce widget fournit un modèle via la syntaxe mustache à partir d'une source de données externe. ```markup | syntaxe mustache ici {{myfield}} qui peut être mixée avec du code html

``` Le [template mustache](https://defeo.lu/aws/lessons/mustache) s'appuie sur une source de données fournit par les balises `rrw:dataform`, `rrw:rss`. Les données disponibles sont consultables via l'icône

```markup My field ``` `` fournit un formulaire de données qui pourront être mise en forme via la notation mustache du widget `rrw:pattern`. Les données sont nommées par l'attribut name des balises HTML ``, ` ``` Les attributs disponibles sont : * `id="xxx"` **\[obligatoire]** L'identifiant unique du widget Form, caractères alphanumériques uniquement. * `data-rrw-recipient="xxx"` **\[obligatoire]** définit l'adresse email du destinataire lors de l'envoi d'un formulaire. * `data-rrw-sender="xxx"` *\[facultatif]* le nom du champ \ (la valeur de son attribut name) qui contient l'adresse email de l'expéditeur du formulaire. Cela permet de définir l'adresse de réponse à un formulaire directement à l'email émetteur. * `data-rrw-subject="xxx"` *\[facultatif]* le sujet de l'email envoyé par le formulaire. * `data-rrw-success="xxx"` *\[facultatif]* le message affiché si l'envoi du formulaire a réussi. * `data-rrw-error="xxx"` *\[facultatif]* le message affiché si l'envoi du formulaire a échoué. Lors de l'envoi d'un formulaire, RunRunWeb génère un email envoyé à l'adresse définit dans l'attribut `data-rrw-recipient` et qui contient chaque champ définit dans une balise ``, `

`.\
Par défaut c'est l'attribut name qui nomme la valeur du champ. L'attribut `data-rrw-name` permet de définir un nom plus explicite. Par ailleurs l'attribut `data-rrw-validator` permet de définir des règles sur la valeur du champ, `email` pour une adresse e-mail et `notempty` pour obliger un champ non vide.

# Widgets externes

Les widgets externes permettent de réutiliser un widget définit dans une page dans une autre page du site.

```markup
<rrw:editor id="nompage:idwidget" />
```

Dans le template d'une page il est possible de faire une référence à un widget d'une autre page en définissant son attribut id par le nom de la page suivi par deux points : puis son attribut id dans cette page. Par exemple, si dans la page `home` définit le widget `<rrw:editor id="myeditor" />` alors dans une autre page, il est possible de référence ce widget par`<rrw:editor id="home:myeditor" />`

Lors d'une référence à un widget externe, celui-ci n'est pas modifiable dans la page externe, y compris ses attributs `data-rrw-xxx`.

Menu

Menu

{{data}}