@ La mise en page

Commençons par le commencement : au début il faut créer, si ce n’est déjà fait, un nouvel article à l’intérieur d’une des rubriques du site.
Pour cela il faut se rendre dans l’espace d’administration du site, en s’y connectant, avec votre login et votre pass, depuis le site public (en bas de page, cliquer sur le lien "Se connecter", renseigner les champs login et pass dans la fenêtre qui s’affiche, puis cliquer sur le bouton [Valider]
- Se rendre sur la page d’accueil de l’administration du site ( https://partitodemocratico.lu/ecrire/?exec=accueil ) et cliquer sur le titre de la rubriques dans laquelle vous allez créer le nouvel article.
- La page d’administration de la rubrique s’affiche : cliquer en bas-à-droite sur l’icône "Écrire un nouvel article".
- La page de création d’un article s’affiche. Saisissez le titre de l’article et enregistrez-le en cliquant sur le bouton [Enregistrer] en bas de page.
- La page d’administration de l’article s’ouvre : on y trouve, de haut en bas et de gauche à droite
— la fenêtre de statut de l’article avec le numéro de l’article (numéro progressif attribué par spip) et l’état de l’article (actuellement "En cours de rédaction")
— la fenêtre de chargement du "logo" de l’article (si vous en avez un, vous pouvez déjà le sélectionner et le télécharger (cliquer sur le bouton [Téléverser]) : limiter la taille du logo à 1000px maximum - 600px est suffisant), uniquement une image au format jpg, png ou gif
— la fenêtre de l’article avec, dans l’ordre, le titre, la date, l’auteur, le descriptif, le texte et, tout en bas, le bouton "Ajouter un document" qui va permettre d’importer les images d’illustration de l’article.
Avant de charger une image dans un article, il faut impérativement la contrôler et la redimensionner si nécessaire : les images fournies par les appareils récents (caméras et smartphones) sont souvent trop "grandes" pour un site web (plus l’image est grande plus son chargement - et donc son affichage - est long). Redimensionner les images à 1600px maximum (1200px est la taille idéale et suffisante).
- Cliquer sur le bouton "Ajouter un document", sélectionner une image (jpg, png ou gif) et la télécharger (cliquer sur le bouton [Téléverser]). Répéter l’opération pour les autres images de l’article.
Les images téléchargées apparaissent en bas de la page sous forme de vignettes, avec un numéro progressif d’identifiant attribué par spip. Pour chacune, cliquer sur le bouton [Déposer dans le portfolio] (ce qui permet à spip de créer les vignettes de chaque image). Le bouton [Supprimer] efface l’image téléchargée. Le bouton [Détacher] enlève l’image depuis l’article tout en la conservant dans la base de données de spip.
Il n’y a plus qu’à utiliser ces images dans l’article ...
- Cliquer sur le bouton [Modifier cet article] pour afficher la page de modification de l’article : maintenant, sur la gauche s’affiche une colonne comportant vos images téléchargées. Pour chaque image on dispose d’une série de "balises spip" de la forme <doc...> et <emb...> qui vont permettre d’insérer les images dans le texte.
Attention : pour apprécier le résultat obtenu, enregistrez votre travail (bouton [Enregistrer] en bas de page) pour afficher la page de gestion de l’article qui pré-visualise l’aspect final de l’article.
— Commençons par écrire ou copier/coller le texte de l’article dans la fenêtre "Texte" (ici j’utilise un texte aléatoire "Lorem ipsum" que je mets en italique) :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
— L’insertion d’une "balise d’image" dans le texte doit être faite au début d’un paragraphe. Allons-y !
- Placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <doc..|left> : le résultat obtenu est une imagette de 200px placée à gauche du texte qui coule sur la droite, comme ceci :

Bandiera Pd sventolante 1024x1024

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <doc..|right> : le résultat obtenu est une imagette de 200px placée à droite du texte qui coule sur la gauche, comme ceci :

LuxembourgDrapeau 2000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <doc..|center> : le résultat obtenu est une imagette de 200px placée au centre du texte qui coule en-dessous, comme ceci :

PRIMARIE PD 2000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Une utilisation très intéressante des balises <doc> consiste à placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <doc..|left> et puis sur une balise <doc..|right> : le résultat obtenu est une imagette de 200px placée au gauche et une imagette à droite du texte qui coule entre les deux imagettes, comme ceci :

PRIMARIE PD 2000
comites 1200

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Nota bene : les imagettes insérées par la balise <doc> sont "cliquables" et permettent d’afficher l’image correspondante en plein écran (limitée à la dimension réelle de l’image)
- Placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <emb..|left> : le résultat obtenu est l’image en taille réelle (limitée à la largeur de la page) placée à gauche du texte qui coule sur la droite, comme ceci, s’il lui reste de la place (sur ordinateur, modifiez la largeur de la fenêtre du navigateur et vous verrez ce que je veux dire) :

Bandiera Pd sventolante 1024x1024

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <emb..|right> : le résultat obtenu est l’image en taille réelle (limitée à la largeur de la page) placée à droite du texte qui coule sur la gauchee, comme ceci, s’il lui reste de la place :

LuxembourgDrapeau 2000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Placer le curseur d’écriture au début d’un paragraphe de texte et, dans la colonne de gauche des images, double cliquer sur une balise <emb..|center> : le résultat obtenu est l’image en taille réelle (limitée à la largeur de la page) placée au centre du texte qui coule en-dessous, comme ceci :

PRIMARIE PD 2000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis facilisis odio. Ut dictum ullamcorper tincidunt. Curabitur porta quam et blandit rhoncus. Nam eget quam eleifend, venenatis est eget, efficitur augue. In nisl velit, convallis vel augue a, blandit volutpat lorem. In venenatis condimentum sapien et tempus. Donec et convallis diam, a scelerisque diam. In a rutrum tortor.
- Nota bene : les images insérées par la balise <emb> ne sont pas "cliquables" car l’image correspondante est déjà affichée en plein écran (limitée à la dimension réelle de l’image).