Une image au hasard sur la page d’accueil

Une image sur la page d’accueil, renouvellée parfois. Quand on clique sur l’image, la grande version, plus belle (et plus longue à venir) s’affiche avec sa légende.

On veut une image sur la page d’accueil.

-  Cette image sera nécessairement petite, temps de chargement oblige. On la veut donc cliquable vers une grande image qui s’affichera pleinement avec sa légende et ses mentions techniques.
-  On veut que la photo soit renouvelée chaque jour, au hasard parmi le stock dispo.
-  On veut ajouter, retirer ou désactiver des photos par l’interface SPIP normale.

Le résultat visible sur ce site.

Le principe est « tout SPIP » : chaque image est stockée dans le logo d’un article marqué par le mot clé “ImageUne”. Cet article discute d’abord les aspects utilisateurs : comment définir un format d’image et comment ajouter les photos dans SPIP. Puis je décris les aspects administrateurs : la boucle du squelette et la feuille de style.

Définir un format d’image

Le plus long est de trouver les images et les travailler graphiquement. En effet, extraire une petite photo à partir d’une grande est une véritable étape de création artistique.

Cela ne saurait se limiter à une simple réduction d’échelle qui écraserait tout les détails. Il ne faut pas non plus tomber dans le piège inverse qui consiste à simplement rogner l’image initiale. Si on veut arriver à une image de taille donnée, disons 150x200 pixels, mais que le sujet intéressant est dans une zone de 300x400, alors on doit recadrer et réduire.

Pour permettre ce travail, il est nécessaire de bien spécifier la contrainte technique de cadrage et de résolution. A titre d’exemple, sur notre site la petite image sur la page d’accueil doit suivre le format suivant :

-  Au plus 20k de taille. Plus ralentirait trop l’affichage de la page.
-  Exactement 150 pixels de haut et au moins 640 pixels de large (charte graphique oblige).
-  Intérêt en rapport avec les thèmes de recherche (scientifique).
-  Accord visuel avec les tons du site (orange et gris).
-  Droits intellectuel et légende sous contrôle (on pioche dans la banque d’images maison officielle).
-  C’est l’extrait d’une photo intègre (vous pouvez préférer un montage composite, un dessin...).

Si vous mettez en page à résolution fixe, disons 800x600 c’est déjà pas mal de contraintes. Sur un site mis en page en 100% largeur flexible il faut aussi penser que.

-  La largeur d’image doit être de préférence 1000 pixels sinon les utilisateurs qui affichent le site en grand large verront un blanc inesthétique à droite de la photo.
-  Le sujet de la photo doit être lisible dans sa moitié de gauche, sinon les utilisateurs qui affichent en petite largeur ne verront pas tout.

A l’issue de cette étape, nous disposons donc de quelques images pour lesquelles on a les éléments suivants :
-  Fichier original de la grande image, par exemple 700x512 au format JPEG
-  Fichier de la petite image extraite du précédent et d’une taille réduite (tant en Ko qu’en pixels).
-  Mentions technico-légales (Par exemple : Photographe DESBOIS, Michel, Copyright CNRS Photothèque/ESA/Météosat, Références 1987D00039, bla bla bla)
-  Titre (Par exemple : Coucher du soleil)
-  Légende (Par exemple : Deuxième campagne océanographique (POMME 1) du programme POMME (Programme Océan Multidisciplinaire Méso Echelle) : l’objectif de cette campagne, qui s’est déroulée de janvier à mai 2001 entre les Açores et la péninsule ibérique, est de suivre le réchauffement des couches de surface et les différentes étapes de production de biomasse et son impact sur le bilan de carbone dans l’océan)

Ajouter les photos dans la base

Maintenant il faut insérer les photos dans le site. Pour cela nous avons créé une rubrique appelée “Photos pour la une”. Et nous avons créé un groupe de mots clé nommé “Administratif”, et dans ce groupe un mot clé “ImageUne”.

