Changer la bannière et logo

[Rajoz]

Re : Changer la bannière et logo

Bonjour Argonos,

1)

extension pour avoir plusieurs images qui défilent dans un article

2)

Du coup, je préfèrerais avoir des petites ou moyennes images, qui quand je clique sur une, agrandit l'image et me permet de faire défiler ce type/groupe d'images prédéfinis, et de même si je veux en vois d'autres, bah je clique sur la seconde image (en miniature quoi), qui me fera défiler d'autres images.

Il y a deux réponses à ces deux besoins.

1) Slideshow

Un slideshow permet de répondre à la première demande. C'est à dire des images qui défilent dans un article.

Pour répondre aux questions : Slideshow CK permet dans ses paramètres de régler la taille du module et d'ajouter des miniatures. Par exemple pour afficher une ligne avec les miniatures, il faut aller dans "Options de style" et mettre Oui pour Miniatures et Non pour Pagination.

2) Galerie d'images

La galerie répond plutôt à la deuxième demande : une ou plusieurs miniatures fixes, quand on clique sur une miniature elle s'ouvre en grand en popup et des liens permettent de passer d'une image à l'autre dans le groupe d'images.

Un exemple de galerie est sigplus (http://extensions.joomla.org/extensi...-gallery/11426). Voir la démo pour des exemples de galerie (http://hunyadi.info.hu/levente/en/sigplus/demo). La documentation de sigplus est très complète mais en anglais.

S'il faut maintenant discuter du choix d'une extension pour les images, cela ne fait plus partie de l'objet initial de ce post (Changer la bannière et logo). Je pense donc qu'il vaudrait mieux fermer ce post en le mettant à [Réglé] et ouvrir un nouveau post dans la partie "Extensions tierces / Galeries d'images-médias".

Amicalement,
Rajoz

[Argonos]

Re : Changer la bannière et logo

Le deuxième se rapproche plus de ce que je veux faire.

Le premier, même en mettant des miniatures, je n'ai pas trouvé comment cliqué sur l'image pour l'agrandir. Etant données que les extensions de ce modules sont payantes, je n'ai pas accès à tout malheureusement.

Donc en faite, ce sujet aussi est clos pour le moment car je n'ai pas encore poussé l'utilisation des miniatures pour avoir d'autres questions. Je créerai un topic dans la section convenu lorsque j'en aurais.



Par contre, j'ai juste une dernière question concernant la bannière justement.

J'aimerai savoir, si d'après la bannière crée, il était possible de rajouter un lien dans celle ci pour mener à un endroit prédéfini du site. Par exemple, ajouter un bouton cliquable dans la bannière, en bas à droite de celle ci, pour être emmené à un endroit. (Et uniquement en cliquant sur le dit bouton, pas en cliquant n'importe où dans la bannière).

Donc j'ai bien crée une bannière, avec un module personnalisé comme expliqué dans la première page. Comment à partir de ceci, rajouter un bouton sur l'image elle même? Faut-il changer la façon de mettre en place la bannière?

[Rajoz]

Re : Changer la bannière et logo

Bonjour Argonos,

J'aimerai savoir, si d'après la bannière crée, il était possible de rajouter un lien dans celle ci pour mener à un endroit prédéfini du site. Par exemple, ajouter un bouton cliquable dans la bannière, en bas à droite de celle ci, pour être emmené à un endroit. (Et uniquement en cliquant sur le dit bouton, pas en cliquant n'importe où dans la bannière).
Donc j'ai bien crée une bannière, avec un module personnalisé comme expliqué dans la première page. Comment à partir de ceci, rajouter un bouton sur l'image elle même? Faut-il changer la façon de mettre en place la bannière?

Je suppose qu'il s'agit toujours du template Protostar avec une image de bandeau mise dans un module de type "Contenu personnalisé" en position "banner".

La position en bas à droite pose un petit problème de position du bouton, en effet la largeur de l'image (donc la droite) va changer selon la dimension de l'écran sur lequel elle va s'afficher puisque le template Protostar est "responsive".

Je propose le code suivant à saisir dans le module avec l'éditeur en mode "code source" ou avec un éditeur non WYSIWYG :

<p style="display: table-cell; text-align: right;">
  <img src="images/bandeau.png" alt="Bandeau" />
  <a class="btn btn-primary" style="position: relative; right: 10px; bottom: 40px;" href="#">BOUTON</a>
</p>
<p style="margin-top: -40px;">&nbsp;</p>

Quelques explications :

J'ai utilisé ici du style inline parce que c'était plus court, il aurait aussi été possible de créer des classes dans template.css et de les utiliser ici.

Le premier <p> sert de conteneur pour l'image et le bouton, il a deux styles pour permettre d'être "responsive":

• display: table-cell; = permet au conteneur de se comporter comme une cellule d'un tableau, en particulier, de prendre la largeur de son contenu
• text-align: right; = aligne le contenu vers la droite, en pratique l'objectif c'est que le bouton se retrouve en bas à droite de l'image

Pour l'<img> penser à mettre un texte de remplacement dans le alt qui va être utile pour le SEO comme pour nos amis malvoyants.

Le <a> comporte plusieurs classes et styles qui lui permettent de se comporter comme un bouton et d'être correctement positionné :

• btn = pour que le lien soit vu comme un bouton
• btn-primary = (facultatif) pour que le bouton soit vu comme un bouton primaire cad en bleu avec changement quand la souris passe dessus. Tu peux l'enlever si la couleur du bouton ne s'adapte pas avec ton image.
• position: relative; = la position qui va être définie le sera par rapport à la position qu'aurait dû avoir normalement le bouton (cad en dessous de l'image à droite)
• right: 10px; = la marge de droite est augmentée de 10px (à adapter en fonction des résultats)
• bottom: 40px; = la marge du bas est remontée de 40px (à adapter en fonction des résultats)
• href="#" = URL du lien, le # doit être remplacé par la vraie adresse

Le bouton est remonté pour l'affichage mais sa place dans le flux HTML reste toujours occupée donc il y a donc un espace "vide" en bas de l'image qui peut gêner la mise en page. Pour corriger cet effet secondaire, la ligne avec le deuxième <p> permet de remonter la position (note : cette ligne peut être supprimée si l'effet ne gêne pas) :

• margin-top: -40px; = marge haute remontée de 40px (à adapter en fonction des résultats)
• &nbsp; = espace insécable pour que le <p></p> ne soit pas "filtré" par l'éditeur.

Amicalement,
Rajoz