[Gallery] - Template avec commentaires

[Gallery] - Template avec commentaires - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Gallery] - Template avec commentaires (/thread-2346.html)

[Gallery] - Template avec commentaires - gmassart - 07/11/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour
J'ai mis en place le module gallery dans le but d'afficher des photos de classes et j'utilise le commentaire des photos pour indiquer les personnes présentes sur les différentes photos.
Hors de tous les templates présents aucun n'affiche les commentaires sous les photos.
Idéalement j'aimerai faire comme ça
http://www.blangy-sur-ternoise.com/?photos/les-photos-de-classe/502//0/#photos
C'est en fait la version non CMS du site que j'essaie de transcrire dans cmsmadesimple.
Quelqu'un aurait un exemple de gabarit Gallery qui ressemble à ça?, perso j'ai pas besoin d'afficher la photo via fancybox ou lightbox ou trucmachinebox.
D'avance merci pour votre aide
Guillaume

[Gallery] - Template avec commentaires - Jean le Chauve - 07/11/2012

Salut, si tu regardes sous la fenêtre d'édition du code source du gabarit (dans l'admin du module), tu verras ceci :
Variable Smarty de gabarit disponibles: Variable Smarty de gabarit disponibles ?
Cliques sur le point d'interrogation et verras toutes les variables disponibles, dont celle qui t'intéresse ici :

Code :
$image->comment

Pour l'utiliser dans une des variantes fancybox, il suffit d'ajouter title=$image->comment dans l'appel de l'image.
Sans précision du gabarit utilisé, je ne peux pas t'aider plus.
Un conseil, marie ce module avec CGSmartImage (recherche sur le forum).

[Gallery] - Template avec commentaires - gmassart - 07/11/2012

Bonsoir
J'avais vu pour le

Code :
$image->comment

Mais tous les gabarits proposés sont basé sur du javascript (fancybox etc.) et ils se basent tous à priori sur le contenu de la basise "title" d'une <img> donc n'affiche que le titre de la photo.
De plus le "commentaire" n'est pas formaté, j'ai donc créé une définition de champ qui me permet de formater le texte.
Je passe par

Code :
$image->fields.vrai_commentaire.value

pour afficher mon commentaire.

En fait il faudrait que je puisse ajouter un paramètre à passer dans l'url correspondant à l'id de la photo cliquée, qui au chargement de la page afficherait cette photo avec son commentaire. J'obtiendrai exactement la même présentation finalement.
Il faut que je trouve le moyen de passer un paramètre dans l'url, le récupérer et ça devrait aller.

[Gallery] - Template avec commentaires - gmassart - 07/11/2012

Bon alors en smarty il faut faire ça pour récupérer un paramètre depuis l'url:

Code :
{$smarty.get.mon_parametre}

Me reste à passer l'id de la photo dans ce paramètre et j'aurai réussi je pense

[Gallery] - Template avec commentaires - gmassart - 08/11/2012

Arf
J'ai réussi à récupérer le fileid de l'image voulue, mais comment faire pour récupérer la propriété file d'une image quand on connait son fileid, tous les exemples sont des boucles foreeach, c'est idiot de tester le fileid dans une boucle entière...

Une idée?

[Gallery] - Template avec commentaires - gmassart - 08/11/2012

J'ai quand même fait la boucle et ça fonctionne
le code :

Code :
[== Indéfini ==]

{if $smarty.get.mon_image!=null}

<div>

{foreach from=$images item=image}

{if $image->fileid===$smarty.get.mon_image}

<blockquote><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" width="640" /></br>

{$image->fields.vrai_commentaire.value}</blockquote>

{/if}

{/foreach}

</div>

{/if}

{foreach from=$images item=image}

<a href="{$smarty.server.REQUEST_URI}&mon_image={$image->fileid}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>

{/foreach}

Donc pour les explications:
vrai_commentaire est en fait une désignation de champs de type WYSIWYG qui contient le commentaire de la photo mis en forme
mon_image est le paramètre en GET qui me permet de transférer à la page le numéro de la photo que je veux afficher en grand
Dans la première partie je teste si j'ai le paramètre mon_image dans le GET de l'url, si oui j'affiche (et là j'ai pas trouvé autrement que de faire une boucle pour chercher la bonne image) l'image en fonction de l'id

Ca fonctionne... sauf que si je continue à cliquer sur des miniatures, j'ai mon_image qui apparait X fois dans l'url, car le $smarty.server.REQUEST_URI fait apparaître le mon_image en cours.
Serpent qui se mort la queue, si google passe par là je peux avoir des URI à ralonge avec &mon_image=123&mon_image=213 etc.
Question : comment puis je faire pour supprimer le mon_image pour le remplacer par un autre?

[Gallery] - Template avec commentaires - Jean le Chauve - 08/11/2012

En tous cas, on voit que tu t'amuses bien Smile

