Ajouter des images à un article en SPIP

• Dans la partie privée de SPIP, aller sur votre article.
• Ajouter votre image en utilisant le formulaire d’ajout d’image

Vous sélectionnez l’image à télécharger depuis votre disque dur. Après le chargement, l’image apparaît alors à coté de l’article avec son numéro unique.

Vous pouvez ensuite effectuer les actions suivantes :

On peut limiter la taille des documents, des images et des logos téléversés par les rédacteurs, que ce soit en terme de Ko ou de pixels.

A noter qu’Escal utilise déjà le code suivant

// les images de plus de 2000 pixels de largeur ou de hauteur ne seront pas enregistrées
define('_IMG_MAX_WIDTH', 2000);
define('_IMG_MAX_HEIGHT', 2000); 

// Et pour éviter de faire planter GD2 :
 define('_IMG_GD_MAX_PIXELS', 2000000);

Utiliser le code de l’image pour illustrer l’article

Pour placer l’image dans votre article il suffit d’ajouter le code obtenu <docXX> dans le texte de l’article.

<doc3965>Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....

Ce qui donne le résultat suivant :

Pour afficher les images inclues dans le texte d’un objet, les squelettes spécifient souvent une taille d’affichage maximum au moyen du filtre |image_reduire.
Indépendamment de cette taille, la vignette des images dont les dimensions originales sont plus grandes que la valeur de la constante _IMAGE_TAILLE_MINI_AUTOLIEN comportent un lien permettant de les afficher en grand dans la Mediabox.

• un clic sur l’image affichée ouvrira la popup de la mediabox uniquement si l’image d’origine fait plus de 800px.

Quoiqu’il en soit, il faut garder à l’esprit que l’affichage final sur le site publique peut énormément varier selon l’habillage graphique du site et aussi selon le périphérique ("device") avec lequel vous consultez le site.

A noter qu’Escal permet via l’espace privé de configuration de choisir :

– Pour les rubriques

• Taille max du logo des rubriques (en px)
  • ../ecrire/ ?exec=configurer_escal&cfg=autres_principal#champ_fieldset_rubrique_la

– Pour les articles

• Taille max du logo des articles (en px)
• Largeur maximum des images (en px) - Pour les articles clasiques
• Largeur maximum des images (en px) - Pour les articles en pleine page (articles avec le mot-clé "pleinepage" qui supprime les blocs latéraux)
• Taille des icônes de la barre d’outils (en px)
  • ../ecrire/ ?exec=configurer_escal&cfg=autres_principal#champ_fieldset_articles_les

Redimensionner

Il est possible de diminuer la taille des images en indiquant soit une largeur, soit une hauteur.

le code <docXX|largeur=200> permettra d’afficher une image limitée 200px de large.
le code <docXX|hauteur=150> permettra d’afficher une image limitée 150px de haut.

Ajouter un lien

Il est possible d’ajouter un lien sur une image en ajoutant :
<docXX|lien=http://www.monsite.ltd>

L’image deviendra cliquable et renverra vers le lien indiqué.

Renseigner la légende

Il est possible d’aller d’ajouter une légende à l’image.

Pour cela, il faut cliquer sur le bouton "Modifier"

Vous pouvez alors renseigner le titre, le descriptif de l’image, ses crédits, le texte alternatif de l’image...

Ce qui peut donner l’affichage suivant

Masquer la légende ou un de ses éléments

il est possible d’afficher une image sans sa légende, son titre, son descriptif ou ses crédits. Pour cela, utilisez les codes suivant en fonction de vos besoins :
– <docXX|masquer=legende> pour masquer toute la légende ;
– <docXX|masquer=titre> pour masquer seulement le titre de la légende ;
– <docXX|masquer=descriptif> pour masquer seulement le descriptif de la légende ;
– <docXX|masquer=credits> pour masquer seulement les crédits de la légende ;

Il est aussi possible de masquer plusieurs de ces éléments en les espaçant par des virgules :

Par exemple, <docXX|masquer=descriptif,credits> masquera le descriptif et le crédit.

Les images "vues"

Les images dont on a utilisé le code dans l’article sont marquées dans l’espace privé avec une icône "œil".

Ce sont les images filtrées par le critère vu. On ne peut pas supprimer ou détacher ces images. Il faudra donc au préalable supprimer les codes <docXX> correspondants dans le texte de l’article.

Dans le squelette SPIP par défaut, les images restantes sont listées dans un portfolio en bas de l’article, dans Escal le portofolio est "désactivé" par défaut.

Il est configurable via : ../ecrire/ ?exec=configurer_escal&cfg=autres_principal#champ_fieldset_articles_les

Organiser les images d’un article

Dans la partie privée, toutes les images de l’article sont listées en bas de l’article.

Les boutons suivants permettent de changer les vues (plus ou moins compactes).

Il est aussi possible de modifier l’ordre des images via un glisser-déposer.

Autres options du formulaire d’ajout d’images

• depuis mon ordinateur : permet d’uploader un fichier stocké depuis son disque dur.
• depuis la médiathèque : permet de sélectionner un document déjà ajouté sur le site. Vous sélectionnez l’image depuis la médiathèque. Cela vous évite d’avoir à télécharger des images qui ont déjà été mise en ligne.
• depuis le serveur : permet de charger des documents ayant été déposés par FTP dans le répertoire/tmp/upload du serveur.
• depuis internet : permet d’ajouter une ressource distante, par exemple une photo présente dans une bibliothèque d’image ou un document présent sur un autre site internet.