affichage d'un portfolio

Didier6 · Avril 12, 2009, 10:48

Bonjour à tous,
Je voudrais afficher en page d'accueil de mon site 4 à 5 photos prises au hasard parmi certaines des photos associées aux articles.
J'ai donc plusieurs points à résoudre :
* "au hasard" : je verrai ça plus tard
* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à ça, que je supprimerai de l'affichage dans le site. Il y a sans doute mieux ?
* "je voudrais afficher ..." : j'en suis là : je récupère bien les photos, mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je suis donc allé à la pêche dans article.html, mais ça ne marche que si je mets la balise <a ...; or je ne voudrais pas que mes images en page sommaire soient cliquables. Si je ne mets pas la balise <a et tout ce qui va avec, les images sont en-dessous les unes des autres.
Je n'arrive pas à trouver dans les css ce qui est lié à <a dans ce domaine.
Pour le moment, je mets ça au point en local, vous ne trouverez pas d'exemple de mon problème sur mon site en ligne.
Des idées pour un novice ?
Merci.

Didier
http://scoescrime.fr

Frederic_Moinard · Avril 12, 2009, 11:54

Bonjour,

Didier a écrit :

Bonjour à tous, Je voudrais afficher en page d'accueil de mon site 4
à 5 photos prises au hasard parmi certaines des photos associées aux
articles. J'ai donc plusieurs points à résoudre : * "au hasard" : je
verrai ça plus tard

donc,
{par hasard}

* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à
ça,

"ça" désigne le site, le club, les sprotifs, les photos, les maillots,
les chaussettes ou les adhérents ?
Si "ça" représente les maillots et les chaussettes et qu'ils (les
maillots et les chaussettes, donc) n'apparaissent *que* dans cet article
(numéro XX):
{id_article != XX}

que je supprimerai de l'affichage dans le site. Il y a sans doute
mieux ? * "je voudrais afficher ..." : j'en suis là : je récupère
bien les photos,

comment ?

mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je
suis donc allé à la pêche dans article.html, mais ça

les maillots ?

ne marche

ah non, les chaussettes, d'accord

que si je mets la balise <a ...; or je ne voudrais pas que mes images
en page sommaire soient cliquables. Si je ne mets pas la balise <a et
tout ce qui va avec, les images sont en-dessous les unes des autres. Je n'arrive pas à trouver dans les css

FireFox + FireBug

ce qui est lié à <a dans ce
domaine. Pour le moment, je mets ça au point en local, vous ne
trouverez pas d'exemple de mon problème sur mon site en ligne. Des
idées pour un novice ? Merci.

Il serait pratique d'avoir la boucle qui ne 'marche' pas...

