Lots d'images 2.7

Allez à Lots d'images par le menu Plugins. CTRLCTRL L

Si le menu Plugins est vide, ou ne contient pas le plugin :

  • Vérifiez que le plugin « imageBatch » se trouve bien dans le dossier de plugins « htmlstyles_plugins »; sinon placez-le à l'intérieur.
  • Cliquez l'icone « plugin update » plugin update en haut à droite de l'écran HTML Styles pour mettre à jour le menu en fonction des plugins installés.
htmlstyles.livecode
htmlstyles_plugins
imageBatch.livecode

bouton plugin Cliquez l'icone plugin version pour accéder à l'aide en ligne.

Boutons de commande
choix d'un lot d'imagesChoix du dossier contenant le lot d'images à traiter. pages html de destinationChoix du dossier contenant les pages dans lesquelles les images seront insérées.
enregister la liste d'images du lotEnregistre la liste des images dans le fichier « listImages.txt » (à l'intérieur du répertoire contenant les données du lot), ainsi que les réglages choisis. Aucune image n'est mise à jour. effacer toutEfface la liste.
remise à jour des données du lotRéactualise la liste d'images lorsque, par exemple, vous ajoutez ou supprimez une image du dossier.

Vous pouvez éditer le fichier « listImages.txt » avec un éditeur texte en cliquant ce bouton avec la touche ALTALT enfoncée. Après avoir enregistré modifié le fichier, cliquez ce bouton pour actualiser la liste.
Mise à jour du titre de l'imagePermet d'activer la saisie de légendes d'image.
Cliquer la ligne concernée et saisir dans le champs contextuel ouvert par dessus.
recopie des légendes IPTCCrée une légende IPTC pour chaque image du lot.

Requiert l'installation d'ExifTools mais, si la machine est un Macintosh, enregistre les légende en commentaire Finder. Sur les autres plate-formes, le fichier « listImages.txt » est la seule sauvegarde des légendes.
balises images de la sélectionPour les images sélectionnées dans la liste, crée dans le Presse-Papier le codage HTML correspondant à la sélection.
Pour sélectionner l'ensemble du lot, taper préalablement ctrlctrl  AAA (tout sélectionner).

Pour créer sur le Bureau une page de test, maintenir la touche ALTALT enfoncée. Utile pour prévisualiser un nouveau codage.
Ouvrir l'éditeur d'imagesOuvre l'image sélectionnée avec un éditeur d'images.

Le choix de l'éditeur se fait avec le même bouton en maintenant la touche ALTALT enfoncée.
update des images d'une pagePermet d'appliquer à une page la mise à jour des balises images tenant compte de nouveaux réglages : taille, légende.
Par mesure de sécurité, l'original est sauvegardé en copie sur le Bureau.
Options de mise en forme HTMLPermet de modifier le menu codage : items de menus et source HTML des balises images. menu local dossiers de l'environnement de travailPermet d'ouvrir le répertoire contenant les images.
lot d'images à placer dans des pages html

Le lot d'images

Le lot est décrit par un tableau à 3 colonnes contenant pour chaque image : son nom (de fichier), une légende que l'on peut ajouter manuellement et sa taille en pixels. Le lot est enregistré dans le fichier « listImages.txt » à l'intérieur du dossier.

Le titre de ce tableau permet de trier les lignes par nom ou par légende en cliquant dans l'en-tête de colonne (matérialisé par une flêche blanche).

Options de génération des balises images HTML

codage : ▾ spécifie un modèle de balise <img> ou <figure> utilisé pour générer le HTML de chaque image. Ce menu peut-être paramétré en ajoutant des codages spécifiques.

pos.horizontale ▾ et vertical-align: ▾ : définit le mode de placement de l'image sur chaque axe ;

⬜︎ encoder en base64 : incorpore l'image en datauri dans le champs source de l'image ;

maximum : ▾ Permet de changer les dimensions d'affichage de l'image de plusieurs manières :


Création de codages spécifiques

Le bouton Options de mise en forme HTML permet de modifier le menu « codage : ». Il ouvre la liste suivante :

éditeur de codage
Boutons de gestion de l"éditeur
ajouter un sélecteurAjoute un nouveau codage. supprimer sélecteurSupprime le codage courant.
dupliquer sélecteurClone le codage courant. déplacer les sélecteursLes doubles flêches permettent de déplacer le codage courant dans la liste.
copie style sélecteurOuvre une fenêtre de modification du codage sélectionné. enregister la liste d'images du lotEnregistre les codages spécifiques et met à jour le menu codage.
Exemples :
alt et title<img src="$imgsrc" title="$label" alt="$label" $width_height border="0" $align>
alt seulement<img src="$imgsrc" alt="$label" $width_height border="0" $align>

Utilisation

éditeur de codage

Remarque : Les navigateurs savent désormais déterminer automatiquement la largeur et la hauteur d'une image. Il n'est nécessaire de préciser les dimensions que si l'on veut fixer dans la page. Sinon, dans le cadre d'une architecture « adaptative », mieux vaut préciser pour les images max-width:100%;height:auto;.

Liste des variables possibles :
Variablecommentaires
$imgsrcsource de l'image (../images/image001.png) ou son encodage en base64.
<img src="$imgsrc"
$labelLégende dans un title ou un alt
title="legende" ou alt="legende"
$alignalignements selon valeurs des menus locaux pos.horizontale et alignement-vertical.
$noalignspécifie qu'aucun alignement n'est demandé pour ce codage.
aucun code n'est généré pour cette variable, mise à la fin du codage.
$heighthauteur en pixel calculée d'après l'échelle choisie.
$height → height="y".
Peut s'appliquer en style à height, max-heigth, min-heigth.
$widthlargeur en pixel calculée d'après l'échelle choisie.
$width → width="x".
Peut s'appliquer en style à width, max-width, min-width.
$width_heightlargeur et hauteur en pixel calculées d'après l'échelle choisie.
$width_height → width="x" height="y".
$imgNamenom du fichier (image001.png)
alt="$imgName"
$imgSizex,y dimensions de l'original sans valeur d'unité, la base étant le pixel.
$imgSize → x,y (en points)