[Problème] 'Icon fontawesome' dans le titre de certains articles

[elchecmoi]

Hello les joomlayers,

Pas sûre d'être au bon endroit, désolée si ça n'est pas le cas !

Je cherche à mettre une icône de vidéo dans le titre de certains articles, quelque soit l'affichage de l'article : blog, liste d'articles taggés, article,… sans devoir passer par les liens de menus pour se faire.
Lorsque j'ajoute <i class="fa-solid fa-video></i> (ou autre je ne sais plus le code exact et je vois qu'il change selon la version fontawesome implémentée) dans Joomla 5.2.3, le code s'efface dès l'enregistrement.
Déjà, quelle version fontawesome dans la dernière version Joomla ?

J'ai essayé de passer par cette solution :

https://magazine.joomla.org/all-issues/may-2024/how-to-add-an-icon-to-the-article-title

pour arriver à mes fins, sauf que je souhaite que mon icône apparaisse dans le titre quelque soit son affichage (blog, article), et je n'arrive pas à trouver les fichiers indiqués dans ce tuto pour faire les override.

J'ai aussi tenté d'épingler tous les articles concernés (qui doivent avoir cette icône dans le titre), mais je ne sais pas comment l'indiquer dans mon css :
.featured-articles h1::after, .featured-articles h2::after, .featured-articles h3::after {
content: '\f03d';
font-family: 'Font Awesome 5 free';
font-weight: 900;
}
Mais ça ne fonctionne pas.

Quelqu'un aurait-il une idée ? une solution ?
Merci par avance pour vos réponses.

[lomart]

Bonsoir,

Il y a peut-être d'autres solutions, mais UP sait le faire avec ce shortcode

{up addclass=icone-video | selector=.page-header | css-head=.icone-video > h1:before[content:"\f03d"; font-family: "Font Awesome 6 Free";]}

J'ai testé sous Joomla 5.2.3 avec Cassiopeia. A ajuster selon le template
f03d est le code du caractère icone video de font-awesome

[lefabdu51]

<i class="fa-solid fa-video></i> ce code est inexact , il manque ". <i class="fa-solid fa-video"></i>
Il disparait lors de l enregistrement.
Les fichiers que vous modifiez sont des fichiers php ? .... car pour faire un override (surcharge en fr), si le fichier n'existe pas, il faut cliquer dessus. La colonne est affichage > joommla > contenu. Les fichiers sont crées dans html > layouts > joomla > content et vous avez les fichiers demandés par la suite du tutoriel. La on trouves bien le fichier blog_style_default_item.php

[elchecmoi]

Merci Lomart et lefabdu51 pour votre intérêt ! et vos tentatives de solutions !

lomart
Cela irait bien si je n'avais ces icônes de vidéo à ne mettre qu'en entête des articles seuls (H1). Cela dit, je ne connaissais pas UP, ça peut toujours être utile, mais ici ça ne peut pas marcher. J'explique :
Comme je souhaite que cette icône de vidéo soit également affichée dans le titre des articles concernés des débuts d'articles affichés en tant que blog d'articles de catégorie, aussi dans les titres des débuts d'articles affichés en tant qu'éléments taggés. J'ai vu pour ces 2 derniers cas que les titres étaient en H2 et H3… pas simple car il me faudrait les icônes visibles dans tous les titres concernés (H1, H2 et H3 selon l'affichage des articles).
Pour faire court, j'aimerais que cette icône de vidéo apparaisse dans le titre qui comporte une vidéo quelque soit l'affichage de l'article (blog, élément taggé, article).

lefabdu51

Non non, pour l'instant je n'ai fait qu'une tentative directement dans le titre de l'article, mais comme vous dites, le code s'efface à l'enregistrement. Pas moyen d'insérer du html dans un titre d'article du coup ?
Sinon pourquoi mettre un . avant <i class="etc> ? Les . sont normalement à mettre dans le fichier css pour marquer les classes… ?! bref.