On se demande ce que tu veux faire ? Ne pas utiliser de JS ? Et pourquoi recharger la page à chaque clic ?
Pourquoi ne pas plutôt utiliser du css pur, sans rechargement de page comme ici, par exemple : http://www.cssplay.co.uk/menu/gallery.html (je te laisse naviguer pour découvrir les autres démos de ce gourou du css).
Extrêmement simple à réaliser avec Gallery et CGSmartImage inclus : voir résultat ici : http://www.tutos-pour-cmsmadesimple.be/
Gabarit

Code :
<div class="gallery">

{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}

{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}

{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}

<div id="container">

{foreach from=$images item=image}

<a class="pics" href="#nogo" tabindex="1">{cms_module module="CGSmartImage" class="thumb" src=$image->thumb|replace:'/thumb':'thumb' alt=$image->titlename alias=vignettesGal}

<span>{cms_module module="CGSmartImage" src=$image->file alt=$image->titlename title=$image->titlename alias=grande}<br />{$image->comment}</span></a>

{/foreach}

</div></div>

css :

Code :
a, a:visited, a:hover {}

#container {position:relative; width:600px; height:700px; background:#aaa; border:1px solid #000; margin:10px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; padding:7px 21px; display:inline; color:#000; text-decoration:none; width:75px; height:75px; cursor:default;}

#container a.pics img.thumb {display:block; border:1px solid #000;}

#container a.pics span {display:none; border:0; width:580px; background:#bbb; border:1px solid #fff; text-align:center;font-size:0.875em;}

#container a.pics span img {margin:10px auto; border:1px solid #000;}

#container a.pics:hover {white-space:normal;}

#container a.pics:hover img.thumb {border:1px solid #fff;}

#container a.pics:hover span {display:block; position:absolute; left:9px; top:192px; z-index:10; height:500px;}

#container a.pics:active img.thumb {border:1px solid #fc0;} 

#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {outline:0;}

#container a.pics:focus img.thumb {border:1px solid #fc0}

#container a.pics:focus span {display:block; position:absolute; left:9px; top:192px; z-index:5; outline:0; height:500px;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1;}

#container span.info a {color:#000;}

#container span.info a:hover {text-decoration:none;}

Le src=$image->thumb|replace:'/thumb':'thumb' provient d'un léger bug (autrement affiche deux slashes dans le chemin du thumb).

[Gallery] - Template avec commentaires - gmassart - 08/11/2012

Bah pourquoi recharger à chaque fois : parce que j'ai essayer de retrouver le même comportement que le site actuel, la priorité étant d'afficher les commentaires mis en forme
Maintenant je vais regarder la solution avec les <span> et le CSS associé, j'avais déjà utilisé cette technique dans le passé.
Je me pose juste la question si le chargement de la page va pas souffrir...
Merci en tout cas pour l'aide, je reviendrai poster la solution dès qu'implémentée.

[Gallery] - Template avec commentaires - Jean le Chauve - 08/11/2012

Oui, toutes les grandes images seront appelées lors du chargement de page, mais grâce à CGSmartImage, leur poids aura sérieusement baissé et sera dans le cache.
Les galeries en JQuery te permettent d'éviter ce problème...

[Gallery] - Template avec commentaires - gmassart - 10/11/2012

Bon
j'ai décidé de passer par javascript mais en plus simple :
donc le gabarit :

Code :
<div id="grande">

{foreach from=$images item=image}

<blockquote style="display:none" class="photos_grande" id="{$image->fileid}"><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" width="640" /></br>

<h4>{$image->titlename}</h4>

{$image->fields.vrai_commentaire.value}</blockquote>

{/foreach}

</div>

<div id="miniatures">

{foreach from=$images item=image}

<a href="#grande" onClick="affiche('{$image->fileid}')">

<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

</a>

{/foreach}

</div>

le css

Code :
.gallery .img {

    height: 120px;

    /*width: 120px;*/

    float: left;

    margin: 10px;

    text-align: center;

}

.gallery .img a {

    display: inline-block;

    border: 2px solid #ddd;

    padding: 1px;

}

.gallery .img a:hover {

    border-color: #999;

}

.gallery img {

    border: none;

}

.gallery .pagenavigation {

    height: 50px;

}

.gallery .prevpage a, .gallery .prevpage em {

    display: block; 

    width: 50px; 

    height: 39px;

    float: left; 

    margin: 0;

    text-indent: -1000px;

    background: url(../../images/previous.png) transparent no-repeat 0 0;

}

.gallery .nextpage a, .gallery .nextpage em {

    display: block; 

    width: 50px; 

    height: 39px;

    float: left; 

    margin: 0 6px 0 0;

    text-indent: -1000px;

    background: url(../../images/next.png) transparent no-repeat 0 0;

}

.gallery .parentlink a {

    display: block; 

    width: 50px; 

    height: 39px;

    float: left; 

    text-indent: -1000px;

    background: url(../../images/uppage.png) transparent no-repeat 0 0;

}

.gallery .pagenavigation a:hover {

    background-position: 0 -40px;

}

