https://www.facebook.com/tr?id=1475801249377226&ev=PixelInitialized

Note de l'utilisateur: 5 / 5

Donnez une note !
5 sur 5 - 1 votes
Merci d'avoir noté cet article.

Une demande de certains clients et souvent des graphistes est de pouvoir mettre une image d'entête selon chaque article Joomla.
Il ne s'agit pas d'une image aléatoire mais bel et bien d'une image que l'on aura choisie et qui viendra s'afficher hors de la zone article.

Il existe plusieurs solutions :

  • Certains templates proposent cette fonctionnalité (Helix, JaT3)
  • Coder en php dans le template
  • Modifier grandement la mise en page de l'article par un override (présente des inconvénients
  • Utiliser des outils en les combinant 

C'est cette dernière que nous allons aborder ici

 

Télécharger les outils pour Joomla de Regular Labs

Les outils dont nous allons avoir besoin se trouvent tous chez regular labs.

Il s'agit d'advanced module manager et article anywhere

Vous pouvez les installer séparément, ou installer Regular labs Extension Manager Free afin de les gérer depuis le site.

C'est ce que nous allons faire à tittre d'exemple

  • téléchargez Extension manager
  • installez-le via le gestionnaire d'extension Joomla
  • Allez dans composants / Regular labs extension manager
  • Installez depuis ce composant les extensions dont vous avez besoin

images joomla header1

 images joomla header2

Vous noterez qu'il existe des versions pros.
Les versions gratuites devraient nous satisfaire mais je vous encourage à visiter le site de regular labs afin de voir le potentiel immense des versions pros.

 

Préparer la place du module dans le template

Vous avez encore le choix : soit vous utilisez un emplacement de module existant, soit vous ajoutez une ligne de code dan votre template afin d'ajouter un emplacement de module.
Exemple dans beez3 :

 

 <?php if ($this->countModules('image-header')) : ?>
								<div id="image-header">
									<jdoc:include type="modules" name="image-header" />
								</div>
							<?php endif; ?>

 

Nous avons desormais dans notre template une position appelée image-header.

Choisir les images à placer dans le module

Dans chaque édition d'articles vous avez un onglet image et lien

Vous pouvez donc, dans cet onglet, remplir le champs image d'intro ou image d'article complet

Pour l'exemple nous allons choisir image d'intro afin d'être certain de ne pas l'afficher en double dans la vue article 

 

images joomla header3

Faites ainsi pour plusieur articles

Paramêtrer le module image header

Nous allons créer un module de type Contenu personnalisé.

Assignez le à la position "image-header"  

Puis grâce au gestionnaire amélioré de module de regular labs, vous allez pouvoir affiner son assignation aux pages.

Par exemple, lui dire de ne s'afficher que dans certaines catégories, certains composants, certains type de pages, etc ...

C'est pour cela que nous avons téléchargé Advanced Module Manager !

images joomla header4

 Insérez le code suivant dans votre éditeur et le tour est joué

{article}[image-intro]{/article}

images joomla header7

vous avez désormais votre image d'intro qui s'affiche sur les pages choisies.

images joomla header5

Fignoler la mise en page

Pour bien faire, il faudrait pouvoir facilement modifier les styles de cette image.
Par exemple qu'elle prenne toute la largeur de la div

Vous pouvez cibler l'image dans le module puisqu'on a donné une ID image-header au module

Il ne vous reste plus qu'à mettre les syles CSS qui vont bien : 

#image-header img {
  width: 100%;
}

et nous avons comme résultat : 

images joomla header6

 

 En conclusion :

Vous avez ici un système qui necessite peu de codage, et surtout qui est malléable.

Avec la documentation de regular labs vous allez même pouvoir afficher le titre de l'article, l'auteur, etc... 

Agrémenté d'un peu de CSS, votre blog aura fière allure !

 

Aller plus loin : la version pro vous permet d'agir avec les custom fields de Joomla

vous pourriez ainsi créer un champs personnalisé uniquement pour le header

mais cela, c'est une autre histoire ...