J'ai tenté différentes manières :
– la 1ère en essayant d'insérer des champs comme indiqué dans le magazine joomla (lien indiqué ci-dessus), sauf que je ne trouve pas comment créer les fichiers en substitution dans Affichage > com_content, je ne vois que ce fichier field et ne trouve pas les fichiers php où ils disent d'opérer les changement. Et finalement même dans cet exemple, ils ne parlent que du fichier des articles de blog de catégorie alors que je souhaiterais partout…

– la 2nde en donnant les lignes citées ci-dessus dans mon fichier user.css pour les classes des titres d'articles que je ne sais pas indiquer pour dire que ce sont tous les articles épinglés (étant donné que je ne vois pas de classe à attribuer aux articles excepté que par les liens de menus – ce que j'aimerais éviter – en indiquant {content : '\f03d';}
Mais je ne sais même pas si ça marcherait avec les articles épinglés pour autant, c'est une idée que j'ai eue pour essayer d'attribuer une classe à ces articles… C'est pour ça que je cherchais comment indiquer les titres des articles épinglés (tentatives fausses dans mon 1er message : .featured-articles h1::after, etc).

Le plus simple pour moi serait de pouvoir insérer le code de l'icône dans le titre de l'article directement, sauf que ça s'efface.
Dans l'état actuel des choses il y a écrit dans le titre "(vidéo)" à la fin des titres des articles concernés, que j'aimerais pouvoir remplacer par l'icône.

Si vous voulez voir en ligne ma problématique, site dernière version de Joomla template Cassiopeia
un exemple ici (blog de catégorie) : https://moultipass.passagers-du-mond...e-nord-juillet
un autre là (éléments taggés) : https://moultipass.passagers-du-mond.../mexique?types[0]=1
et autre cas ici (article) : https://moultipass.passagers-du-mond...ie/altai-russe

Verriez-vous une issue à ma problématique ?

Merci !

[elchecmoi]

Bonsoir,

Il y a peut-être d'autres solutions, mais UP sait le faire avec ce shortcode

{up addclass=icone-video | selector=.page-header | css-head=.icone-video > h1:before[content:"\f03d"; font-family: "Font Awesome 6 Free";]}

J'ai testé sous Joomla 5.2.3 avec Cassiopeia. A ajuster selon le template
f03d est le code du caractère icone video de font-awesome

Je n'ai peut-être pas assez regardé UP, je suis en train… Encore un beau plugin Lomart j'ai l'impression, bravo ! Si jamais vous pensez que votre code pourrait se répercuter sur les titres des blogs de catégorie et d'éléments taggés, merci de bien vouloir me l'indiquer, pour l'instant j'arrête.

[lomart]

Bonjour,

UP est un plugin de contenu qui fonctionne dans les articles (intro et fulltext) et dans les modules perso

Pour un blog de catégorie, comme toutes les intros ont la même structure, il faut cibler différemment le bloc parent. Pour cela, on utilise l'option parent de l'action addclass

{up addclass=icone-video | parent=1 | css-head=.icone-video h2:before[content:"\f03d"; font-family: "{up snippet=fontawesome}";]}

Ce shortcode veut dire que l'on ajoute la classe icone-video au bloc de niveau immédiatement supérieur à celui qui contient le shortcode.
Ensuite on définit la règle CSS pour le premier H2 enfant de la classe icone-video.
Pour prévoir un éventuel changement de version de font-awesome, J'ai placé son nom dans un snippet. Voir la doc de l'action pour son fonctionnement. Il faut exécuter une fois ce shortcode pour le définir avant de l'utiliser

{up snippet=fontawesome}Font Awesome 6 Free{/up snippet}

[elchecmoi]

Bonjour,

UP est un plugin de contenu qui fonctionne dans les articles (intro et fulltext) et dans les modules perso