genre (l'article en chaussettes et maillot est le 238, mais on cause de matériel aussi dans le 4):
<B_zimages>
<div style="text-align: center">
<BOUCLE_zimages(DOCUMENTS){id_article != 238,4}{extension IN jpg,gif,png}{par hasard}{0,4}>
[(#FICHIER|image_reduire{200})]
</BOUCLE_zimages>
</div>
</B_zimages>

en se décidant pour 4 ou 5 dans {0,4} (4 ou 5 au hasard, au débotté, je ne vois pas), en remplaçant, bien évidemment, style= par ce qui va bien dans les .css.

Si le "certaines" est plus compliqué, on peut aussi envisager une sélection sur le titre: mettre un titre clair aux photos ('AfficherAuSommaire) et utiliser {titre==^AfficherAuSommaire}
ou
Opter pour un mot-clef sur l'article
{titre_mot=AfficherLesPhotosAuSommaire}

--
hth
Frédéric

Origenius · Avril 12, 2009, 12:22

Bonjour

Je pense qu'il vous faut comprendre un peu plus le fonctionnement des CSS, Cascading Style Sheets. Feuilles de styles en cascade. Le mot important ici, c'est "cascade". Cela veut dire qu'une balise enfant hérite des styles de ses balises parent.
De plus, il y a des styles "inline" qui ne peuvent pas, a priori, prendre de styles de positionnement (tous les styles qui affectent les textes en html dont la balise "a" fait partie) et des styles "bloc" qui sont faits pour être positionnés en hauteur largeur etc (typiquement la balise "div").

Donc, dans votre cas, ce n'est sûrement pas la balise "a" qui doit être positionnée, mais une balise bloc qui l'enveloppe, donc une balise "parent". Il semble que le positionnement que vous recherchez sera obtenu par l'application du style { float: left ; } sur une de ses balises bloc parent.

Si vraiment c'est sur la balise "a" que vous voulez appliquer ce style de positionnement, il vous faut la déclarer comme bloc en lui appliquant les styles suivants : .class a { display: block ; float: left ; } en plus des width, margin et autres s'ils ne sont pas déjà définis dans un style parent ou s'ils doivent être différents.

Origenius

Le 12 avr. 09 à 19:48, Didier a écrit :

Bonjour à tous,
Je voudrais afficher en page d'accueil de mon site 4 à 5 photos prises au hasard parmi certaines des photos associées aux articles.
J'ai donc plusieurs points à résoudre :
* "au hasard" : je verrai ça plus tard
* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à ça, que je supprimerai de l'affichage dans le site. Il y a sans doute mieux ?
* "je voudrais afficher ..." : j'en suis là : je récupère bien les photos, mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je suis donc allé à la pêche dans article.html, mais ça ne marche que si je mets la balise <a ...; or je ne voudrais pas que mes images en page sommaire soient cliquables. Si je ne mets pas la balise <a et tout ce qui va avec, les images sont en-dessous les unes des autres.
Je n'arrive pas à trouver dans les css ce qui est lié à <a dans ce domaine.
Pour le moment, je mets ça au point en local, vous ne trouverez pas d'exemple de mon problème sur mon site en ligne.
Des idées pour un novice ?
Merci.

Didier
http://scoescrime.fr

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip

JPH · Avril 12, 2009, 12:29

Peut-être une autre idée que tu pourrais exploiter,
Et, en reprenant la proposition de fremoin à savoir :
<BOUCLE_zimages(DOCUMENTS){id_article != 238,4}{extension IN
jpg,gif,png}{par hasard}{0,4}>
[(#FICHIER|image_reduire{200})]
</BOUCLE_zimages>

et en admettant que les photos des sportifs (qu'ils portent ou non des chaussettes ou des maillots.. sont réparties, non pas dans un seul article mais dans divers articles,
il serait possible de 'marquer' ces photos en indiquant dans le descriptif de l'image, par exemple : sommaire_sportif
ce qui donnerait pour en extraire 4 au hasard:

<BOUCLE_zimages(DOCUMENTS){mode=image}{descriptif=sommaire_sportif}{par hasard}{0,4}>
[(#FICHIER|image_reduire{200})]
</BOUCLE_zimages>
A+
JPH

<BOUCLE_image_pub_article(DOCUMENTS){id_article}{descriptif=spip_pub}{0,1}>
[<div class="imgcolonne pub"><a href="#URL_ARTICLE" rel="bookmark">(#FICHIER|image_reduire{163,0}|inserer_attribut{alt,#TITRE})</a></div>]
</BOUCLE_image_pub_article>

fremoin a écrit :

Bonjour,

Didier a écrit :

Bonjour à tous, Je voudrais afficher en page d'accueil de mon site 4
à 5 photos prises au hasard parmi certaines des photos associées aux
articles. J'ai donc plusieurs points à résoudre : * "au hasard" : je
verrai ça plus tard

Les critères communs à toutes les boucles - SPIP
donc,
{par hasard}

* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à
ça,

"ça" désigne le site, le club, les sprotifs, les photos, les maillots,
les chaussettes ou les adhérents ?
Si "ça" représente les maillots et les chaussettes et qu'ils (les
maillots et les chaussettes, donc) n'apparaissent *que* dans cet article
(numéro XX):
{id_article != XX}

que je supprimerai de l'affichage dans le site. Il y a sans doute
mieux ? * "je voudrais afficher ..." : j'en suis là : je récupère
bien les photos,

comment ?

mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je
suis donc allé à la pêche dans article.html, mais ça

les maillots ?

ne marche

ah non, les chaussettes, d'accord

que si je mets la balise <a ...; or je ne voudrais pas que mes images
en page sommaire soient cliquables. Si je ne mets pas la balise <a et
tout ce qui va avec, les images sont en-dessous les unes des autres. Je n'arrive pas à trouver dans les css

FireFox + FireBug

ce qui est lié à <a dans ce
domaine. Pour le moment, je mets ça au point en local, vous ne
trouverez pas d'exemple de mon problème sur mon site en ligne. Des
idées pour un novice ? Merci.

Il serait pratique d'avoir la boucle qui ne 'marche' pas...

genre (l'article en chaussettes et maillot est le 238, mais on cause de matériel aussi dans le 4):
<B_zimages>
<div style="text-align: center">
<BOUCLE_zimages(DOCUMENTS){id_article != 238,4}{extension IN jpg,gif,png}{par hasard}{0,4}>
[(#FICHIER|image_reduire{200})]
</BOUCLE_zimages>
</div>
</B_zimages>

en se décidant pour 4 ou 5 dans {0,4} (4 ou 5 au hasard, au débotté, je ne vois pas), en remplaçant, bien évidemment, style= par ce qui va bien dans les .css.

Si le "certaines" est plus compliqué, on peut aussi envisager une sélection sur le titre: mettre un titre clair aux photos ('AfficherAuSommaire) et utiliser {titre==^AfficherAuSommaire}
ou
Opter pour un mot-clef sur l'article
{titre_mot=AfficherLesPhotosAuSommaire}

Didier6 · Avril 12, 2009, 4:53

Origenius a écrit :

Bonjour

Je pense qu'il vous faut comprendre un peu plus le fonctionnement des CSS, Cascading Style Sheets. Feuilles de styles en cascade. Le mot important ici, c'est "cascade". Cela veut dire qu'une balise enfant hérite des styles de ses balises parent.
De plus, il y a des styles "inline" qui ne peuvent pas, a priori, prendre de styles de positionnement (tous les styles qui affectent les textes en html dont la balise "a" fait partie) et des styles "bloc" qui sont faits pour être positionnés en hauteur largeur etc (typiquement la balise "div").

Donc, dans votre cas, ce n'est sûrement pas la balise "a" qui doit être positionnée, mais une balise bloc qui l'enveloppe, donc une balise "parent". Il semble que le positionnement que vous recherchez sera obtenu par l'application du style { float: left ; } sur une de ses balises bloc parent.

Si vraiment c'est sur la balise "a" que vous voulez appliquer ce style de positionnement, il vous faut la déclarer comme bloc en lui appliquant les styles suivants : .class a { display: block ; float: left ; } en plus des width, margin et autres s'ils ne sont pas déjà définis dans un style parent ou s'ils doivent être différents.

Origenius

Le 12 avr. 09 à 19:48, Didier a écrit :

Bonjour à tous,
Je voudrais afficher en page d'accueil de mon site 4 à 5 photos prises au hasard parmi certaines des photos associées aux articles.
J'ai donc plusieurs points à résoudre :
* "au hasard" : je verrai ça plus tard
* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à ça, que je supprimerai de l'affichage dans le site. Il y a sans doute mieux ?
* "je voudrais afficher ..." : j'en suis là : je récupère bien les photos, mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je suis donc allé à la pêche dans article.html, mais ça ne marche que si je mets la balise <a ...; or je ne voudrais pas que mes images en page sommaire soient cliquables. Si je ne mets pas la balise <a et tout ce qui va avec, les images sont en-dessous les unes des autres.
Je n'arrive pas à trouver dans les css ce qui est lié à <a dans ce domaine.
Pour le moment, je mets ça au point en local, vous ne trouverez pas d'exemple de mon problème sur mon site en ligne.
Des idées pour un novice ?
Merci.

Didier
http://scoescrime.fr

_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip

Documentation de SPIP : http://www.spip.net/

irc://irc.freenode.net/spip ou http://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip

Merci à tous pour vos réponses.
Pour le moment, j'ai lié les images que je veux afficher à un article que je devrai filtrer pour tous les autres affichages. Mais ça m'oblige à re-télécharger les images. Donc je retine le coup du descriptif.
Pour Origenius : je cherche justement à ne pas utiliser de balise <a parce que je ne veus pas de lien sur ces images. Mais si je la supprime de ce que j'ai trouvé dans article.html, les images s'affichent les unes au-dessous des autres, alors que je voudrais les avoir côte à côte, comme dans article.html.
Ma question était : pourquoi cet affichage est-il lié à la présence de la balise <a : je ne trouve pas ça dans les css de spip.
Voila ma boucle actuelle :

[(#REM) Photos choisies au hasard dans le répertoire IMG accueil ]
<B_desphotos>
  <h2 class="titre-nouveau">Quelques photos</h2>
  <div id="documents_portfolio_accueil">
  <ul>
  <BOUCLE_desphotos(DOCUMENTS) {id_article==61} {mode=document} {0,4} {doublons}>
[(#LOGO_DOCUMENT||image_reduire{0,100})]
  </BOUCLE_desphotos>
  </ul>
  </div>
</B_desphotos>
<//B_desphotos>

Merci.
Didier.

Didier6 · Avril 12, 2009, 4:58

Didier a écrit :

Bonjour à tous,
Je voudrais afficher en page d'accueil de mon site 4 à 5 photos prises au hasard parmi certaines des photos associées aux articles.
J'ai donc plusieurs points à résoudre :
* "au hasard" : je verrai ça plus tard
* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à ça, que je supprimerai de l'affichage dans le site. Il y a sans doute mieux ?
* "je voudrais afficher ..." : j'en suis là : je récupère bien les photos, mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je suis donc allé à la pêche dans article.html, mais ça ne marche que si je mets la balise <a ...; or je ne voudrais pas que mes images en page sommaire soient cliquables. Si je ne mets pas la balise <a et tout ce qui va avec, les images sont en-dessous les unes des autres.
Je n'arrive pas à trouver dans les css ce qui est lié à <a dans ce domaine.
Pour le moment, je mets ça au point en local, vous ne trouverez pas d'exemple de mon problème sur mon site en ligne.
Des idées pour un novice ?
Merci.

Didier
http://scoescrime.fr

Je me répondes à moi-même : en vous recopiant ma boucle, je me suis aperçu que j'avais des <ul> ... </ul> mais pas de <li> ... </li>, et que les photos s'affichent bien côte à côte.
Honte à moi, hier soir j'avais les <li> ... </li>, et c'est eux qui affichent les photos les unes en dessous des autres, bien entendu !
Mille excuses.
Je poursuis donc mon chemin avec le choix au hasard et le marquage dans le descriptif, en suivznt vos conseils.
Merci encore.
Didier.

Didier6 · Avril 12, 2009, 5:33

Didier a écrit :

Didier a écrit :

Bonjour à tous,
Je voudrais afficher en page d'accueil de mon site 4 à 5 photos prises au hasard parmi certaines des photos associées aux articles.
J'ai donc plusieurs points à résoudre :
* "au hasard" : je verrai ça plus tard
* "parmi certaines des photos" : c'est un site de club sportif, je voudrais afficher des photos de sportifs, pas de maillots ou de chaussettes proposées aux adhérents ! : j'ai fait un article dédié à ça, que je supprimerai de l'affichage dans le site. Il y a sans doute mieux ?
* "je voudrais afficher ..." : j'en suis là : je récupère bien les photos, mais elles s'affichent les une en-dessous des autres, et je les voudrais côte à côte comme le fait si bien Spip dans les articles. Je suis donc allé à la pêche dans article.html, mais ça ne marche que si je mets la balise <a ...; or je ne voudrais pas que mes images en page sommaire soient cliquables. Si je ne mets pas la balise <a et tout ce qui va avec, les images sont en-dessous les unes des autres.
Je n'arrive pas à trouver dans les css ce qui est lié à <a dans ce domaine.
Pour le moment, je mets ça au point en local, vous ne trouverez pas d'exemple de mon problème sur mon site en ligne.
Des idées pour un novice ?
Merci.

Didier
http://scoescrime.fr

Je me répondes à moi-même : en vous recopiant ma boucle, je me suis aperçu que j'avais des <ul> ... </ul> mais pas de <li> ... </li>, et que les photos s'affichent bien côte à côte.
Honte à moi, hier soir j'avais les <li> ... </li>, et c'est eux qui affichent les photos les unes en dessous des autres, bien entendu !
Mille excuses.
Je poursuis donc mon chemin avec le choix au hasard et le marquage dans le descriptif, en suivznt vos conseils.
Merci encore.
Didier.
http://scoescrime.fr

Encore merci à tous, tout marche nickel : par hasard et le critère sur le descriptif.
Avant de passer en ligne, j'a iencore un petit sousci : je n'arrive pas à mettre le texte en "alt". Voici l'intérieur de ma boucle :
[(#FICHIER|image_reduire{0,80}|inserer_attribut{alt,#TITRE})]
J'ai bien mis un titre à mes images.
Merci.
Didier

JPH · Avril 12, 2009, 5:56

C'est bien la bonne syntaxe.
Peut-être vider le cache de SPIP et celui de ton navigateur en local.
JPH

Avant de passer en ligne, j'a iencore un petit sousci : je n'arrive pas à mettre le texte en "alt". Voici l'intérieur de ma boucle :
[(#FICHIER|image_reduire{0,80}|inserer_attribut{alt,#TITRE})]
J'ai bien mis un titre à mes images.

Didier6 · Avril 12, 2009, 6:05

JPH a écrit :

C'est bien la bonne syntaxe.
Peut-être vider le cache de SPIP et celui de ton navigateur en local.
JPH

Avant de passer en ligne, j'a iencore un petit sousci : je n'arrive pas à mettre le texte en "alt". Voici l'intérieur de ma boucle :
[(#FICHIER|image_reduire{0,80}|inserer_attribut{alt,#TITRE})]
J'ai bien mis un titre à mes images.

Je pense avoir fait les deux.
Je vérifie encore une fois.
Tiens, au fait : je n'avais pas vu que tu mettais "mode=image", et moi "mode=document". Je ne sais pas la différence, mais "mode=image" n'affiche plus aucune image chez moi. J'ai donc remis "mode=document". Je n'ai pas bien compris ce point dans la doc en ligne.
J'ai mis ma boucle en ligne.
Merci.

Didier.

Frederic_Moinard · Avril 12, 2009, 6:29

Bonsoir,

Didier a écrit :
(...)

Je me répondes à moi-même : en vous recopiant ma boucle, je me suis
aperçu que j'avais des <ul> ... </ul> mais pas de <li> ... </li>,
et que les photos s'affichent bien côte à côte.

Bien pour ça qu'il vaut mieux citer les boucles...

(...)

Merci encore.

de rien !

Encore merci à tous, tout marche nickel : par hasard et le critère
sur le descriptif. Avant de passer en ligne, j'a iencore un petit
sousci : je n'arrive pas à mettre le texte en "alt". Voici
l'intérieur de ma boucle : [(#FICHIER|image_reduire{0,80}|inserer_attribut{alt,#TITRE})] J'ai
bien mis un titre à mes images.

Je sèche... chez-moi-ça-marche *bizarrement pas* ™:
Dans un fichier test.html, avec juste la boucle:
[(#FICHIER|image_reduire{0,80}|inserer_attribut{alt,#TITRE})]
donne bien:
<img height="80" width="56" alt="Parole du Sud" style="height: 80px;
width: 56px;" src="local/cache-vignettes/L56xH80/ParolesDuSud-2b78a.jpg"/>

La même boucle dans article.html et avec titre=:[(#TITRE|attribut_html)]:
donne:
titre=:Parole du Sud:
<img height="80" width="56" alt="" style="height: 80px; width: 56px;" src="local/cache-vignettes/L56xH80/ParolesDuSud-2b78a.jpg"/>

En revanche {alt,[(#TITRE|attribut_html)]}:
donne: <img (...) alt="définir" (...)/>
mais c'est un autre problème.

--
Cordialement,
Frédéric

JPH · Avril 12, 2009, 6:45

Voir la boucle DOCUMENTS

tout y est bien expliqué
JPH

Didier a écrit :

JPH a écrit :

C'est bien la bonne syntaxe.
Peut-être vider le cache de SPIP et celui de ton navigateur en local.
JPH

Avant de passer en ligne, j'a iencore un petit sousci : je n'arrive pas à mettre le texte en "alt". Voici l'intérieur de ma boucle :
[(#FICHIER|image_reduire{0,80}|inserer_attribut{alt,#TITRE})]
J'ai bien mis un titre à mes images.

Je pense avoir fait les deux.
Je vérifie encore une fois.
Tiens, au fait : je n'avais pas vu que tu mettais "mode=image", et moi "mode=document". Je ne sais pas la différence, mais "mode=image" n'affiche plus aucune image chez moi. J'ai donc remis "mode=document". Je n'ai pas bien compris ce point dans la doc en ligne.
J'ai mis ma boucle en ligne.
Merci.

Didier.
http://scoescrime.fr