[Résolu] Diaporama / slider compatible V2

[Virginie 12]

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

Bonjour,

Avez-vous installé un diaporama / slider sur un CMSMS en V2 ?

J'ai essayé Showtime, mais je n'arrive pas à modifier les paramètres : le bouton "sauver" ne fait rien sur cette vue (l'ajout et la modification des images fonctionne bien).

Avez-vous essayé ça, ou un autre ? Avec succès ?


Virginie

[Virginie 12]

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

Bonjour,

Avez-vous installé un diaporama / slider sur un CMSMS en V2 ?

J'ai essayé Showtime, mais je n'arrive pas à modifier les paramètres : le bouton "sauver" ne fait rien sur cette vue (l'ajout et la modification des images fonctionne bien).

Avez-vous essayé ça, ou un autre ? Avec succès ?


Virginie

[pierrepercee]

En responsive, BX slider fonctionne plutôt bien. Facile à implémenter et à paramétrer. Après il existe d'excellents sliders payants. On peut même les interfacer à peu de frais avec le module "galerie".

[pierrepercee]

En responsive, BX slider fonctionne plutôt bien. Facile à implémenter et à paramétrer. Après il existe d'excellents sliders payants. On peut même les interfacer à peu de frais avec le module "galerie".

[Jean le Chauve]

Tuto pour le module Gallery : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229

[Jean le Chauve]

Tuto pour le module Gallery : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229

[Virginie 12]

Merci à vous 2.


J'ai mis un peu de temps à répondre car j'étais en train d'essayer vos propositions (et d'autres trucs).


Je voulais un diaporama responsive et administrable et j'ai donc un peu mixé vos solutions... + une autre.


Le coinslider n'est pas responsive et les effets disponibles ne me convenaient pas et je n'ai pas trouvé le moyen, avec le BXslider, d'afficher les images à plus de 100% (ce qui m'est nécessaire ici).

Je conserve néanmoins précieusement l'adresse (bxslider.com) car on y trouve aussi des carrousels, des effets un peu exotiques...

Dans le même genre, j'ai trouvé responsiveslides.com, qui, interfacé avec Gallery (sur la base du tuto de Jean), me convient bien.

Je vais partager le résultat sur le post http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229

Toutefois, avant, Jean, est-ce que tu peux regarder ma source de gabarit, que j'ai crée depuis le tuto, mais sans comprendre quoi que ce soit (enfin vraiment pas grand chose).

NB : j'ai aussi dû virer les commentaires du gabarit javascript (qui restaient apparents).

Code :

[== Indéfini ==]
<div class="slider">
<ul class="bxslider">
{foreach from=$images item=image}
<li><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></li>
{/foreach}
</ul>
</div>

Attention : ce code n'est pas le bon : voir la suite de l'échange.

Virginie

[Virginie 12]

Merci à vous 2.


J'ai mis un peu de temps à répondre car j'étais en train d'essayer vos propositions (et d'autres trucs).


Je voulais un diaporama responsive et administrable et j'ai donc un peu mixé vos solutions... + une autre.


Le coinslider n'est pas responsive et les effets disponibles ne me convenaient pas et je n'ai pas trouvé le moyen, avec le BXslider, d'afficher les images à plus de 100% (ce qui m'est nécessaire ici).

Je conserve néanmoins précieusement l'adresse (bxslider.com) car on y trouve aussi des carrousels, des effets un peu exotiques...

Dans le même genre, j'ai trouvé responsiveslides.com, qui, interfacé avec Gallery (sur la base du tuto de Jean), me convient bien.

Je vais partager le résultat sur le post http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229

Toutefois, avant, Jean, est-ce que tu peux regarder ma source de gabarit, que j'ai crée depuis le tuto, mais sans comprendre quoi que ce soit (enfin vraiment pas grand chose).

NB : j'ai aussi dû virer les commentaires du gabarit javascript (qui restaient apparents).

Code :

[== Indéfini ==]
<div class="slider">
<ul class="bxslider">
{foreach from=$images item=image}
<li><img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></li>
{/foreach}
</ul>
</div>

Attention : ce code n'est pas le bon : voir la suite de l'échange.

Virginie

[Jean le Chauve]

Bien sûr Virginie, je regarde attentivement ta source de gabarit. Sympa, on dirait un mélange de html et de smarty
Qu"y-a-t-il de compliqué que tu ne comprends pas dans ce bout de gabarit ?

Si tu utilises responsiveslides.com, tu dois modifier <ul class="bxslider"> en <ul class="rslides"> comme il est écrit dans "Usage : 2 add markup".

[Jean le Chauve]

Bien sûr Virginie, je regarde attentivement ta source de gabarit. Sympa, on dirait un mélange de html et de smarty
Qu"y-a-t-il de compliqué que tu ne comprends pas dans ce bout de gabarit ?

Si tu utilises responsiveslides.com, tu dois modifier <ul class="bxslider"> en <ul class="rslides"> comme il est écrit dans "Usage : 2 add markup".

[airelibre]

Deux sliders qui gèrent le responsive :

• Slick : http://kenwheeler.github.io/slick/
  
• Owl : http://www.owlcarousel.owlgraphic.com/
  

Le tout interfacé soit avec Gallery, soit avec un ListIt2 / LISE pour la gestion. Mais l'intégration elle-même reste à faire ce qui peut bloquer si tu n'es pas (encore) à l'aise avec les gabarits.

[airelibre]

Deux sliders qui gèrent le responsive :

• Slick : http://kenwheeler.github.io/slick/
  
• Owl : http://www.owlcarousel.owlgraphic.com/
  

Le tout interfacé soit avec Gallery, soit avec un ListIt2 / LISE pour la gestion. Mais l'intégration elle-même reste à faire ce qui peut bloquer si tu n'es pas (encore) à l'aise avec les gabarits.

[Jean le Chauve]

Puisque tu es de nouveau disponible sur ce forum airelibre, aurais-tu la gentillesse (et le temps) de nous pondre un tuto sur l'utilisation de ListIt2/LISE ?

[Jean le Chauve]

Puisque tu es de nouveau disponible sur ce forum airelibre, aurais-tu la gentillesse (et le temps) de nous pondre un tuto sur l'utilisation de ListIt2/LISE ?

[Virginie 12]

Blargh!!

Jean : je n'ai pas mis le bon code. C'est celui de mon test avec bxslider (qui d'ailleurs fonctionne même s'il ne correspond pas à mon besoin).

Le code réellement utilisé :

Code :

[== Indéfini ==]
<div class="rslides_container">
<ul class="rslides" id="slider">
{foreach from=$images item=image}
<li>
<img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
</li>
{/foreach}
</ul>
</div>

et ça fonctionne, mais avant de le partager, je voudrais m'assurer que ce n'est pas "codé avec les pieds".

J'ai en effet juste recopié ce qui est dans ton tuto et collé dans le HTML que j'avais repris de Responsiveslide.

En particulier, je ne comprends pas

Code :

[== Indéfini ==]
{$image->file|escape:'url'|replace:'%2F':'/'}

dont je comprends par contre bien ce qu'il fait (chercher l'url de l'image).

NB : tu l'auras remarqué : je ne parle ni PHP, ni smarty ; j'arrive, au mieux, à comprendre à peu près ce qui se passe dans le code, à partir de mes maigres connaissances en la matière... quand c'est vraiment basique (et aussi par déduction à partir du HTML, que je parle, par contre couramment).



Airelibre : merci pour les 2 liens (il y a des carrousels vraiment sympa). Normalement, pas de problème avec les gabarits, donc l'intégration sous Gallery devrait aller. Je garde sous le coude pour essayer dès que possible.

Je ne connais pas ListIt2 / LISE et après un tour sur la forge, ne comprends pas très bien à quoi ça sert (faire des listes, mais pour quels usages).

A+

Virginie

[Virginie 12]

Blargh!!

Jean : je n'ai pas mis le bon code. C'est celui de mon test avec bxslider (qui d'ailleurs fonctionne même s'il ne correspond pas à mon besoin).

Le code réellement utilisé :

Code :

[== Indéfini ==]
<div class="rslides_container">
<ul class="rslides" id="slider">
{foreach from=$images item=image}
<li>
<img src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
</li>
{/foreach}
</ul>
</div>

et ça fonctionne, mais avant de le partager, je voudrais m'assurer que ce n'est pas "codé avec les pieds".

J'ai en effet juste recopié ce qui est dans ton tuto et collé dans le HTML que j'avais repris de Responsiveslide.

En particulier, je ne comprends pas

Code :

[== Indéfini ==]
{$image->file|escape:'url'|replace:'%2F':'/'}

dont je comprends par contre bien ce qu'il fait (chercher l'url de l'image).

NB : tu l'auras remarqué : je ne parle ni PHP, ni smarty ; j'arrive, au mieux, à comprendre à peu près ce qui se passe dans le code, à partir de mes maigres connaissances en la matière... quand c'est vraiment basique (et aussi par déduction à partir du HTML, que je parle, par contre couramment).



Airelibre : merci pour les 2 liens (il y a des carrousels vraiment sympa). Normalement, pas de problème avec les gabarits, donc l'intégration sous Gallery devrait aller. Je garde sous le coude pour essayer dès que possible.

Je ne connais pas ListIt2 / LISE et après un tour sur la forge, ne comprends pas très bien à quoi ça sert (faire des listes, mais pour quels usages).

A+

Virginie

[Ouik]

ListIt2 à quoi ça peut servir : http://www.autun-tourisme.com/fr/se-rest...ants-autun

Tous les restaurants & hébergements + la rubrique "à voir à faire à déguster" sont gérés avec LI2 sur ce site.

[Ouik]

ListIt2 à quoi ça peut servir : http://www.autun-tourisme.com/fr/se-rest...ants-autun

Tous les restaurants & hébergements + la rubrique "à voir à faire à déguster" sont gérés avec LI2 sur ce site.

[Jean le Chauve]

le pipe (|) placé après la variable sert à indiquer à smarty que l'on va appliquer un modificateur sur la variable : http://www.smarty.net/docs/en/language.modifiers.tpl
escape : http://www.smarty.net/docs/en/language.m...escape.tpl
replace : http://www.smarty.net/docs/en/language.m...eplace.tpl
Le chemin de l'image sur le serveur comprend des / qui doivent être écrites %2F dans une url, il faut donc les remplacer.
Pour mieux comprendre il te suffit d'afficher ta variable avec et sans les modificateurs, tu pourras ainsi comparer les résultats.
Smarty est très simple et en même temps très puissant, je t'invite à regarder la doc de tous les modificateurs, il te seront souvent utiles.

[Jean le Chauve]

le pipe (|) placé après la variable sert à indiquer à smarty que l'on va appliquer un modificateur sur la variable : http://www.smarty.net/docs/en/language.modifiers.tpl
escape : http://www.smarty.net/docs/en/language.m...escape.tpl
replace : http://www.smarty.net/docs/en/language.m...eplace.tpl
Le chemin de l'image sur le serveur comprend des / qui doivent être écrites %2F dans une url, il faut donc les remplacer.
Pour mieux comprendre il te suffit d'afficher ta variable avec et sans les modificateurs, tu pourras ainsi comparer les résultats.
Smarty est très simple et en même temps très puissant, je t'invite à regarder la doc de tous les modificateurs, il te seront souvent utiles.

[Virginie 12]

Ouik : merci : c'est bien plus clair comme ça... et d'ailleurs je vais avoir l'occasion de l'utiliser bientôt !

Jean : est-ce que des bases en PHP pourraient me servir pour comprendre les balises smarty ? Parce que, en fait, j'ai bien essayé de comprendre la doc, mais c'est à peu près aussi clair pour moi que si c'était écrit en martien.
Je crois que déjà il me manque trop de notions de base... mais je ne sais pas en quoi.

En tout cas merci pour l'explication : ça fait 1 chose de comprise :-)

Sinon, quand même : est-ce que les 2 codes "source de gabarit" que j'ai affiché sont corrects pour pouvoir être mis à dispo sur le post http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229 ?

Bon WE

Virginie

[Virginie 12]

Ouik : merci : c'est bien plus clair comme ça... et d'ailleurs je vais avoir l'occasion de l'utiliser bientôt !

Jean : est-ce que des bases en PHP pourraient me servir pour comprendre les balises smarty ? Parce que, en fait, j'ai bien essayé de comprendre la doc, mais c'est à peu près aussi clair pour moi que si c'était écrit en martien.
Je crois que déjà il me manque trop de notions de base... mais je ne sais pas en quoi.

En tout cas merci pour l'explication : ça fait 1 chose de comprise :-)

Sinon, quand même : est-ce que les 2 codes "source de gabarit" que j'ai affiché sont corrects pour pouvoir être mis à dispo sur le post http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3229 ?

Bon WE

Virginie

[Jean le Chauve]

Le gabarit semble correct (sauf id='slider' qui me semble un ajout personnel).

Oui, tu devrais vraiment avoir les bases de PHP et de programmation en général : les variables, les boucles, les conditions, les tableaux, etc. en tant que professionnelle du web ou t'associer avec quelqu'un ayant ces compétences.
Tu trouveras de très bons tutoriels sur developpez.com et en particulier celui-ci : http://sylvie-vauthier.developpez.com/tu...-debutant/
C'est assez rapide à ingérer

[Jean le Chauve]

Le gabarit semble correct (sauf id='slider' qui me semble un ajout personnel).

Oui, tu devrais vraiment avoir les bases de PHP et de programmation en général : les variables, les boucles, les conditions, les tableaux, etc. en tant que professionnelle du web ou t'associer avec quelqu'un ayant ces compétences.
Tu trouveras de très bons tutoriels sur developpez.com et en particulier celui-ci : http://sylvie-vauthier.developpez.com/tu...-debutant/
C'est assez rapide à ingérer

[Virginie 12]

Merci Jean,

Je travaille en effet en sous-traitance avec un dev pour mes besoins PHP, mais j'aime bien comprendre.

Ma partie, c'est le HTML et la création des designs/gabarits (d'où la question d'un diaporama), les CSS (j'adore !), l'ergonomie/utilisabilité, le référencement naturel, le cadre juridique (surtout pour le e-commerce), les bonnes pratiques marketing et la gestion de projet.

Mais du coup, côté programmation, je suis très pauvre. J'avais commencé le tuto d'openclassroom, mais faute de liens avec une utilisation concrète, c'est devenu trop abstrait.

Merci pour le tuto indiqué : je vais commencer par là avant d'essayer de comprendre le fonctionnement des balises smarty... pour ne plus me contenter d'utiliser l'existant, tel quel (ce qui, déjà, permet pas mal de choses !).

Je dépose les exemples sur le post 3229.

A bientôt

Virginie

[Virginie 12]

Merci Jean,

Je travaille en effet en sous-traitance avec un dev pour mes besoins PHP, mais j'aime bien comprendre.

Ma partie, c'est le HTML et la création des designs/gabarits (d'où la question d'un diaporama), les CSS (j'adore !), l'ergonomie/utilisabilité, le référencement naturel, le cadre juridique (surtout pour le e-commerce), les bonnes pratiques marketing et la gestion de projet.

Mais du coup, côté programmation, je suis très pauvre. J'avais commencé le tuto d'openclassroom, mais faute de liens avec une utilisation concrète, c'est devenu trop abstrait.

Merci pour le tuto indiqué : je vais commencer par là avant d'essayer de comprendre le fonctionnement des balises smarty... pour ne plus me contenter d'utiliser l'existant, tel quel (ce qui, déjà, permet pas mal de choses !).

Je dépose les exemples sur le post 3229.

A bientôt

Virginie