Pour un blog de catégorie, comme toutes les intros ont la même structure, il faut cibler différemment le bloc parent. Pour cela, on utilise l'option parent de l'action addclass

{up addclass=icone-video | parent=1 | css-head=.icone-video h2:before[content:"\f03d"; font-family: "{up snippet=fontawesome}";]}

Ce shortcode veut dire que l'on ajoute la classe icone-video au bloc de niveau immédiatement supérieur à celui qui contient le shortcode.
Ensuite on définit la règle CSS pour le premier H2 enfant de la classe icone-video.
Pour prévoir un éventuel changement de version de font-awesome, J'ai placé son nom dans un snippet. Voir la doc de l'action pour son fonctionnement. Il faut exécuter une fois ce shortcode pour le définir avant de l'utiliser

{up snippet=fontawesome}Font Awesome 6 Free{/up snippet}

Merci Lomart pour ces explications ! Bon, cela me semble compliqué, surtout pour la personne qui mettra à jour le site car cela implique de revoir tous les articles concernés (une centaine), sans parler de ceux à venir.
Même si je persévère à utiliser UP, cela implique-t-il d'avoir 3 lignes de shortcodes au début des articles comportant une vidéo ? Un pour le titre de l'article, un pour l'affichage des articles en blog de catégorie et un pour l'affichage des articles en éléments taggés ?
Ce serait tellement plus simple de pouvoir attribuer une classe aux articles ou d'insérer du code html dans le titre…
Désolée de ne pas être assez fortiche.
Merci encore !

[elchecmoi]

<i class="fa-solid fa-video></i> ce code est inexact , il manque ". <i class="fa-solid fa-video"></i>
Il disparait lors de l enregistrement.
Les fichiers que vous modifiez sont des fichiers php ? .... car pour faire un override (surcharge en fr), si le fichier n'existe pas, il faut cliquer dessus. La colonne est affichage > joommla > contenu. Les fichiers sont crées dans html > layouts > joomla > content et vous avez les fichiers demandés par la suite du tutoriel. La on trouves bien le fichier blog_style_default_item.php

Je vois enfin le fichier blog_style_default_item.php dans le template html > layouts > joomla > Content !
Par contre, maintenant il y a 2 fichiers de ce nom, dont un second se terminant par une suite de chiffres correspondant à la date heure. Est-ce que c'est parce que j'ai créé 2 substitutions ? Puis-je supprimer ce dernier fichier ?
Du ménage va s'imposer avec tous ces fichiers…
Nouvelle question : ce dossier Joomla existait-il dans html > layouts avant de créer une substitution ?
Aussi, je crois comprendre que le . <i class="fa-solid fa-video"></i> est à insérer dans la valeur du champ ?
Désolée d'être aussi dure de la comprenette…

Et pour les articles affichés plein pot et les titres des éléments taggés, est-ce que par hasard vous sauriez quels fichiers je devrais modifier ?

[lomart]

Merci Lomart pour ces explications ! Bon, cela me semble compliqué, surtout pour la personne qui mettra à jour le site car cela implique de revoir tous les articles concernés (une centaine), sans parler de ceux à venir.

Je comprends tout à fait. La solution que je propose est viable pour un petit nombre de page ou lorsque la mise en avant ne suit pas de logique.

Ce serait tellement plus simple de pouvoir attribuer une classe aux articles ou d'insérer du code html dans le titre…

Entièrement d'accord, affecter une classe à l'article permettrait d'ajouter une icône à l'article avec une seule règle CSS

.class-article  .page-header > h1, .class-article .page-header > h2{la règle}

Je ne sais pas si un custom-field fait cela ?
Pour l'insertion de code HTML, cette discussion m'a fait réfléchir et j'ai écrit hier une action qui permet d'insérer du code HTML n'importe où dans la page web. Mais cela ne résout pas ton problème, il le simplifie

[lefabdu51]

