Rubrique Machin Truc Net

L’art est difficile

La critique est aisée, mais l’art est difficile comme a dit Destouches, comédien et auteur dramatique. C’est la première réflexion qui nous est venue à l’esprit lorsqu’il nous a fallu automatiser la découpe d’une image.
Etablissons déjà le contexte : utilisant le logiciel SPIP pour publier et maintenir le site Brindefolie, nous avons décidé de changer la présentation de la première page dite aussi page index. Deux possibilités : soit repartir d’une page blanche, soit la changer progressivement, par petites touches en gardant bien sûr une certaine homogénéité. C’est la deuxième solution que nous avons choisie en sachant que avons un cahier des charges à respecter, dont principalement :
- homogénéité dans la charte graphique comme nous disions plus haut,
- chercher une automatisation du traitement des images la plus rapide mais aussi la plus simple possible.
Ceci étant posé, nous avons décidé de nous attaquer à une attribution d’images différentes en entête de chaque article publié en page index. Le côté automatisation étant ici un affichage prédéfini de la taille, une découpe en arrondi des angles, effectuée en tache de fond, sans passage par un logiciel de dessin et de retouche. Nous savions que le logiciel SPIP était capable de tout, à nous de vérifier s’il le pouvait justement et comment avec quel résultat à la clé.

Une partie de la page avant modification

Les images d’entêtes des nouveaux articles avant modification en page index


Jusqu’à présent nous utilisions une image spécifique pour chaque entête d’article. Spécifique car toujours identique suivant la rubrique d’où était "tiré" l’article pour apparaitre dans la page index. Chaque image avait été travaillée auparavant via deux logiciels. Fireworks CS3 (version "9.x.x") dont nous avons une utilisation fréquente depuis de nombreuses années, pour le traitement des couleurs et Picturesque pour les arrondis. Chaque image correspondant à une rubrique/sous rubriques. Les images étant en quelque sorte bloquées, il pouvait ainsi arriver que l’on retrouve trois fois de suite, ou presque, la même image en page index si par exemple, les trois derniers articles venaient de la même rubrique. Pas assez attrayant mais surtout pas assez accrocheur pour le lecteur pouvant se perdre par cette répétition.

<LOGO_RUBRIQUE_SURVOL><a href="#URL_ARTICLE">#LOGO_RUBRIQUE_SURVOL</a></LOGO_RUBRIQUE_SURVOL>

Maintenant détaillons la boucle permettant un tel affichage. L’apparition de l’image correspondante à l’article publié en page index s’effectuait par le biais de la commande #LOGO_RUBRIQUE_SURVOL. En ce qui concerne la ligne de commande #LOGO_RUBRIQUE permettant l’activation de la ligne de commande précédente, on la retrouve dans la page que vous lisez et permet l’affichage du bandeau haut par le biais de cette commande [(#LOGO_RUBRIQUE_NORMAL)] faisant partie de cette boucle <BOUCLE_banniere(RUBRIQUES){id_rubrique}>[(#LOGO_RUBRIQUE_NORMAL)]</BOUCLE_banniere> du fichier article.html

Arrivé ici à ce moment de lecture, soit vous avez quitté cette page avec un violent mal de tête arrivant par le quart nord-est de votre bulbe rachidien, soit ayant tout compris vous décidé de poursuivre la lecture de cet article car vous le trouvez fort passionnant. Bref un article comme on aimerait en lire plus souvent.
Vous continuez la lecture, bravo à vous, nous vous en félicitons. Abordons maintenant la deuxième partie le coeur léger car il s’agit là de ne pas avoir la main lourde sur la gamme des noirs et des blancs.

Dans notre cas, comme vous avez pu le remarquer, l’image découpée avait cette forme.

Image d'une des rubriques
Il nous faut tout d’abord un masque de même grandeur avec le même arrondi. Dans notre cas, il s’agit d’une image de 470/175 pixels. Maintenant abordons le juste dosage entre le noir et le blanc permettant à notre matrice de garder au maximum les gamma de notre image après traitement. Car gardons en mémoire : tout ce qui est colorisé sera gardé après traitement. Dans notre cas, le code hexa a été le suivant après plusieurs réglages (mais il peut avoir sûrement mieux) : #AAAAAA, donnant ceci :

Image de la matrice avant les arrondis
Il s’agit de reprendre cette image et d’effectuer les arrondis comme on le le désire. On traite avec le logiciel qui va bien et voilà le résultat :

Image après avoir appliqué les arrondis
Voilà c’est fini ? Presque ! Signalons quand même que suivant vos besoins cette matrice peut avoir la forme que vous désirez appliquer à vos images pour les articles de telle ou telle rubrique. Il vous suffira dans ce cas, de garder le même nom de l’image en y ajoutant par exemple le numéro de la rubrique auquel les articles qu’elle va traiter sont attribués. Par exemple image_14 pour les articles de la rubrique 14.