Ainsi n’importe quel rédacteur peut proposer une image en procèdant ainsi :

  1. Créer un nouvel article avec pour texte les mentions technico-légales. Elles peuvent être formattées avec un tableau spip (on utilise les | pour séparer les colonnes). Valider l’article.
  2. Uploader la petite image extraite en tant que “Logo de l’article”.
  3. Pour télécharger la photo complète, “Modifier l’article” puis “Ajouter une image”. Titrer et légender dans le champs prévus à cet effet sous l’image.
  4. Remarquer que SPIP propose, sous la photo, une balise <docXXX|centrer>. Recopier ce fragment dans le champ “chapeau” de l’article. Valider.
  5. Attribuer le mot clé Administratif “ImageUne” à l’article. Valider.

Il s’agit ensuite de valider l’article en ligne, puis de recalculer la page d’accueil jusqu’à ce que, par chance, la nouvelle image s’affiche.

LA boucle

Il s’agit d’afficher le logo d’un article choisit au hasard parmi ceux qui portent le mot clé “ImageDeUne”. La rotation des images sera automatique, à chaque fois que la page est recalculée. La boucle SPIP est :

<BOUCLE_photo(ARTICLES){titre_mot=ImageUne}{par hasard}{0,1}>
<div id="bandeUne">
<div id="rectanglePhotoUne" style="background-image: url('IMG/[(#LOGO_ARTICLE|fi
chier)]')">
<a href="#URL_ARTICLE" title="Vers l&eacute;gende"></a>
</div>
</div>
</BOUCLE_photo>

Pour que l’image s’ouvre dans une nouvelle fenêtre, il suffirait d’ajouter target = "blank" dans la balise a après le href et le title. Je discute plus bas pourquoi il y a deux div imbriqués.

Les styles

Il ne faut pas afficher le logo quand on affiche l’article lui-même, sinon l’utilisateur va voir à la fois la grande image et la petite. Comme on est pas vraiment intéressé par le titre et la date non plus, on peut par exemple desactiver l’affichage du cartouche complet avec ce style. J’explique dans Un mot clé pour cacher certains éléments (logo, encart...) la solution mise en oeuvre chez nous.

Il faut aussi positionner et dimensionner correctement l’image sur la page d’accueil. Si l’image a une taille fixe, c’est facile. Si on veut que le navigateur rogne dynamiquement l’image juste à la largeur de la fenêtre, c’est plus technique.

La position désirée de l’image est à 152 pixels du bord gauche, et à 63 pixels du haut de la page. La taille désirée est exactement 150 pixels en hauteur. En largeur (c’est là que ça devient technique) on veut toute l’image si elle tient dans la fenêtre, sinon on la veut rognée à droite pour tenir juste dans la fenêtre sans créer de barre de défilement horizontale.

Il n’est pas question de réduire l’échelle de l’image pour tenir dans la largeur, puisque cela réduirait aussi la hauteur. Il faut rogner (clipper en franglais) l’image à 100% - 150px, et pour ça je n’ai trouvé comme méthode que deux <div> emboités. D’où le style :

div#bandeUne { position: absolute; top: 63px; left: 0; width: 100% }
div#rectanglePhotoUne { height: 150px; margin-left: 152px ; background-repeat: no-repeat}
div#bandeUne a {float: left; height: 150px; width: 100% }

Remarque 1 : Le float: left est utilisé comme synonyme pour display: block.

Remarque 2 : Les objets positionnés dans la zone de 152 pixels sise à gauche de l’image peuvent être masqués si on n’y prend garde.

Dernière modification de cette page le 29 avril 2007

Discussion

Une discussion

  • Ca y est, j’ai trouvé une méthode qui évite deux divs emboitées : overflow: hidden. La boucle SPIP se simplifie :

    <div class="clear"><!--bug IE--></div>
    <BOUCLE_photo(ARTICLES){titre_mot=ImageUne}{par hasard}{0,1}>
    <a id="bandeUne" href="#URL_ARTICLE" title="Vers l&eacute;gende"><img src="#URL_
    SITE_SPIP/IMG/[(#LOGO_ARTICLE|fichier)]" alt="#TITRE"/></a>
    </BOUCLE_photo>

    et la feuille de style aussi :

    a#bandeUne { display: block; margin-top: 80px; margin-left: 170px; height: 150px ; overflow: hidden; border: solid #F09415 1px}
    
    div.clear {clear: both; text-align: right; font-size: smaller}

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom