[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}