Projet

Général

Profil

Actions

Anomalie #94

fermé

Affichage des logos

Ajouté par Grégory MARIGOT - TEICEE il y a presque 14 ans. Mis à jour il y a plus de 13 ans.

Statut:
Fermé
Priorité:
Normal
Version cible:
Début:
10/03/2011
Echéance:
% réalisé:

100%

Temps estimé:
Version ProxyEPN:
1.0

Description

L'affichage des logos des GEPN dans l'interface est problématique : leurs tailles et dimensions sont inconnues et diverses (on trouve des formats en hauteur, des bandeaux tout en largeur, etc...). Pour cette raison leur utilisation sur la page d'accueil des GEPN avait été désactivée.

Pour pouvoir exploiter correctement un logo quelconque, le mieux est probablement d'effectuer un prétraitement sur les images stockées afin d'uniformiser leur ratio. Avec un ratio connu, les images peuvent alors être affichées en étant redimensionnées pour coller à l'interface, sans être déformées.


Demandes liées 1 (0 ouverte1 fermée)

Lié à Evolution #87: Personnalisation de l'interface (générale + GEPN)FerméGrégory MARIGOT - TEICEE04/02/2011

Actions

Mis à jour par Grégory MARIGOT - TEICEE il y a presque 14 ans

Dans l'optique d'un ratio universel, le choix le plus consensuel est certainement 1:1.

Le principe serait :
  • de convertir automatiquement un logo dès qu'il est uploadé en une image carré
  • la mise au carré ne doit pas détériorer l'image : ajout de marges transparentes (pas de déformation)
  • les logos convertis seraient tous au format PNG, cette version peut coexister avec l'image originale non retouchée
  • une mise à l'échelle peut être envisagée au passage (pour éviter notamment des images inutilement grandes)
  • la mise en page de l'application (template+CSS) pourra prendre en compte le ratio pour adapter la dimension du logo à l'interface
  • une migration des logos déjà uploadés sera nécessaire (script)

Mis à jour par Grégory MARIGOT - TEICEE il y a presque 14 ans

  • Statut changé de Nouveau à In Progress
  • Version cible mis à ProxyEPN 2.0
  • % réalisé changé de 0 à 90

Modifications publiées sur le svn (r400) :

Mise en place de hooks sur les formulaires

La necessité d'effectuer des post-traitements sur les images devait se faire après leur upload, donc au niveau des traitements effectués lors du save() des formulaires. Un système de hooks a été ajouté pour pouvoir agir de manière générale sur tout fichier uploadé, sur tout formulaire.

La classe BaseFormPropel surcharge ainsi les méthodes removeFile() et saveFile(), afin d'y ajouter des callbacks vers des méthodes optionnelles dans les classes des objets concernés : uploadPostDelete($field) et uploadPostSave($field, $filename, $file)

Il suffit donc de définir ces méthodes dans les classes des objets le nécessitant pour que la validation de leur formulaire associé les appelle automatiquement pour chaque fichier uploadé.

Nouvelle classe pour la manipulation d'images

La classe myPict propose une interface avec les fonctions PHP-GD pour le traitement d'images.
Elle peut s'instancier en fournissant le chemin d'un fichier existant, qu'elle chargera avec détection automatique du type. Des méthodes peuvent ensuite effectuer des opérations sur l'image, tel son redimensionnement.

L'image générée - résultat d'une opération - peut être appliquée en remplaçant la ressource source, afin d'enchainer d'autres traitements supplémentaires. Sinon l'image produite peut aussi être sauvegardée vers un fichier (si aucun nom n'est donné, le nom d'origine est repris, écrasant l'image source).

