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

Publié le : 31 mai 2007 – Dernière modification le 21 décembre 2021 – par christophe vallois – 77 commentaires

1
2
3
4
5
7 votes
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 là

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

26 discussions

  • 11

    Super contrib, merci !

    comment centrer l’image... dans une div...

    désolé, c assez dur pour moi : mon site-test

    • J’ai donné une meilleure dimension aux images, ça passe mieux ...

      ... comment faire pour que cela se recharge avec une photo différente toutes les 5 secondes ?
      merci de l’aide :)

    • christophe vallois

      c’est très certainement possible, mais pas avec cette noisette. je pense qu’il faudrait utiliser du flash ou une autre technologie. il doit y avoir possibilité avec jquery de faire quelques chose mais cela dépasse mes connaissances.
      cependant je te conseille d’aller voir ces deux articles peut être y trouveras tu ton bonheur :
      -  plugin jpg rotator
      -  plugin splickrbox

    • ManuDevil

      Avec l’utilisation de Jquery, c’est assez simple. Il faut installer le pluginJquery Cycle et la paramétrer de cette façon :

      Dans l’en-tête, dans le <head> de la page :

      [(#REM) Appel Javascript supplementaire ]
<script language="javascript" src="squelettes/javascript/jquery.cycle.all.pack.js" type="text/javascript"></script>

      et aussi :

      [(#REM) Javascript interne, JQuery ]
<script language="javascript" type="text/javascript">
<!--
jQuery(document).ready(function() {
	
	// Plugin Cycle Image au hasard
   $('#listeImgAlea').cycle({ 
		fx:    'fade',
		speed:    1500, 
		timeout:  5500,
		random: 1,
		pause:  1
	});


});
-->
</script>

      Ensuite, dans le corps de la page, ou dans une inclusion :

      		[(#REM) Image aléatoire ]
		<B_docuImg>
		<h2 class="menu-titre">Au hasard...</h2>
		<div id="listeImgAlea">	
		<BOUCLE_docuImg(DOCUMENTS){id_article>0}{par hasard}{extension==jpg|png|gif}{0,5}>
		<div class="ImgAlea">
		[<a href="#URL_DOCUMENT" type="#MIME_TYPE">(#LOGO_DOCUMENT||image_reduire{150,0})</a>]		
			<BOUCLE_chercheLienArticle(SPIP_DOCUMENTS_ARTICLES){id_document}>
			#SET{current_id_art, #ID_ARTICLE}
			</BOUCLE_chercheLienArticle>
			<BOUCLE_lienArticle(ARTICLES){id_article=#GET{current_id_art}}{0,5}>
			[<br />dans <a href="#URL_ARTICLE">(#TITRE)</a>]
			</BOUCLE_lienArticle>    
		</div>
		</BOUCLE_docuImg>
		</div><!-- fin listeImgAlea -->
		</B_docuImg>

      Je mets bientôt l’exemple en ligne sur ManuDevil.com.

    • Phil

      J’ai testé ton exemple avec le dernier JQuery Cycle Pugin et j’obtiens l’erreur suivante :

      $(« listeImgAlea »).cycle is not a function

    • ManuDevil, concepteur multimédia

      Il faudrait voir, dans ce cas, sur le site du plugin Cycle, ce qui a changé. Mais ça doit pouvoir s’adapter sans trop de difficulté.

    • christophe vallois

      J’ai commencé à regarder, ça me semble une très bonne évolution pour la noisette, mais je n’arrive pas à activer le javascript, cela m’affiche les 5 photos les unes sous les autres et j’ai pas vu de modif sur le site du plugin cycle.
      Si tu as une piste je suis preneur, je transformerai bien ça en un jolie p’tit plugin

    • Phil

      C’est le problème que j’ai eu.

      Au final j’ai collé les script dans le <head> après la balise <INCLURE{fond=inc-head}>
      J’ai vidé le cache et recalculé ma page et ça fonctionne maintenant.

      Mettre Cycle en plugin c’est plus qu’une très bonne idée, et j’avoue y avoir pensé 2 secondes mais étant une quiche en programmation....

      J’ai regardé 3 secondes CFG qui doit simplifier les choses pour le faire, mais j’ai vite eu un mal de tête...

    • christophe vallois

      idem pour moi, du coup je suis à fond sur le portage en plugin, je devrai mettre une première version sur la zone ce soir.

    • christophe vallois

      aye c’est téléchargeable sur la zone, ça mérite encore quelques corrections mais il est fonctionnel

    • Y’a pas de lien sur un zip...

    • christophe vallois

      pas encore, j’attends de finaliser un peu avant de mettre ça en paquet mais tu peux utiliser svn pour récupérer le plugin

    Répondre à ce message

  • nitnerolf

    Bonjour,

    Je suis un peu novice en la matière et ai vu cette contrib qui fonctionne très bien pour créer un lien aléatoire vers un article.

    Cependant, pour mon site, je souhaite utiliser une image aléatoire en barre de titre, à partir d’une image piochée au hasard dans une répertoire spécifique. Est-ce possible ?

    Merci d’avance

    Répondre à ce message

  • 2

    Juste pour dire merci ! :-)

    • christophe vallois

      et bien merci beaucoup :-)

    • Tout marche bien donc (vu mon message précédent ;-) ) mais si je veux être un peu plus précise et ne veux pas afficher les vignettes mais seulement les images « normales », existe-t-il un truc ?

    Répondre à ce message

  • 4
    Patrick Chêne

    bonjour et merci pour cet article,

    je m’en suis servi pour que les photos de splikbox (carré affichant les 12 dernières images ) fassent un lien vers l’article et non vers le fichier image. Je n’aurai pas trouvé sans cela..j’ai des gros trous de syntaxes.

    dans le site : http://www.saint-ygnan.com

    Pour info, la noisette donne cela :

    #SETcurrent_id_art, #ID_ARTICLE [(#FICHIER|copie_locale|image_masque#ENVmasque,carre-100.png|image_aplatirjpg)]

    [(#COMPTEUR_BOUCLE|Splickr_juste_a_x#ENVcolonnes,3,

    )]
    • Patrick Chêne

      Incapable de mettre le code en entier il n’apparait pas, vous pouvez donc me le demander par mail......

    • bonjour,
      je suis très interessée par le code permettant de faire unluien vers l’article et non vers l’image.Pourriez vous avoir la gentillesse de me le transmettre par mail ?
      avec mes remerciements

    • oui mais vous n’avez pas laissé de mail.....
      ou bien vous me dites comment on laisse un code sur le post, je ne sais pas.

    • Mettre le code dans les balises <code>...</code>

    Répondre à ce message

  • 5
    Flavien

    Bonjour,

    J’ai modifier le code pour seulement afficher les logo des articles.

    <BOUCLE_docuImg(DOCUMENTS){doublons}{par hasard}{extension==jpg|png|gif}{0,4}>    
       <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">(#LOGO_ARTICLE||reduire_image{50})</a>]</BOUCLE_vignetteArticle>
</BOUCLE_docuImg>

    Je souhaiterais afficher seulement les logos des des articles contenus dans une rubrique et la je sèche.

    Merci

    • as tu essayé en spécifiant l’id de la rubrique concernée dans la première boucle :<BOUCLE_docuImg(DOCUMENTS){id_rubrique=x}{doublons}{par hasard}{extension==jpg|png|gif}{0,1}>  ?

    • Flavien

      Oui, j’ai essayé, cela ne me prend pas les logos des articles contenu dans la rubrique.

    • si tu veux n’utiliser que les logos de tes articles et pas les documents je pense que tu serais mieux avec une simple boucle article du genre

      <BOUCLE_truc(ARTICLES){id_rubrique=X}{par hasard}{0,1}>
 [<a href="#URL_ARTICLE">(#LOGO_ARTICLE||reduire_image{50})</a>]
</BOUCLE_truc>

      ou alors essaie de virer le critère{doublon} il est possible que ça parasite avec les logos s’il sont déjà présents sur ta page d’accueil.

    • Flavien

      Merci, la première proposition fonctionne.

      Par contre en virant doublon dans le code d’origine ça ne fonctionne pas.

    • Marc

      Bonjour,

      Est ’il possible d’exclure une rubrique de la recherche ?
      J’ai essayé avec les exclusions indiquées par les forum spip, sans résultats

      Merci

    Répondre à ce message

  • 1
    veric

    Cette contrib’ marche à merveille, merci !

    mais auriez-vous une idée pour que l’image soit redéfinie à chaque nouvelle page ?

    je m’explique : j’ai mis cette noisette dans mon squelette article. mais ainsi l’image est la même pour chaque page, même si elle varie à chaque visite du site... sauf si je désactive le cache...

    merci d’avance !

    é.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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