Jouons avec les articles archivés de Joomla

Créons notre override

C'est le point le plus technique de ce tutoriel mais pas de panique, cela reste assez simple :)

1. Depuis le panneau d'administration, cliquez sur Système.

2. Dasn la partie dédiée aux templates, cliquez sur Site Templates.

3. Cliquez sur votre template (Cassiopeia, dasn cet exemple).

4. Cliquez sur l'onglet Créer des substitutions.

5. Dans la liste des composants, cliquez sur com_content puis sur Archive.

6. Dans l'onglet Editeur tab, dans la liste de gauche, cliquez sur html, puis sur com_content et enfin sur Archive.

   Ici, vous avez deux fichiers :

   • default.php

   • default_items.php

   

   Schématiquement, le fichier default.php contient le code qui affcihe le formulaire et le fichier default_items.php contient le code pour afficher les articles.

7. Cliquez sur le fichier default.php pour l'ouvrir dans l'éditeur. Si vous n'êtes pas familier du code PhP, voici comment lire le contenu de ce fichier:

   1. A la ligne 17, nous avons une première condition: si le paramètre Show the page heading est vrai, alors on exécute le code qui est juste après et on affiche le titre de la page (ligne 20). Si non, le code va continuer à la ligne 25 (après la condition).

   2. De la ligne 25 à la ligne 52, nous avons les differents éléments du formulaire:

      • Lignes 27 à 32: la barre de recherche
      • Lignes 35 à 37: le filtre par mois
      • Lignes 38 à 40: le filtre par années
      • Lignes 41 à 43: le filtre par limite
      • Lignes 45 à 48: le bouton

   3. Et enfin à la ligne 53, nous appelons le fichier default_items.php pour afficher les articles.

   .

C'est plutôt simple, n'est ce pas !

D'accord maintenant, nous allons modifier ce code pour améliorer l'affichage en frontend de notre formulaire.

Le fichier default.php

Nous allons afficher le titre de la page au centre de la page et afficher une petite ligne élégante juste en dessous du titre.

Remplacez les lignes 17 à 23:

<?php if ($this->params->get('show_page_heading')) : ?>
	<div class="page-header">
		<h1>
			<?php echo $this->escape($this->params->get('page_heading')); ?>
		</h1>
	</div>
<?php endif; ?>

par

<div class="text-center py-4 my-4">
	<?php if ($this->params->get('show_page_heading')) : ?>
	<div class="page-header">
		<h1>
			<?php echo $this->escape($this->params->get('page_heading')); ?>
		</h1>
	</div>
	<hr class="w-header my-4">
	<?php endif; ?>
</div>

Maintenant, nous allons modifier l'esthétique de notre formulaire. On commence par agrandir la barre de recherche, on ajoute plus d'espace et de marge entre les filtres et on termine en customisant le bouton.

Remplacez les ligne 29 à 32:

<div class="mr-2">
	<label class="filter-search-lbl sr-only" for="filter-search"><?php echo Text::_('COM_CONTENT_TITLE_FILTER_LABEL') . '&#160;'; ?></label>
	<input type="text" name="filter-search" id="filter-search" value="<?php echo $this->escape($this->filter); ?>" class="inputbox col-md-2" onchange="document.getElementById('adminForm').submit();" placeholder="<?php echo Text::_('COM_CONTENT_TITLE_FILTER_LABEL'); ?>">
</div>

par

<div class="mr-3">
	<label class="filter-search-lbl sr-only" for="filter-search"><?php echo Text::_('COM_CONTENT_TITLE_FILTER_LABEL') . '&#160;'; ?></label>
	<input type="text" name="filter-search" id="filter-search" value="<?php echo $this->escape($this->filter); ?>" class="form-control inputbox col-md-12" onchange="document.getElementById('adminForm').submit();" placeholder="<?php echo Text::_('COM_CONTENT_TITLE_FILTER_LABEL'); ?>" size="50" >
</div>

Remplacez the lignes 35 à 43:

<div class="mr-2">
	<?php echo $this->form->monthField; ?>
</div>
<div class="mr-2">
	<?php echo $this->form->yearField; ?>
</div>
<div class="mr-2">
	<?php echo $this->form->limitField; ?>
</div>

par

<div class="mr-3">
	<?php echo $this->form->monthField; ?>
</div>

<div class="mr-3">
	<?php echo $this->form->yearField; ?>
</div>

<div class="mr-3">
	<?php echo $this->form->limitField; ?>
</div>

et enfin, vous pouvez modifier l'aspect de votre bouton en lui ajoutant quelques règles CSS à la ligne 45. Voici le mien :

<button type="submit" class="btn btn-outline-dark" style="vertical-align: top;"><?php echo Text::_('JGLOBAL_FILTER_BUTTON'); ?><i class="ml-2 far fa-hand-point-right" aria-hidden="true"></i></button>

Maintenant, voyons ce que cela donne en frontend :

Le fichier default_items.php

Nous allons afficher les articles archivés sur deux colonnes et pour chaque article, son title, sa date de création et son image d'introduction.