Pour le moment la classe propose essentiellement du redimensionnement, de plusieurs manières possible :
  • resize($width, $height) : si les deux dimensions sont données, elles seront appliquées strictement même si le ratio d'origine n'est pas respecté ; si une des deux dimensions est absente, elle sera déterminée en fonction de l'autre en respectant le ratio d'origine.
  • fitTo($width, $height) : les dimensions indiquées représentent le cadre dans laquelle l'image générée doit être contenu, mais le ratio sera toujours respecté. L'image sera redimensionnée la plus grande possible, au moins l'une des deux dimensions correspondra à la largeur ou la hauteur demandée.
  • maxTo($width, $height) : très proche de la méthode précédente, sauf que l'image ne sera pas agrandit si elle rentre déjà dans le cadre indiqué. Celà n'opère donc que pour réduire une image afin de s'assurer qu'elle ne dépasse pas du cadre.

Les deux dernières méthodes font appels à des méthodes statiques pour calculer les dimensions à appliquer. Ainsi les méthodes fitSize() et maxSize() peuvent aussi être utilisées hors contexte pour effectuer ces calculs (edit: la r403 rectifie les calculs effectués par ces méthodes).

Support des vignettes dans MyPropelBehaviorUploads

Le behavior Propel déjà mis en place pour gérer les fichiers liés aux objets se devait de prendre en compte la présence de vignettes pour ses images.

Ainsi ses méthodes intègrent à présent les éléments suivants :
  • le hachage upload_images peut contenir une clé 'thumb' valant true, signifiant qu'une vignette doit exister pour cette image.
  • la propriété thumb_name définit le motif pour générer le nom de la vignette à partir du nom d'origine (%s pour nom et extension).
  • la propriété thumb_size définit un tableau contenant la largeur et la hauteur des vignettes à générer.
  • la méthode generateThumbName() permet de déterminer le fichier vignette correspondant pour un fichier d'image, en fonction du motif précédent, sachant gérer les chemins (donc utilisable aussi bien pour un simple nom, un chemin web ou un chemin FS selon la source donnée).
  • la méthode getUploadThumb($field) est l'équivalente de getUploadFile($field) pour obtenir le chemin de la vignette correspondant à un champs (ou false si le champs est vide).

A noter qu'un second paramètre optionnel (à false par défaut) permet d'obtenir le chemin FS plutot que le chemin web, lors de l'appel à getUploadThumb($field). Le même paramètre a aussi été ajouté à la méthode getUploadFile($field).

La création et la suppression des vignettes sont proposées par les méthodes :
  • deleteThumb($field) supprime la vignette correspondant à un champs, si elle existe (peut donc être appelé sans test préalable sur sa nécessité)
  • createThumb($file=NULL, $field=NULL) génère une vignette pour le fichier image donné (effectue l'instanciation de myPict et le redimensionnement en fitTo() vers les tailles indiquées par $thumb_size
    ). Le fichier peut être nul seulement si le champs est spécifié (le chemin sera déterminé automatiquement). Sinon la présence du champs est facultative, mais sa présence permet de controller si une vignette est souhaitée (présence de 'thumb'=>true dans le hachage $upload_images).

De plus les méthodes attendues par les hooks des formulaires sont aussi directement définies dans le behavior, leur usage étant à priori standart. Bien sûr elles pourront être surchargées dans l'objet si le post-traitement des fichiers uploadés ne se limite pas à la simple création de vignette.

Enfin, les méthodes moveAllUploads() et deleteAllUploads() prennent en charge le déplacement et la suppression des éventuelles vignettes. Et pour la génération de galeries, la méthode getUploadImageGallery() qui retourne les infos de chaque image, remplace la valeur true de 'thumb' par le chemin web de la vignette.

Tâche de regénération des vignettes

Si les vignettes sont automatiquement générées à l'upload des images, leur mise ne place pose un problème pour toutes les images déjà en place. Une tâche d'administration Symfony a donc été créée pour effectuer la suppression/création de toutes les images liées aux objets.

Elle se nomme proxyepn:make-thumbs et est appelé en précisant le type d'objets ciblé (actuellement : GEPN, EPN, ROOM ou COMPUTER).

A noter que ce script peut également être utile lors d'un changement de configuration des vignettes : si on décide de changer leur taille notamment, il est pratique de pouvoir les regénérer toutes avec les nouveaux paramètres.

Logo des GEPN et interface de l'application

