info article base

Un petit rappel en image sur la version originale des infos article

  1. pas d'icône pour l'auteur et les catégories
  2. une info par ligne, ce qui prend beaucoup de place
  3. un titre "Détails" qui ne sert pas à grand-chose

Je vais donc essayer de corriger ces points,
mais en différenciant le rendu
en mode blog (colonne plus étroite)
et celui en vue article

Le résultat est visible sur ce site. Observer la différence entre les infos de la page d'accueil et celles d'un article

Cet ancien article a été écrit pour Joomla 3, mais il est possible de l'adapter pour Joomla  et 5

Téléchargement - installation

Toutes les surcharges sont disponibles dans le fichier ZIP ci-dessous. Une fois dézippé, il suffit de glisser le dossier html dans le dossier de votre template. Cela aura pour effet de créer la cascade de sous-dossiers et de copier les 8 fichiers surchargés au bon endroit.

Personnalisation de la surcharge

Si vous ne voulez pas d'un aspect différent entre la vue blog et la vue article, il suffit de modifier légèrement le code au début du fichier block.php

A la suite du code proposé, il suffit d'ajouté votre choix

$app = JFactory::getApplication();
$displayData['iconOnly'] = ($app->input->get('view', '') != 'article');
$displayData['iconOnly'] =true;  // true: icone, false: icone +texte

Pour supprimer le titre "Détails", nous disposons normalement d'un paramètre pour cela : info_block_show_title.
Mais comme je ne l'ai jamais trouvé, j'ai mis en commentaire la partie concernée.

<?php /*** ?>
			<dt class="article-info-term">
				<?php if ($displayData['params']->get('info_block_show_title', 1)) : ?>
					<?php echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?>
				<?php endif; ?>
			</dt>
<?php ***/ ?>

Si vous voulez retrouver le titre, il suffit de supprimer les lignes surlignées

Adaptation CSS

Toutes les infos sur une seule ligne

Pour mettre les infos en ligne, une petite règle CSS suffit

.article-info dd {
    display: inline-block;
}

Vous pouvez aussi diminuer la taille des carcatères

.article-info {
   font-size:90%;
}

Le SCSS que j'utilise sur ce site est

dl.article-info {
  margin-top:0;
  line-height:1.3;
  dd {
    display: inline-block;
    font-size: 85%;
    margin: 0 5px 0 0;  
  }   
}

Badge NEW selon date de publication

L'ajout des lignes 11 à 15 au fichier \html\layouts\joomla\content\info_block\publish_date.php permet d'ajouter un petit badge "NEW" après la date de publication si celle-ci date de moins de 15 jours (variable $nbday).

<dd class="published" title="<?php echo $bulle; ?>">
	<span class="icon-calendar"></span>
	<time datetime="<?php echo JHtml::_('date', $displayData['item']->publish_up, 'c'); ?>" itemprop="datePublished">
		<?php 
		if ($displayData['iconOnly']) {
			echo JHtml::_('date', $displayData['item']->publish_up, JText::_('DATE_FORMAT_LC3')); 
		} else {
			echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $displayData['item']->publish_up, JText::_('DATE_FORMAT_LC3'))); 
		}	?>
	</time>
	<?php 
		$nbday = 15;
		$tmp = date('Y-m-d H:i:s', mktime(date("H"), date("i"), 0, date("m"), date("d")-intval($nbday), date("Y")));	
		if ($tmp < $displayData['item']->publish_up) echo ' <span class="badge badge-important">new</span>';
	?>
</dd>

N'hésitez pas à me faire des retours d'expérience ainsi que des suggestions sur le forum.

Print Friendly and PDF