Le problème est que l'image d'introduction de l'article n'est pas disponible dans les paramètres standards du lien de menu. Nous allons devoir ajouter un code supplémentaire pour l'afficher. Vous avez de la chance, ce code est disponible ici :

<?php
	$article_images  = json_decode($item->images);
	$article_image   = '';
	$article_image_alt   = '';
	if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
		$article_image  = $article_images->image_intro;
		$article_image_alt  = $article_images->image_intro_alt;
	}?>  					
		
	<a href="/<?php echo $item->link; ?>">
		<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
	</a>

Comme j'ai beaucoup modifié le fichier de départ, c'est plus simple et plus rapide de vous partager mon code. Les différentes parties du code sont commentées pour faciliter la compréhension.
Remplacez le code original par celui-ci:

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  com_content
		*
		* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
	use Joomla\CMS\HTML\HTMLHelper;
	use Joomla\CMS\Language\Text;
	use Joomla\CMS\Router\Route;
	use Joomla\Component\Content\Site\Helper\RouteHelper;
	
	$params = $this->params;
?>
<div id="archive-items" class="pt-3 mt-3 com-content-archive__items">
	<div class="row">		
		<?php foreach ($this->items as $i => $item) : ?>
        <div class="col-md-6">
			<div class="row px-3 my-3">	
				
				<!-- Affichons l'image d'intro -->
				<div class="col-md-3">					
					<?php
						$article_images  = json_decode($item->images);
						$article_image   = '';
						$article_image_alt   = '';
						if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
							$article_image  = $article_images->image_intro;
							$article_image_alt  = $article_images->image_intro_alt;
						}?>  					
						<div class="view overlay rgba-white-slight z-depth-1 mb-3">	
							<a href="/<?php echo $item->link; ?>">
								<img class="img-fluid rounded-0" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							</a>
						</div>
				</div> 				
				<div class="col-md-9">  
					<?php $info = $item->params->get('info_block_position', 0); ?>
					<div class="mb-3 row<?php echo $i % 2; ?>" itemscope itemtype="https://schema.org/Article">
						<div class="page-header">
							
							<!-- Affichons la date de création de l'article -->
							<?php if ($params->get('show_create_date')) : ?>
							<dd>
								<div class="create text-muted">									
									<time datetime="<?php echo HTMLHelper::_('date', $item->created, 'c'); ?>" itemprop="dateCreated">
										<h5 class="h6 mb-3"><?php echo Text::sprintf( HTMLHelper::_('date', $item->created, Text::_('DATE_FORMAT_LC3'))); ?></h5>
									</time>									
								</div>
							</dd>
							<?php endif; ?>
							
							<!-- et maintenant, le titre de l'article avec une icône sur la droite -->
							<h2 class="h5" itemprop="headline">
								<?php if ($params->get('link_titles')) : ?>
								<a href="<?php echo Route::_(RouteHelper::getArticleRoute($item->slug, $item->catid, $item->language)); ?>" itemprop="url">
									<?php echo $this->escape($item->title); ?><i class="fas fa-angle-right float-right"></i>
								</a>
								<?php else : ?>
								<?php echo $this->escape($item->title); ?>
								<?php endif; ?>
							</h2>
							
						</div>						
					</div>
				</div>
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>

<div class="com-content-archive__navigation w-100">
	<?php if ($this->params->def('show_pagination_results', 1)) : ?>
	<p class="com-content-archive__counter counter float-right pt-3 pr-2">
		<?php echo $this->pagination->getPagesCounter(); ?>
	</p>
	<?php endif; ?>
	<div class="com-content-archive__pagination">
		<?php echo $this->pagination->getPagesLinks(); ?>
	</div>
</div>

Explications à propos du code de cette override

• Tout d'abord, j'ai supprimé tout ce qui ne m'étais pas nécessaire dans le code pour réaliser ce tutoriel. Je vous recommande très fortement de conserver une copie du fichier originelavant de supprimer quoique ce soit si vous effectuez des ovrrides comme ceci.

• Lignes 20 et 22: j'ai ajouté les classes CSS nécessaires pour afficher les articles sur 2 colonnes.

• Ligne 23: parce que chaque article sera affiché avec l'image d'intro sur la gauche et le reste des informations sur la droite, je dois ajouter une nouvelle row. J'ajoute également un peu de padding et de margin.

• Lignes 26 à 40: c'est ici que j'ai ajouté le code pour afficher l'image d'introduction. Les classes CSS à la ligne 35 qui améliorent le rendu visuel sur les images, sont les miennes. Cela ne fonctionnera peut-être pas pour vous.

• Lignes 46 à 55: c'est la partie concernant la date de création de l'article. Comme d'habitude, j'ai ajouté quelques classes CSS : text-muted, padding, margin, etc. pour améliorer l'affichage.

• Lignes 57 à 65: c'est la partie du titre de l'article. J'ai ajouté une icône avec une classe float-right pour qu'elle s'affiche en bout de ligne.

Maintenant, regardons le résultat final obtenu en frontend :