Après transfert de la matrice dans le répertoire IMG de SPIP, abordons le contenu de la ligne de commande permettant le traitement automatisé de l’image et plus encore.

<LOGO_RUBRIQUE_SURVOL><a href="#URL_ARTICLE">[(#LOGO_ARTICLE|image_masque{IMG/decoupe1.png}|image_recadre{470,175}|sinon {#LOGO_RUBRIQUE_SURVOL})]</a></LOGO_RUBRIQUE_SURVOL>


La partie nous intéressant est bien sûr celle-ci [(#LOGO_ARTICLE|image_masque{IMG/decoupe1.png}|image_recadre{470,175}|sinon {#LOGO_RUBRIQUE_SURVOL})].
Décortiquons celle-ci afin de bien comprendre comment va s’effectuer le traitement de l’image. Après avoir indiqué à SPIP qu’il s’agit de retravailler le logo de l’article qui sera téléchargé après rédaction et validation de celui-ci par le code image_masque, nous lui indiquons le nom du masque avec lequel il va travailler, en l’occurence ici {IMG/decoupe1.png}. Par cet ajout image_recadre{470,175} nous indiquons la taille de l’image s’affichant. Mais nous voulons allez plus loin, car ne l’oublions pas l’homme peut parfois oublier ou se tromper, ce qui n’est pas le cas pour une machine sauf à lui indiquer un mauvais code. Il s’agit pour nous dans le cas présent de proposer une image de substitution au cas où nous aurions oublié de charger celle pour l’article. Pour ce faire il nous suffit en quelque sorte de proposer ce qui ici existe déjà à savoir {#LOGO_RUBRIQUE_SURVOL} (voir plus haut). Comme SPIP est en quelque sorte un automate il s’agira de lui dire "Si tu ne trouves pas l’image du fichier Article, tu iras chercher telle image à telle adresse", ce qui donne sinon {#LOGO_RUBRIQUE_SURVOL}. Est-ce que tout cela fonctionne ? Nous vous invitons à vous rendre à la page accueil du site et vérifiez par vous même.

Une image complète avant traitement. Taille réelle de l'image dont seule la partie centrale apparaitra après traitement effectué par SPIP .

Taille réelle de l’image dont seule la partie centrale apparaitra après traitement effectué par SPIP (voir plus bas)



Image avant traitement automatisé

Image téléchargée avant traitement en taille réelle


Image après traitement automatisé par SPIP

Image après traitement lors de son affichage


Dernier point et non des moindres : le choix de l’image qui va être retravaillée. N’oubliez pas que c’est un automate qui va traiter l’image. Il ne choisit pas telle ou telle partie. De l’expérience que nous en tirons, sachez qu’il affiche de manière générale le milieu de celle-ci. C’est donc à vous de le guider en quelque sorte. Pour ce faire à vous d’agrandir l’image, sélectionner la partie qui vous intéresse et après enregistrement, de la télécharger dans SPIP. Bien sûr ceci ne peut s’appliquer que s’il s’agit d’une image servant de logo à un article. Dans le cadre d’une image de presse, il vous faudra plus passer par DOCUMENTS

Une des images dont les bords arrondis n'apparaissant pas distinctement

Les bords de cette image sont arrondis, mais ne sont pas très visibles. Cela est dû à la presque concordance de la couleur des bords de l’image et du fond.


Enfin nous vous conseillons si vous avez décidez comme nous d’avoir un fond blanc, de ne pas avoir les bords de votre image avant traitement se rapprochant de la couleur de fond, sinon les arrondis ne seront (presque) pas visibles.

Nous n’avons abordé ici qu’une toute petite partie des possibilités offertes par SPIP pour le traitement automatisé des images. Nous n’avons parlé que ce qui nous intéressait mais nous vous invitons vivement si vous désirez avoir d’autres informations encore plus complètes, de parcourir, que dis-je d’apprendre par coeur cet article intitulé tout simplement "Traitement automatisé des images". Bonne lecture et n’hésitez pas à nous poser vos questions dans le forum de l’article si un point de celui-ci ne vous semble pas assez clair.

Ayant prit un train de sénateur, n’attendez pas le prochain article demain matin à la même heure. Bien au contraire. Mais c’est promit : à chaque changement (notable) du site nous viendrons en "causer" ici avec notre retour d’expérience bien sûr. Petit rappel quand même : vous avez bien entendu la possibilité de vous abonner à l’actualité du site soit par le biais du fil RSS soit par le biais d’iCal qui ira loger directement l’information sur votre smartphone si vous vous abonnez. Vous trouverez les logos de ces deux fils d’abonnements sur la partie droite du site. En vous abonnant, vous êtes sûr d’être informé en temps réel de la mise en ligne du prochain article.



Par laurent, publié le lundi 6 mars 2017
Les Tags de l'article "L’art est difficile" :