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
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
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 !
Insérez le code suivant dans votre éditeur et le tour est joué
{article}[image-intro]{/article}
vous avez désormais votre image d'intro qui s'affiche sur les pages choisies.
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 :
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 ...
