Une image aléatoire en page d’accueil (ou ailleurs)

Affichage d’une image aléatoire provenant de toutes les images du site et renvoyant sur l’article d’origine de l’image.

Objectifs

Gérant de nombreux sites d’écoles et d’associations utilisant de nombreuses images j’ai toujours agrémenté mes pages d’accueil de photo pour les enjoliver. Puis rapidement est venue la nécessité d’avoir une image aléatoire puisée dans toutes les images du site pour dynamiser la page d’accueil et permettre une navigation différents.

Sous SPIP 1.8 j’ai utilisé une contrib trouvé sur evaweb une image aléatoire mais hélas inopérante sous SPIP 1.9.

Un peu de technique

Mes connaissance en programmation étant un peu limitée voir quasi nulle je suis allé butiner sur le web pour essayer d’adapter cette ancienne contrib d’evaweb et j’ai trouvé sur SPIP-Contrib un article très intéressant une planche de contact des images du site que j’ai légèrement modifié pour n’afficher qu’une seule image et la transformer en noisette

Mise en place

Il suffit simplement de copier le fichier inc-photo-aleatoire.html dans votre dossier squelette puis d’insérer dans votre squelette à l’endroit désiré le code suivant : <INCLURE{fond=inc-photo-aleatoire}>

Noisette d’image aléatoire

qui contient le code suivant

<BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,1}>    
<BOUCLE_chercheLienArticle(SPIP_DOCUMENTS_ARTICLES){id_document}>
#SET{current_id_art, #ID_ARTICLE}</BOUCLE_chercheLienArticle>
<BOUCLE_vignetteArticle(ARTICLES){id_article=#GET{current_id_art}}{0,1}>
[<a href="#URL_ARTICLE">(#FICHIER|reduire_image{150})</a>]</BOUCLE_vignetteArticle>
</BOUCLE_docuImg>

Vous pouvez modifier la taille de l’image en changeant la valeur (150) du filtre réduire_image dans le code : [<a href="#URL_ARTICLE">(#FICHIER|reduire_image{150})</a>]

un exemple sous spip 1.9.2a

Mise à jour

-  02/04/08 : portage en plugin en utilisant le plugin cycle jquery
téléchargeable sur la zone en attendant la documentation

-  07/08/08 : plugin téléchargeable ici et un petit exemple du plugin en action

updated on 2 October 2019

Discussion

26 discussions

  • 2

    Ou plutôt voici LA solution avec un href qui pointe vers l’article contenant le document

    <BOUCLE_doc_image_principale(DOCUMENTS){par hasard} {extension==jpg} {mode=image} {doublons} {0,1}>
    
                    <BOUCLE_chercheLienArticle(ARTICLES ){id_document}>
    #SET{current_id_art, #ID_ARTICLE}
    
                    <a href="#URL_ARTICLE"><img src="IMG/[(#FICHIER)]" style="width:250px;" /></a>
    
                    </BOUCLE_chercheLienArticle>
    </BOUCLE_doc_image_principale>

    Testé sur SPIP 2.0

    • Merci pour le code fort utile.
      Néanmoins j’ai un problème.
      Ma page où je veux insérer le code est la rubrique=1.html
      Les images s’affichent mais il va les cherché dans une seul article, et il n’a rien à voir avec rubrique=1.html

      J’ai donc besoin de la boucle pour afficher les images en documents de tout le site.

      Merci d’avance.

    • L’ image du jour



      J’ai trouvé!
      Juste changer mode=image par mode=document
      Yupi!

    Reply to this message

  • Voici la solution :

    <BOUCLE_imagealeatoire(DOCUMENTS) {par hasard} {mode=image} {doublons} {0,1}>
            <h2>L'image du jour</h2>
            <a href="#URL_ARTICLE"><img src="[(#FICHIER)]" /></a>
    </BOUCLE_imagealeatoire>

    Reply to this message

  • Ce système fort agréable à mon goût ne marche pas sur spip 2.0

    quelqu’un aurai la solution?

    Merci

    JB

    Reply to this message

  • journal la mée

    Bonjour

    Dans spip-zone je trouve plein de choses
    mais comment s’appelle le phgin qui correspond à une image aléatoire ?

    merci

    Reply to this message

  • Bonjour et bravo pour le plugin... Mais il semble que çà ne fonctionne pas sous IE et Opera.... En effet, les images s’affichent les unes en dessous des autres... Aucun effet...
    JS est pourtant activé....
    Bizarre. Bizarre.
    Si quelqu’un a une idée, elle sera la bienvenue.

    Reply to this message

  • 10

    Ben oui comment s’appelle-t-il sur la zone ?

    • c’est le plugin image-cycle http://zone.spip.org/trac/spip-zone/browser/_plugins_/_test_/image-cycle

      il est fonctionnel, tu peux le voir en action ici malheureusement le passage par la moulinette du plugin fait sauter la compatibilité avec ie. Je cherche un peu mais je m’oriente plutôt vers un autre script (le plugin interface) plus puissant et posant moins de problème, mais les possibilités étant plus grande, le développement est plus long.

      pour le plugin image cycle le problème avec ie doit venir du css mais je vois pas trop ou, s’il y a des amateur il n’y a pas de soucis

    • Merci pour l’info je vais voir çà ... si je trouve une piste....

    • cool j’ai trouvé, juste un problème de réglage de dimension du bloc, je mets ça à jour sur la zone et je m’occupe de la doc

    • Super !! juste une question... l’appel dans le suqellette se fait sous quelle forme ?

    • c’est vrai qu’il n’y a pas encore de doc :-)
      l’appel se fait par une noisette<INCLURE{fond=image-cycle}> ou <INCLURE{fond=image-cycle-bis}> à placer dans ton squelette.

      comme il y a deux noisettes et que chacune possède sa propre interface de configuration, tu peux en mettre 2 différentes sur ton site. J’ai pas testé deux anim sur une même page mais ça risque de pas passer pour le moment , à tester!

    • Merci.... c’est hélas ce que j’ai fait sans résultat.... oups !!!

    • rectif cycle-bis fonctionne mais pas cycle !! oups !!

    • ha faut que je regarde ça de plus près, ça doit être une faute d’inattention pendant la recopie!

    • Xavier

      cf mon message plus haut
      il manque l’appel de form dans cycle

    • ça ne risquait pas de marcher, j’avais laissé trainer plein de bug, ça devrait mieux fonctionner maintenant, je viens d’envoyer ça sur la zone!

    Reply to this message

  • journal la mée

    Merci, j’ai réussi à utiliser cette méthode. Je n’ai pas su utiliser <inclure(fond= ...etc > car je ne suis pas assez douée pour ça. Mais j’ai mis la boucle que vous avez donnée, directement à l’endroit où je voulais des images aléatoires.

    Et puis, au lieu de (0,1) j’ai mis (0.25) comme ça j’ai 25 images aléatoires
    et j’ai ajouté : <div>&nbsp;</div> juste après </BOUCLE_chercheLienArticle> comme ça j’ai un espace entre les images.

    enfin j’ai mis reduire_image{180}, au lieu de 150 car il m’arrivait d’avoir deux images côte à côte.

    Ce sont des petits réglages faciles.

    Merci de vos explications de base que je n’aurais jamais su fabriquer !

    Reply to this message

  • 6

    SVP chef !! tenez nous au courant de l’évolution de ce plugin bien sympa !!!

    • bonne nouvelle après tous les test, chez moi c’est parfaitement fonctionnel
      pour résumer :
      -  compatibilité ie et firefox
      -  les deux noisettes sont fonctionnelles avec tous les réglages

      je viens de mettre à jour sur la zone la dernière correction de bug donc ya plus qu’a faire tourner

    • Bravo çà baigne !!

      Pourrait-on ? pourrais tu ? faire en sorte que l’on puisse sélectionner une rubrique plutôt que soit le site, soit un article !!!

      En fait pour présenter QUE des bouquins ce serait une issue sympa ...

      Je sais je gonfle, mais comme j’ai pris de mauvaises habitudes !!! :-D

    • Bonjour, j’essais le plugin et ça ne marche pas , ni ei ni firefox, cet un bon travail, mais j’ai des problèmes d’affichage des images, ce-à dire, mes images ne s’affichant pas, j’ai spip 1.9.2d , j’essais de mettre des images dans l’accueil, je voudrais utiliser ce plugin car il est justement ce que j’ai besoin.

    • As-tu activé la génération automatique de miniature dans la configuration de spip. et si oui avec quelques technologie.
      peux tu également me donner un lien vers ton site que je regarde le code source.
      quels squelettes utilises-tu (dist, skel perso ou skel tierce trouvé sur contrib), il peut y avoir des soucis dans les chemins d’accès.
      dernières questions
      comment as tu télécharger le plugin :par svn ou fichier zip
      dans quel répertoire se trouve le plugin?

    • oups j’ai zappé un message surement un acte manqué, parce qu’a m’a connaissance il n’y a pas moyen de faire ça simplement et de manière générique dans spip pour le moment , je te renvois à un message plus bas, je pense que tu dois pouvoir te bricoler une boucle cibler sur la rubrique en question et de travailler avec le critère parent ( enfin il me semble)

    • Merci bcp, j’ai reussi à faire marché le plug ( ei et firefox), en effect c’ t les miniatures, ce plugin est justement ce qui me fallait, mais il y a quand même des p’tits bug encore. et la 2 éme. noisette cycle-bis ne marche pas :(

      J’utilise le skl. Alternatives (personnalisé), spip 1.9.2d et je téléchargé le plug par zip.Le lien: www.grafis.fr.
      Bon boulot ;)

    Reply to this message

  • 4
    tipou13

    Bonjour. Pouvez vous m’aidez à trouver comment faire pour que je puisse aficher de manière aléatoire les images d’une ou deux rubriques bien définies? Je vous remercie.
    ibigdeze@hotmail.com

    • a priori il suffit de préciser dans la première boucle que tu veux limiter la recherche à une rubrique <BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,1}> en précisant les numéros de rubrique.
      voir spip.net pour la toute la syntaxe de limitation des boucles (rubrique comparaison,égalité)

      essaie la boucle <BOUCLE_docuImg(DOCUMENTS){id_rubrique=x,y,z}{doublons}{par hasard}{extension==jpg|png|gif}{0,1}> en remplacement x,y et z par les numéros de tes rubriques

    • J’ai essayé ce code pour limiter à 2 rubriques, mais sans succès.
      J’ai aussi essayé avec id_rubrique==^(x|y|z)$ mais ça ne marche pas non plus.
      Est-ce que quelqu’un a réussi à faire fonctionner ce script sur quelques rubriques seulement ?

    • en fait je pense que le problème est lié à la définition des rubriques par spip.
      En l’état, la fait d’utiliser un critère rubrique ne s’appliquera que dans la rubrique et pas dans les sous-rubriques, ce qui souvent ne ressort pas d’images, les articles étant le plus souvent rangé dans les sous-rubriques.

      à priori je vois deux pistes pour contourner légèrement le problème :
      -  si c’est possible, utiliser le critère secteur qui lui retournera aussi le contenu des sous-rubriques {id_secteur IN 5,6,12}
      -  ou alors bricoler une boucle retournant les documents des sous rubriques, je pense qu’il suffit de s’inspirer de la boucle qui retourne la liste des sous rubriques d’une rubrique (voir dans la dist le squelette rubrique, affichage du plan de la rubrique)

    • Merci. Je vais essayer et je vous donnerai une suite...cependant en ce moment je suis en missions en Afrique et pas trop le temps....mais très bientôt.

    Reply to this message

  • 5
    Xavier

    Attention il manque l’appel de form dans le premier fichier de config
    fonds/cfg_imagecycle.html
    regarder dans le second fchier de config et copiez-le:

    (#ENV_cfg_
    • Xavier

      Désolé oubli de la balise <code>, je recommence:
      Attention il manque l’appel de form dans le premier fichier de config
      fonds/cfg_imagecycle.html
      regarder dans le second fichier de config et copiez-le:

      <form method="post" action="#SELF"><div>[(#ENV{_cfg_}|form_hidden)]</div>
    • c’est bon c’est corrigé, j’espère qu’il ne reste plus de bug

    • Xavier

      Ben désolé, ici ça ne marche pas du tout :-(
      d’après ce que j’ai pu voir rapido (risque d’erreur):
      -  je suis sous firefox et le code affiché semble fait pour InternetExplorer
      -  il faut tout paramétrer? vitesses et délai d’affichage non paramétrés provoquent une erreur javascript
      -  si on ne veut qu’une seule image... ça affiche un artefact: “ou” et rien d’autre.

      et avant que j’oublie: merci tout de même pour ce travail très utile (sans ironie hein)

    • -  aucun problème pour firefox, c’est prévu pour, et compatible accessoirement avec ie (il est encore majoritaire cet enf&"’)
      -  il est impératif de régler tous les paramètres sinon ça retourne des paramètres vides dans le code js d’où l’erreur.
      -  en fait la différence entre le plugin et la contrib c’est justement l’affichage de plusieurs image, pour n’avoir qu’une image deux solutions ou se retourner vers la contrib ou virer dans le squelette de la noisette tous les paramètres js

    • Ben moi j’ai toujours le 1 qui ne fonctionne pas... et le bis qui est ok !!

      Comme quoi il faut toujours bisser !!! :-D

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom