Fonctionnement général

Vous pouvez définir distinctement et pour chaque photo en cas d'upload multiple :
- Le style de la police, le contenu textuel, la taille, la couleur et l'opacité du texte.
- Le filigrane peut être inséré dans un fond dont on pourra choisir également la couleur et l'opacité, ainsi que l'espacement par rapport au texte.
- Le sélecteur de position propose cinq positions prédéfinies, et ajustables dans le menu des paramètres symbolisé par une roue crantée.
- Vous pouvez ajuster la position du filigrane par cliquer-glisser (drag and drop) du filigrane sur la photo.

- Les champs numériques acceptent les valeurs décimales.
- Le filigrane ne s'affichera pas si la zone de saisie de l'onglet "Texte" est vide, ou si vous sélectionnez l'option "Annuler" dans le sélecteur de position.
- Des informations complémentaires sont disponibles dans les menus de la première boite de paramétrage visible avant la sélection des photos.

Positionnement, cas particuliers

En absence d'un choix de positionnement et si le champ texte est renseigné, le filigrane s'affichera par défaut dans le coin haut gauche de la photo sans respecter les marges prédéfinies de la position "Haut Gauche" (puisque cette option n'est pas sélectionnée). Cela dit, si vous utilisez un preset qui a été enregistré après avoir déplacé le filigrane par cliquer-glisser sur la photo, cette position manuelle est enregistrée comme position par défaut et sera appliquée en asbcence de sélection d'une option dans le sélecteur de position.

Enregistrement des presets

Les paramètres du filigrane peuvent être enregistrés pour être réutilisés lors des sessions d'upload suivantes, de même que pour la sélection de photos en cours.
Après avoir sélectionné une photo, ouvrez le menu des paramètres symbolisé par une roue crantée, et remplissez le champ "Nouveau" avec un libellé de votre choix, puis cliquez sur le bouton "Enregistrer/Mise à jour". Le preset enregistre le filigrane tel qu'il se présente sur la photo ainsi que tous les paramètres de configuration des onglets Texte, Fond et Paramètres (roue crantée). Eventuellement vous pouvez l'enregistrer sans texte, pour personnaliser ensuite le texte pour chaque photo, toutes les variantes sont possibles. Le nombre de présets enregistrables dépend de leur mode d'enregistrement, cf "Configuration webmestre".

Définition d'un preset par défaut

Le bouton "Défaut" est de type on/off. Il permet de définir un preset qui sera sélectionné par défaut dès le chargement de la page. Ce preset sera également sélectionné par défaut pour les prochains chargements de photos dans la page en cours. Si ce preset était déjà défini par défaut, il retrouve simplement un status commun.

Calcul adaptatif de la taille de la police

La taille de la police enregistrée dans les presets est proportionnelle à la largeur de l'image. Aussi cette valeur n'est pas signifiante dans la boite de paramétrage initiale qui s'affiche avant la sélection des photos, car c'est une valeur relative qui sera redéfinie en fonction de la largeur des images de prévisualisation et d'un éventuel recadrage, afin d'avoir toujours la même proportion entre la largeur du filigrane et celle de l'image.
Ce système permet d'obtenir le même rendu sur l'image finale quelle que soit la taille de l'image de prévisualisation et donc quel que soit le périphérique utilisé. De ce fait vous pourrez observer des tailles de police recalculées avec des décimales afin de garder un maximum de précision lors des mises à l'échelle.

Diffusion des modifications

Si vous sélectionnez un preset avant la sélection des photos, il sera naturellement appliqué à toutes les photos. Si, après la sélection des photos, vous modifiez des paramètres de ce preset et que vous cliquez sur le bouton "Enregistrer/Mise à jour" dans la gestion des presets, alors toutes les photos de la sélection se verront appliquer cette modification (position et contenu du filigrane).

Enregistrement d'une position libre définie manuellement par cliquer glisser et positions prédéfinies

Si vous avez redéfini manuellement la position du filigrane par cliquer-glisser, puis enregistré ou mis à jour le preset, cette position sera appliquée par défaut lors de la sélection du preset en asbcence de sélection d'une option prédéfinie dans le sélecteur de position. Ce positionnement correspondra donc à l'option "Position..." ce qui vous donne au total six positionnements prédéfinis enregistrables pour chaque préset.
Cependant cette sixième position est une position X-Y, relative au coin supérieur gauche de l'image, qui sera donc moins prévisible pour des photos ayant des proportions différentes (notamment orientation paysage vs portrait), contrairement aux positions prédéfinies qui sont appliquées par rapport aux bords de l'image, et d'autant plus que celles-ci proposent des ajustements variables suivant l'orientation de l'image, cf. "Marges des positions prédéfinies" dans le menu "Paramètres" (roue crantée).

Gestion des polices

Les polices proposées proviennent du dossier "Font" et doivent être au format "ttf" pour compatibilité avec la librairie GD de Php. Le code Php qui liste ce dossier et qui crée le menu du choix des fontes, est générique de sorte que vous pouvez ajouter ou supprimer des fontes en modifiant simplement le contenu de ce répertoire, en respectant l'arborescence actuelle: "font-family" -> "font-style". Les fontes variables ne sont pas supportées mais elles sont souvent proposées avec un dossier contenant les fontes "ttf" équivalentes que vous pourrez utiliser. Un vaste choix de polices est disponible dans "google font", ou ailleurs.
Attention cependant: si vous avez défini une police par défaut dans la première boite de filigrane (qui s'affiche avant la sélection de photos), vérifier que le style de fonte choisi (cf. name="font_adress") soit disponible dans votre répertoire.

Rendu Css vs rendu final avec la librairie GD de Php

Lors de l'affichage des photos de prévisualisation, l'alignement vertical du texte à l'intérieur du filigrane est par défaut variable suivant les polices de caractères utilisées. Pour avoir un rendu identique au rendu effectué par la classe Php "ImgGD" côté serveur qui centre verticalement le texte quelle que soit la police utilisée, vous pouvez définir une classe Css correspondant au nom du répertoire de la fonte, et utiliser les propriétés margin-top et/ou margin-bottom pour centrer le texte verticalement avec des valeurs négatives exprimées en "em". Voir pour exemple les dernières lignes du bloc "style" dans le code source de cette page.

Pour information, la taille de la police dessinée en Php pourra être légèrement inférieure à celle observée avant upload. D'une part, la mise à échelle entre la dimension de l'image de prévisualisation et celle de l'image finale peut générer une petite imprécision, et d'autre part il n'y a pas de correspondance directe entre la taille des fontes affichées en Css et les unités de taille en Php. La classe Php "ImgGD" fait des ajustements et calcule la taille maximale de la police Php au plus près de l'espace disponible, sans jamais le dépasser, de sorte que le rendu final sera dans la plupart des cas quasi identique à ce que vous observez avant l'upload, même si l'on peut observer une petite différence dans certains cas suivant la taille des caractères et les polices utilisées.

Mode d'enregistrement des presets

Le nombre maximum de presets pouvant être enregistrés dépend de leur mode d'enregistrement. Optez si possible pour un enregistrement en bdd (exemple fourni) qui n'est pas soumis à cette contrainte et qui offre également un maximum de pérennité. A défaut (comme dans cet exemple), les presets peuvent être enregistrés dans un cookie et leur nombre sera limité à 6-8 afin de ne pas saturer l'espace disponible pour les cookies dans le navigateur. A défaut de bdd et de cookie, les presets sont enregistrés dans l'espace "local storage" du navigateur mais la pérennité est alors très faible.

La sauvegarde des presets en bdd se paramètre avec la propriété "ajax" de l'objet passé en argument dans l'initialisation de la classe FiligraneABCI.js, cf. "configFil.ajax" dans le code source de ce fichier. La sauvegarde dans un cookie se paramètre avec la propriété "fCookie", cf. "configFil.fCookie" dans le code source de ce fichier. Si les deux propriétés sont renseignées, la sauvegarde en bdd sera prioritaire. Le paramétrage de la sauvegarde des presets en bdd est mise en commentaires dans ce script, voir les instructions du fichier "Php_Upload/UploadAjaxABCI_Filigrane_Preset.php" avant de l'activer.

Paramètres par défaut

Les valeurs de la première boite de filigrane (qui s'affiche avant la sélection de photos) sont initialisés en abscence d'un préset défini par défaut sur toutes les photos sélectionnées. Le texte éventuel doit être inclus dans le bloc "<span data-t="t" class="text">" et il ne s'affichera que si vous avez défini une fonte par défaut dans l'input name="font_adress". Notez que la valeur de ce champ doit inclure l'adresse complète de la fonte par rapport au script en cours, soit par exemple: value="Font/Open_Sans/OpenSans-Regular.ttf". Les autres valeurs se définissent de façon classique, soit en modifiant l'attribut "value" des champs input, soit en définissant l'attribut "selected" pour les select ou l'attribut "checked" pour les cases à cocher.

Personnalisation des boites de filigrane

- Si vous souhaitez modifier l'ergonomie de la boite de filigrane, tenez compte du fait que la classe "FiligraneABCI" (qui gère les fonctionalités) est étroitement dépendante du html et donc du contenu des "fieldset" ayant la classe "fil_param". Vous pouvez modifier les règles CSS en tenant compte des commentaires inclus dans cette page, par contre si vous tenez à modifier le html (tagname, nom des input, etc.), rendez-vous dans le fichier javascript "FiligraneABCI_DEV.js" et consultez les commentaires écrits au début de cette classe pour vérifier/adapter le ciblage des éléments html. Le fichier Php "UploadAjaxABCI_Upload_Filigrane_Crop_multiple" (destination de la requête Ajax) est également dépendant du nom des input.
- La taille des polices de caractères des onglets "Texte" et "Fond" ainsi que certains champs sont définis en Css suivant la largeur de la page, voir le commentaire tagué avec $$$*$$$ dans le code Css de cette page, ainsi que le paragraphe "Classe UploadAjaxABCI" ci-dessous pour le dimensionnement des images de prévisualisation.
- Comme dit dans le paragraphe précédent, les valeurs de la première boite de filigrane seront appliquées par défaut en abscence de sélection d'un préset. Il est donc inutile de définir des valeurs par défaut dans la boite de filigrane spécifique aux fichiers inclue dans le bloc ayant la classe "UpAbci_infosFile".
- Ce module ne supporte actuellement pas le mode multi-ligne.

Classe UploadAjaxABCI et personnalisation du formulaire

- Les blocs définis par les classes "fil_param", "borderImgPreview" et "statusfile" situés à l'intérieur bloc ayant la classe "UpAbci_infosFile", peuvent être positionnés dans l'ordre que vous souhaitez.
- La dimension des images de prévisualisation est déterminée en fonction de la largeur disponible à l'écran pour un maximum de visibilité, avec une limitation de la hauteur maximale à 600px (que vous pouvez modifier ou supprimer) dans le but d'avoir une vision d'ensemble de la photo et des outils du filigrane sans avoir à scroller. Voir les paramètres "config.imgPreviewMaxWidth" et "config.imgPreviewMaxHeight" pour le paramétrage de ces dimensions.

A noter qu'il est préférable de limiter la taille des images de prévisualisation en fonction de leur taille réelle affichée sur le site. Si vos images finales (après un éventuel redimensionnement) sont plus petites que les images de prévisualisation, il est possible que le filigrane ne soit plus lisible car il se redimensionnera pour occuper les mêmes proportions sur l'image. Cela dit, en cas de redimensionnements multiples (vignette + grand format destiné à l'agrandissement) il est possible de configurer la classe "ImgGD" pour n'appliquer le filigrane que sur la plus grande (ou inversement),