Les logo des GEPN peuvent être utilisés pour remplacer le logo par défaut de l'application. Les intégrer dans le style de l'interface n'est pas évident avec des logos très variés.

L'idée de transformer les images pour obtenir un ratio universel n'a pas été retenu : celà implique l'ajout automatique de marges (verticales ou horizontales selon les cas). Mais même si ces marges peuvent être transparentes, il est dommage de ne pas pouvoir décider de l'alignement des logos dans la CSS des thèmes (ils seraient alors systématiquement centrés, alors qu'une CSS pourrait préférer un autre alignement qui lui serait plus adapté).

De plus le redimensionnement des images par les CSS est également écarté : il est souvent inesthétique. Le navigateur ne pratique généralement pas d'anti-aliasing : dès qu'une image n'est pas affiché à sa taille réelle, le rendu n'est souvent pas propre, grossièrement pixélisé, dénaturé...

De ce fait, pour obtenir un bon rendu des logos, la seule solution est de les afficher à leur taille d'origine. Il est donc tout à fait indiquer de les placer en background dans les CSS (le seul inconvénient de cette technique étant de ne pas pouvoir gérer les dimensions ne nous gène plus). Par contre la taille de la zone doit être défini une fois pour toute, afin que tous les logos soient redimensionnés pour y rentrer.

Les dimensions des logos sont ainsi fixées à 180 x 140 pixels.
Les images sont redimensionnées pour rentrer dans ce cadre, sans le dépasser, en gardant leur ratio d'origine, sans ajout de marges.
Les CSS des thèmes ne sont pas sensées modifier la taille des logos, mais se conformer à l'affichage de cet espace de 180x140. Elles peuvent par contre décider de l'alignement vertical et horizontal des logos dans cette zone.

Mis à jour par Grégory MARIGOT - TEICEE il y a presque 14 ans

  • Statut changé de In Progress à Résolu
  • % réalisé changé de 90 à 100

Modifications publiées sur le svn (r401) :

Quelques rectifications :
  • Ajout du support alpha dans myPict, permettant de redimensionner les images PNG en conservant la couche.
  • Correction sur la tâche de redimensionnement des logos des GEPN.

Modifications publiées sur le svn (r402) :

Une amélioration dans la génération de galeries d'images via MyPropelBehaviorUploads : un mode 'strict' est ajouté à la méthode getUploadImageGallery($strict=true).
Activé par défaut, il vérifie que les fichiers existent bien avant de les lister pour la galerie d'image. Celà peut être particulièrement utile appliqué que les vignettes, celle-ci pouvant être attendue mais sa génération ayant échouée (ex: format d'image source non exploitable).
Désactiver ce mode permet d'économiser plusieurs tests s'ils sont jugés superflus (confiance en la présence des images attendues ou acceptation d'absences en cas d'erreurs lors du rendu des galeries).

Modifications publiées sur le svn (r403) :

La méthode de redimensionnement employée pour la création des vignettes via MyPropelBehaviorUploads devient paramétrable avec la propriété $thumb_mode. Elle doit correspondre à un nom de la méthode de myPict (par défaut 'fitTo', autres valeurs possibles 'maxTo' ou 'resize').

Le cas des logos des GEPN ne fait plus exception : au lieu de redimensionner le logo lui-même c'est une vignette qui est créée. Ceci permet de conserver l'image d'origine (particulièrement utile s'il faut regénérer sans perte). Ceci simplifie son traitement qui devient plus générique, seul la classe myUser est à adapter pour utiliser la vignette au lieu de l'image à l'initialisation de l'environement de l'interface.

Enfin si la méthode de redimensionnement des vignettes est laissé par défaut à 'fitTo' (l'image est zoomée si elle est plus petite que le cadre donné), elle est changée en 'maxTo' pour les logos GEPN (un petit logo restera tel quel).

Mis à jour par Grégory MARIGOT - TEICEE il y a plus de 13 ans

  • Statut changé de Résolu à Fermé
Actions

Formats disponibles : Atom PDF