oui vous pouvez supprimer le second fichier sans soucis, comme cela il n y en a qu un seul qui apparaitras. Le principé étant que si tu crées plusieurs fichiers de surcharge, c est que tu les utilise en fonction des pages.

Non dossier html ne contient que les surcharges standard. Les fichiers sont automatiquement copiés depuis les fichiers systeme dans le dossier html lors de la création de la substitution.

Tu peux aussi les créer manuellement.

[elchecmoi]

Merci à vous 2 pour vos retours !
J'ai réussi à insérer l'icône de vidéo dans les titres des articles concernés des blogs de catégorie. Le tuto aidant bien, c'est nickel (avec un peu de persévérance…) !
Par contre je ne vois vraiment pas quel fichier choisir pour les éléments taggés, et pas encore cherché pour les titres des articles entiers (H1).
Quelqu'un pourrait-il me mettre sur la piste ?

[lefabdu51]

Pour les titres des articles, la substitution a creer est dans composants > com_content > article . Le fichier à editer est html > com-content > article > default.php

<div class="page-header">
<<?php echo $htag; ?>>
<?php echo $this->escape($this->item->title); ?>
</<?php echo $htag; ?>>
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if ($isNotPublishedYet) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
<?php endif; ?>
<?php if ($isExpired) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
<?php endif; ?>
</div>​

ce code sert pour l'affichage du titre (ligne 57 à 64). tu remet le meme code que dans la premiere substitution

<div class="page-header">
$jcfields = $displayData->jcfields;
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}
$iconClass = implode(',', $jcfields['icon']->rawvalue);​
<?php if(!empty($iconClass)) : ?>
<span class="<?php echo $iconClass; ?>" aria-hidden="true"></span>
<?php endif; ?>​
<<?php echo $htag; ?>>
<?php echo $this->escape($this->item->title); ?>
</<?php echo $htag; ?>>
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if ($isNotPublishedYet) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
<?php endif; ?>
<?php if ($isExpired) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
<?php endif; ?>
</div>​

la ligne

<<?php echo $htag; ?>>

sert a afficher le H1 avant le titre .tout ton code doit être juste au dessus
Note: le code personnalisé que j ai mis juste au dessus est directement tiré du tuto. A toi de l'adapter en fonction de ce que tu a fait.

Question, tes tags sont affichés via quel module ?
L'avantage de ce tuto est que l'icone est facilement modifiable selon les articles. Tu n as qu a changer le contenu du champ personnalisé pour changer l'icone. et si tu ne met rien alors c est invisible. s 'il te prend l'envie de mettre des fichiers audio dans certains articles, tu n a qu a utiliser ce marqueur <i class="fa-solid fa-music"></i> dans le champ personnalisé correspondant a la place du marqueur video.

[elchecmoi]

Pour les titres des articles, la substitution a creer est dans composants > com_content > article . Le fichier à editer est html > com-content > article > default.php

C'est TOP ! Merci beaucoup !!!! Plein de révérences !

Question, tes tags sont affichés via quel module ?
L'avantage de ce tuto est que l'icone est facilement modifiable selon les articles. Tu n as qu a changer le contenu du champ personnalisé pour changer l'icone. et si tu ne met rien alors c est invisible. s 'il te prend l'envie de mettre des fichiers audio dans certains articles, tu n a qu a utiliser ce marqueur <i class="fa-solid fa-music"></i> dans le champ personnalisé correspondant a la place du marqueur video.

Les tags sont affichés via des liens de menu (principal). Ah, ce serait donc via le module…
Je ne pense pas avoir besoin d'autres icônes, cela dit, j'ai bien compris le principe maintenant, et j'ai en fait fait des listes où j'ai un vide et un avec l'icône vidéo, mais en effet je pourrais en créer davantage.

[elchecmoi]

Pour les titres des articles, la substitution a creer est dans composants > com_content > article . Le fichier à editer est html > com-content > article > default.php

…

ce code sert pour l'affichage du titre (ligne 57 à 64). tu remet le meme code que dans la premiere substitution

…

la ligne

<<?php echo $htag; ?>>

sert a afficher le H1 avant le titre .tout ton code doit être juste au dessus
Note: le code personnalisé que j ai mis juste au dessus est directement tiré du tuto. A toi de l'adapter en fonction de ce que tu a fait.

Pour les titres des articles affichés en pleine page, le résultat me donne le code avant le titre H1.
"$jcfields = $displayData->jcfields; foreach($jcfields as $jcfield) { $jcfields[$jcfield->name] = $jcfield; } $iconClass = implode(',', $jcfields['icon']->rawvalue);
titre H1"
J'ai pourtant bien suivi ton exemple, et revu celui du tuto. Il est vrai que j'ai mis les icônes après le titre, mais cela ne devrait pas y changer grand-chose ?!?
Sinon j'ai appelé mon champ "icon"

Pour être certaine, je te mets le début du code de mon fichier de substitution de html > com_content > article > default.php
Mais je ne vois pas où j'ai fait l'erreur…

 <?php

/**
* @package Joomla.Site
* @subpackage com_content
*
* [USER="64686"]Copyright[/USER] (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Layout\FileLayout;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Content\Administrator\Extension\ContentComponent;
use Joomla\Component\Content\Site\Helper\RouteHelper;

/** @var \Joomla\Component\Content\Site\View\Article\HtmlVi ew $this */
// Create shortcuts to some parameters.
$params = $this->item->params;
$canEdit = $params->get('access-edit');
$user = $this->getCurrentUser();
$info = $params->get('info_block_position', 0);
$htag = $this->params->get('show_page_heading') ? 'h2' : 'h1';

// Check if associations are implemented. If they are, define the parameter.
$assocParam = (Associations::isEnabled() && $params->get('show_associations'));
$currentDate = Factory::getDate()->format('Y-m-d H:i:s');
$isNotPublishedYet = $this->item->publish_up > $currentDate;
$isExpired = !is_null($this->item->publish_down) && $this->item->publish_down < $currentDate;
?>
<div class="com-content-article item-page<?php echo $this->pageclass_sfx; ?>">
<meta itemprop="inLanguage" content="<?php echo ($this->item->language === '*') ? Factory::getApplication()->get('language') : $this->item->language; ?>">
<?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;
if (!empty($this->item->pagination) && !$this->item->paginationposition && $this->item->paginationrelative) {
echo $this->item->pagination;
}
?>

<?php $useDefList = $params->get('show_modify_date') || $params->get('show_publish_date') || $params->get('show_create_date')
|| $params->get('show_hits') || $params->get('show_category') || $params->get('show_parent_category') || $params->get('show_author') || $assocParam; ?>

<?php if ($params->get('show_title')) : ?>
<div class="page-header">
$jcfields = $displayData->jcfields;
foreach($jcfields as $jcfield) {
$jcfields[$jcfield->name] = $jcfield;
}
$iconClass = implode(',', $jcfields['icon']->rawvalue);​
<?php if(!empty($iconClass)) : ?>
<span class="<?php echo $iconClass; ?>" aria-hidden="true"></span>
<?php endif; ?>​
<<?php echo $htag; ?>>
<?php echo $this->escape($this->item->title); ?>
</<?php echo $htag; ?>>
<?php if ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<?php if ($isNotPublishedYet) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JNOTPUBLISHEDYET'); ?></span>
<?php endif; ?>
<?php if ($isExpired) : ?>
<span class="badge bg-warning text-light"><?php echo Text::_('JEXPIRED'); ?></span>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($canEdit) : ?>
<?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
<?php endif; ?>

<?php // Content is generated by content plugin event "onContentAfterTitle" ?>
<?php echo $this->item->event->afterDisplayTitle; ?>
…
​

[lefabdu51]

et tu le veux apres?