.gallery .prevpage em, .gallery .nextpage em {

    background-position: 0 -80px;

}

.gallery .pagelinks {

    float: right;

    border-right: 2px solid #666;

}

.gallery .pagelinks a, .gallery .pagelinks em {

    margin-top: 6px;

    padding: 0 6px;

    border-left: 2px solid #666;

    text-align: center;

    font: bold 11px verdana; color: #666;

}

.gallery .pagelinks em {

    color: #000;

}

.galleryclear {

    clear: both;

}

/* LIGHTBOX */

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox/images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    

#imageData #caption{ font-weight: bold;    }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

et c'est là le problème le javascript:

Code :
<script type="text/javascript">

function affiche(photo_id){

var zones = document.getElementsByTagName("blockquote");

for (zone in zones){

zones[zone].style.display = "none";

}

document.getElementById(photo_id).style.display="block";

}

</script>

Tout ce qui est après la boucle for ne fonctionne pas, si j'enlève la boucle la photos apparait bien, la boucle sert à cacher les grandes photos déjà affichées pour en avoir qu'une seule.
Je comprends pas pourquoi le script ne va pas plus loin que la boucle...

[Gallery] - Template avec commentaires - bess - 10/11/2012

tout développeur devrait savoir que si un truc ne marche pas : il faut isoler le code problèmatique.

Commence tes tests avec juste le code fonctionnel + le {foreach}{/foreach} et rien dedans.
Tu relances ta page et si ca marche tu ajoutes un peu plus de code et tu retests.

Tu finiras par tomber sur le code qui fait planter.

[Gallery] - Template avec commentaires - gmassart - 11/11/2012

Bah j'ai testé le code sur ce site :
http://jsfiddle.net/
qui permet de tester en ligne le javascript etc.
Si je met mon document.get.... dans la boucle tout fonctionne, bon c'est idiot parce qu'il force le display à chaque boucle mais ça marche.
Je capte pas pourquoi le code après la boucle for ne passe pas.

[Gallery] - Template avec commentaires - Jean le Chauve - 11/11/2012

Utilise Firebug sur Firefox, tu auras tout de suite la réponse.

[Gallery] - Template avec commentaires - gmassart - 11/11/2012

En fouillant un peu (firebug me renvoie plus d'erreur de javascript du à ma version firefox pour linux que d'erreurs javascript de mon script mais j'ai vu que je ne peux pas appeler la propriété style directement comme je le faisais dans ma boucle "for") je suis tombé sur ça
http://www.siteduzero.com/forum-83-369552-p1-masquer-via-getelementsbytagname.html
qui m'a donné la solution donc :

Code :
<script type="text/javascript">

function affiche(photo_id){

nb=document.getElementsByTagName("blockquote").length;

for(i=0;i<nb;i++){

document.getElementsByTagName("blockquote")[i].style.display = "none";

}

document.getElementById(photo_id).style.display="block";

}

</script>

Mais quelqu'un peut-il me dire pourquoi ce code fonctionne ?

Code :
<script type="text/javascript">

function affiche(photo_id){

var zones = document.getElementsByTagName("blockquote");

for (zone in zones){

zones[zone].style.display = "none";

document.getElementById(photo_id).style.display="block";

}

}

</script>

Ca ne devrait pas fonctionner, si la propriété style ne peut pas être appelée directement sur mon zones[zone].style.display, pourquoi ça fonctionne (tous les blockquote sont cachés et la boucle se termine vu que le blockquote sélectionné s'affiche)
Les mystères de javascript sont parmis nous ?
Et pourquoi d'ailleurs je n'arrive pas à récupérer le style via ma boucle? zones[zone] est au final bien un membre de la collection zones que j'ai récupéré non?

[Gallery] - Template avec commentaires - gmassart - 11/11/2012

J'en profite pour mettre la dernière version du gabarit qui après quelques corrections valide Xhtml 1.0 Strict
Gabarit :

Code :
<div class="pagenavigation">

{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}

</div>

<div id="miniatures">

{foreach from=$images item=image}

<a href="#i{$image->fileid}" onclick="affiche('i{$image->fileid}')">

<img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

</a>

{/foreach}

</div>

<div id="grande">

{foreach from=$images item=image}

<blockquote style="display:none" class="photos_grande" id="i{$image->fileid}"><p><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" width="640" /></p>

<h4>{$image->titlename}</h4>

{$image->fields.vrai_commentaire.value}</blockquote>

{/foreach}

</div>

CSS, en fait j'en ai pas, c'est déjà dans mes css que j'ai récupéré de la version précédente du site, je vais transférer la partie du code css plus tard pour faire du nettoyage.
Javascript :

Code :
<script type="text/javascript"><!--

function affiche(photo_id){

nb=document.getElementsByTagName("blockquote").length;

for(i=0;i<nb;i++){

document.getElementsByTagName("blockquote")[i].style.display = "none";

}

document.getElementById(photo_id).style.display="block";

}

//--></script>