[Problème] Cassiopeia et titre menu comme Helix, T4...

[altacrea]

Bonjour,
Pour joomla 4, je teste l'override Cassiopeia pour voir si je peux me passer de mon T4 framework.

Cependant, je bute sur ce problème de titre de menu.
Je voudrais reproduire la fonction titre de menu (le titre dans une "bande" horizontale width à 100% ) comme dans le framework Helix.




















C'est possible avec Cassiopiea d'intégrer cette fonction?
(je peux créer des modules personnalisés avec un titre simple pour chaque section concernée mais cette fonction serait bien pratique.)

Merci

[woluweb]

Question intéressante.

Pour un petit site, je ne me serais pas posé la question : j'aurais dupliqué un module 10 fois et basta.

Mais maintenant que tu poses la question, vrai qu'il y aurait moyen de faire mieux.
Voici la 1e idée qui me vient en tête, mais d'autres auront peut-être des suggestions :
1. créer un seul module dans la position voulue (p.ex. de type Custom HTML)
2. puis créer un override de Custom HTML
3. dans cet override, il faudrait coder "si vue = article alors afficher le titre de l'article"

Si tu n'y connais rien en PHP, il suffit d'utiliser p ex Articles Anywhere de Regular Labs pour afficher facilement le titre de l'article courant : https://docs4.regularlabs.com/articl...urrent-article

[altacrea]

Merci. Au départ mon override marchait bien pour ce titre, car je customisais mon "page heading" de menu avec blog.php, et defaut.php sauf que pour faire cette fonction de titre de menu "come Helix" ça marche pas.

L'option de création d'un module pour cette fonction est je pense la meilleur piste si on veut rester en Joomla pure (min de mod et composants externes)
Comme, par exemple, votre excellent off.canvas.php (Une case en moins pour le framework T4)

1- J'ai fait un override de mod_custom.
2-Renommé en headtest.php
3- Modifié son code :

<?php
/**
* @package Joomla.Site
* @subpackage mod_custom
*
* Copyright (C) 2009 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\Uri\Uri;

$modId = 'mod-custom' . $module->id;

if ($params->get('backgroundimage'))
{
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->addInlineStyle('
#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}
', ['name' => $modId]);
}

?>

<div id="<?php echo $modId; ?>" class="mod-custom custom">
<?php if ($params->get('page_heading')) : ?> <?php endif; ?>
</div>

4- J'ai publié le module en position bannere et choisit dans Avancé> Type de mise en page "headtest"

et...ça marche pas. Les tutos pour ce genre de manip est assez rare pour J4.

[daneel]

Bonjour,

Mon choix :

1. Créer un groupe de champ et divers champs spécifiques à l'entête
2. Associer à la catégorie, à l'article ou au menu
3. Effectuer les overrides nécessaires dans un template enfant

Ainsi le paramétrage pourrait s'adapter selon la catégorie et on peut inclure le titre ainsi que le fil d'ariane.

Perso, j'ajoute les champs nécessaire pour définir le fond soit par dégradé de couleur, image de fond responsive en plus de la reprise du titre en H2 et effet de transition. Quand j'évoque ces effets de transition, je veux évoquer par exemple des effets de vagues de type svg : https://codepen.io/goodkatz/pen/LYPGxQz

Alors essayons de travailler pas à pas...

On a les champs personnalisés dans Joomla donc ajouter des champs supplémentaires à une catégorie ou à un article reste dans les possibilités de tous. Il reste ensuite la personnalisation de la vue blog ou article, un peu de css dans un template enfant donc tout va bien.

Pour vous aider, voici les champs définis par helix que l'on peut s'inspirer pour modifier l’entête :

• Activer titre de page : champ radio : oui ou non
• Titre alternatif : champ texte
• Sous-titre : champ texte
• Choix de balise titre : champ radio : valeur H1 ou H2
• Couleur de fond : champ color : valeur hexa #rrggbb
• Image de fond : champ media

Dans l'override, il faudra vérifier si les valeurs existent et appliquer la mise en page en incluant le fil d'ariane au besoin.
le choix de la couleur ou de la balise titre se définit par des classes css et la balise style.

Pour là, je pense que c'est une limite de compréhension et on peut s'arrêter là car il faut s'accrocher pour comprendre la suite
mais si vous du temps et un peu d'ouverture d'esprit, ça vaut le coup car cela devient génial... !!

A titre professionnel en tant que concepteur de template sur mesure, on développe pour intégrer les champs dans le template avec un plugin qui accompagnera le template (comme helix a son framework en plugin, on réalise son équivalence). A la différence d'helix, on créé des dégradés css en background ou des svg animé dynamique. Bref, on envoi du lourd !!

L'avantage, c'est le fait de mettre en cache donc une seule requête et on peut aller plus loin que les custom field. Mais vraiment plus loin !!
Pour vous aider à construire vos premiers champs qui s'ajouteront à tous type de contenu (y compris dans les menus comme c'est le cas avec Helix) qui respecte le standard Joomla, ce n'est pas si difficile... ( si si !! ).

voici de quoi vous amuser à créer cela sous JOOMLA 4.
Je dis s'amuser car bien que l'on a un peu de difficulté, il faut prendre du plaisir à le faire !

Je vais détailler en utilisant Cassiopeia d'origine mais une fois la technique maitrisée, il faut le faire dans un template enfant.

Allez, c'est parti ! Let's Go !

1. Télécharger et installer le plugin n3t Fields (n'oubliez pas de l'activer).

https://bitbucket.org/n3t/n3t-fields/downloads/

2. Aller dans le répertoire de votre template cassiopeia pour créer un nouveau repertoire "n3tfields"

3. Dans ce repertoire n3tfields créé, vous aller créer un sous-repertoire définissant le contexte, c'est à dire à quel endroit vous souhaitez saisir ces champs.
Pour le contenu (articles et categories) par exemple, vous devez donc créer "com_content".

4. Dans ce répertoire com_content, utilisez un editeur comme notepad++ pour créer un fichier nommé "article.xml"
Celui-ci va contenir la définition de vos champs et du groupe qui s'affichera en onglet de votre article.

Copier et coller le contenu suivant dans le fichier article.xml et sauvegarder dans votre repertoire com_content.

<?xml version="1.0" encoding="utf-8"?>
<form>
<fields name="n3tfields">
<fieldset name="myparams" label="Mes champs supplementaires">
<field name="titre" type="text" label="Titre alternatif" />
<field name="couleur" type="color" default="rgba(255, 0, 0, 1)" format="rgba" label="Couleur" />
<field name="image_de_fond" type="media" />
</fieldset>
</fields>
</form>

5. En résumé vous avez depuis la racine de votre site :

templates/cassiopeia/n3tfields/com_content/article.xml

6. Testez à présent l'édition de votre article pour vérifier !
Vous devez retrouver cet onglet supplémentaire dans votre article sans avoir défini de champs personnalisés !
Donc comme les templates comme Helix !

7. Il vous restera ensuite l'ajout dans les overrides avec les spécifités de nt3fields.

Pour cela faites une substitution (override) de la mise en page d'article ( système > templates du sites > Cassiopeia Détails et fichiers puis dans l'onglet "créer des substitutions", cliquer sur com_content > article ).

8. Editer le fichier d'override defaut.php disponible dans :

templates/cassiopeia/html/com_content/article/defaut.php

inserer ligne 50, juste avant

<?php if ($params->get('show_title')) : ?>

<?php
if (class_exists('n3tFields'))
{ $article_id = JFactory::getApplication()->input->get('id');
$titre = n3tFields::_('com_content.article', $article_id, 'titre', 'test champ vide');
$couleur = n3tFields::_('com_content.article', $article_id, 'couleur', '#555');
} else {$value = 'valeur sans n3tFields';}
?>

<div class="jumbotron jumbotron-fluid">
<div class="container" style="background:<?php echo $couleur; ?>;color:#fff">
<h1 class="display-4"><?php echo $titre; ?></h1>
<p class="lead">texte de sous-titre</p>
</div>
</div>

Ce code exemple en bootstrap fera afficher la valeur du champ "titre" si celui-ci est rempli sinon il affichera champ vide.
Si n3tfields n'est pas installé, il affichera le message d'avertissement.
La couleur de fond correspond à la valeur que vous aurez défini dans le champ correspondant.

9. tester, changer la valeur et tester encore...

Après, c'est une question de faire une présentation plus sympathique, ajouter les autres champs, l'image en background, le fil d'ariane mais vous avez la base.

La documentation de N3t Fields est ici :

https://n3tfields.docs.n3t.cz/en/latest/

N'hésitez pas à faire votre retour sur le sujet ou si une personne veut finaliser l'exemple, n'hésitez pas !
C'est volontaire car je vous invite ici à découvrir les champs de Joomla au delà de ceux que l'on peut créer dans le backend de Joomla.

Perso, j'en suis désormais à créer d'autres types de champs ou d'utiliser des librairies partagés par d'autres développeurs,
cela permet de dépasser ce que l'on connait habituellement avec des paramètres inédits.

[daneel]

En version simplifiée et complète :

1. Télécharger et installer le plugin n3t Fields (n'oubliez pas de l'activer).

https://bitbucket.org/n3t/n3t-fields/downloads/

2. Créer le répertoire n3tfields dans le repertoire du template "cassiopeia"

3. Créer avec notepad++ le fichier "article.xml" contenant le contenu suivant (copier / coller )

<?xml version="1.0" encoding="utf-8"?>
<form>
<fields name="n3tfields">
<fieldset name="headerpage" label="Titre de page">
<field name="enable_headerpage" type="radio" default="0" label="Activer le header de page" description="activer un entete de page personnalise">
<option value="1">oui</option>
<option value="0">non</option>
</field>
<field name="titre" type="text" label="Titre Alternatif" />
<field name="choix_balise_titre" type="radio" default="h2" label="Balise de Titre" description="Choisissez la balise du titre">
<option value="h1">H1</option>
<option value="h2">H2</option>
</field>
<field name="sous_titre" type="text" label="Sous Titre" />
<field name="couleur" type="color" default="rgba(255, 0, 0, 1)" format="rgba" label="Couleur de fond" />
<field name="couleurtexte" type="color" default="#fff" format="rgba" label="Couleur de texte" />
<field name="image_de_fond" type="media" label="Image de fond" description="Si vous avez choisi une image, elle remplace la couleur de fond." />
</fieldset>
</fields>
</form>

4. Enregistrer ce fichier article.xml dans le repertoire n3tfields créé précédemment

5. Créer la substitution (c'est à dire l'override) de la vue article par défaut.
système > templates du sites > Cassiopeia Détails et fichiers puis dans l'onglet "créer des substitutions", cliquer sur com_content > article

6. Editer le fichier default.php créé dans le repertoire cassiopeia > html > com_content > article > default.php
avec notepad++ ou l'ide de votre choix.

7. A la ligne 50 de ce fichier default.php, juste avant <?php if ($params->get('show_title')) : ?>
coller le contenu suivant et enregistrer, c'est tout !

<?php
$article_id = JFactory::getApplication()->input->get('id');
if (class_exists('n3tFields')) {
$cbtitre = n3tFields::_('com_content.article', $article_id, 'choix_balise_titre', '');
$enabletitle = n3tFields::_('com_content.article', $article_id, 'enable_headerpage', '0');
$titre = n3tFields::_('com_content.article', $article_id, 'titre', $this->escape($this->item->title));
$soustitre = n3tFields::_('com_content.article', $article_id, 'sous_titre', '');
$couleur = n3tFields::_('com_content.article', $article_id, 'couleur', '');
$couleurtexte = n3tFields::_('com_content.article', $article_id, 'couleurtexte', '');
$image_de_fond = n3tFields::_('com_content.article', $article_id, 'image_de_fond', '');
} else {$value = 'le plugin n3tFields est absent ou inactif';}
?>
<?php if ($enabletitle == 1):
$style = '';
if($couleur) { $style .= 'background-color: ' . $couleur . ';'; }
if($couleurtexte) { $style .= 'color: ' . $couleurtexte . ';'; }
if($image_de_fond) { $style .= 'background-image: url(' . Uri::root(true) . '/' . $image_de_fond . ');'; }
if($style) { $style = 'style="' . $style . '"'; }
?>
<div class="jumbotron jumbotron-fluid">
<div class="container" <?php echo $style; ?>>
<<?php echo $cbtitre; ?> class="display-4"><?php echo $titre; ?></<?php echo $cbtitre; ?>>
<p class="lead"><?php echo $soustitre; ?></p>
</div>
</div>
<?php endif; ?>

8. Vous pouvez tester, vous avez l'équivalent des paramètres que l'on retrouve dans helix ultimate avec le choix de couleur et le choix d'image.

[daneel]

Pour aller plus loin :

1. Si vous souhaitez avoir des champs dans chaque catégorie, il suffira de reprendre la même logique mis à part
que le fichier xml situé dans le com_content de nt3fields sera category.xml.

2. Si vous souhaitez avoir des champs dans le menu, il faudra créer le repertoire com_menus situés dans le repertoire n3tfields de votre template
Le fichier xml se nommera item.xml

Cela vous permet donc d'ajouter des champs à chaque fois que l'on a une structure de formulaire standard de Joomla, ce qui est la logique de chaque
composant core de Joomla mais aussi d'un bon nombre d'extensions tierces. Comme vous avez compris, le fait que cela se passe dans votre template
permet d'éviter de toucher au template d'origine et d'étendre les possibilités de paramétrages.

Plus d'infos : https://n3tfields.docs.n3t.cz/en/latest/fields/usage/

[altacrea]

L'ajout d'un plugin me gène un peu cherchant à garder un Joomla 4 "pur" juste modifié par override. Mais, votre solution est très intéressante, je vais tester.

[daneel]

Helix utilise son propre plugin pour "surcharger" les xml des extensions core de Joomla dont le système de menu
L'idée que je vous propose est en fait d'être capable de reproduire cela en utilisant votre propre écriture du fichier xml.

Le plugin ne fait qu'éviter de toucher au code natif, il est codé pour utiliser le standard des formulaires joomla et c'est ce qui se rapproche le plus d'une solution complétement transparente. C'est à dire que l'on pourrait penser que les champs que l'on ajoute font partie du template d'origine.
De plus, il prend bien la gestion du cache donc ces champs ne prennent quasiment pas de ressources supplémentaires.

[altacrea]

Merci pour ces précisions "alléchantes"

[altacrea]

Alors j'ai bien les éléments sur l'admin de mon article,



mais, ensuite... Je fais quoi ? (rien ne se passe en front) Merci

[daneel]

mais, ensuite... Je fais quoi ? (rien ne se passe en front) Merci

Il faut vérifier les étapes 5, 6 et 7 consistant à créer la surcharge et d'inserer le code dans l'affichage de l'article.

https://forum.joomla.fr/forum/joomla-4-x-aa/questions-g%C3%A9n%C3%A9rales-aa/2041323-cassiopeia-et-titre-menu-comme-helix-t4?p=2041334#post2041334

Attention, j'ai bien donné en exemple l'explication pour l'affichage de l'article que l'on a édité.

Pour vérifier, j'ai donc simplement afficher l'article et je vois bien mon bloc avec les paramètres que j'ai défini (image, titre, etc...)
L'affichage est indépendant des autres articles et des autres vues.

Il est possible également de répéter l'opération sur d'autres surcharge (vue blog par exemple) ou de paramétrer d'autres articles.

[altacrea]

Ok merci, c'était le fichier xml. (J'avais copié le 1er code au lieu du deuxième)



Par contre, il faut que j'adapte pour avoir l'effet comme "Helix" :
- titre menu avec fil d'ariane soit dans un module custom ou breadcrumbs.
- Il faudrait qu'il soit en 1er position banniere (whidth :100%) pour bien être sous le menu.
Au boulot...

[altacrea]

J'ai consulter l'aide et mit en place pour le module. J'ai bien l'onglet en admin du MODULE .

Dans le defaut.php je modifie :

<?php
/**
* @package Joomla.Site
* @subpackage mod_custom
*
* Copyright (C) 2009 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\Uri\Uri;

$modId = 'mod-custom' . $module->id;

if ($params->get('backgroundimage'))
{
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->addInlineStyle('
#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}
', ['name' => $modId]);
}

?>

<div id="<?php echo $modId; ?>" class="mod-custom custom">

<?php
$article_id = JFactory::getApplication()->input->get('id');
if (class_exists('n3tFields')) {
$cbtitre = n3tFields::_('com_content.article', $article_id, 'choix_balise_titre', '');
$enabletitle = n3tFields::_('com_content.article', $article_id, 'enable_headerpage', '0');
$titre = n3tFields::_('com_content.article', $article_id, 'titre', $this->escape($this->item->title));
$soustitre = n3tFields::_('com_content.article', $article_id, 'sous_titre', '');
$couleur = n3tFields::_('com_content.article', $article_id, 'couleur', '');
$couleurtexte = n3tFields::_('com_content.article', $article_id, 'couleurtexte', '');
$image_de_fond = n3tFields::_('com_content.article', $article_id, 'image_de_fond', '');
} else {$value = 'le plugin n3tFields est absent ou inactif';}
?>
<?php if ($enabletitle == 1):
$style = '';
if($couleur) { $style .= 'background-color: ' . $couleur . ';'; }
if($couleurtexte) { $style .= 'color: ' . $couleurtexte . ';'; }
if($image_de_fond) { $style .= 'background-image: url(' . Uri::root(true) . '/' . $image_de_fond . ');'; }
if($style) { $style = 'style="' . $style . '"'; }
?>
<div class="jumbotron jumbotron-fluid">
<div class="container" <?php echo $style; ?>>
<<?php echo $cbtitre; ?> class="display-4"><?php echo $titre; ?></<?php echo $cbtitre; ?>>
<p class="lead"><?php echo $soustitre; ?></p>
</div>
</div>
<?php endif; ?>

</div>

Marche pas

The server returned a "500 - Whoops, looks like something went wrong."

[daneel]

oui logique vu que le contexte (com_content par com_article) a changé

Si je suis ton raisonnement,

Cela donnera dans html/mod_custom/default.php :

<?php
/**
* @package Joomla.Site
* @subpackage mod_custom
*
* Copyright (C) 2009 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\Uri\Uri;

$modId = 'mod-custom' . $module->id;

if ($params->get('backgroundimage'))
{
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
$wa->addInlineStyle('
#' . $modId . '{background-image: url("' . Uri::root(true) . '/' . HTMLHelper::_('cleanImageURL', $params->get('backgroundimage'))->url . '");}
', ['name' => $modId]);
}

?>
<?php
$module_id=$module->id;
if (class_exists('n3tFields')) {
$cbtitre = n3tFields::_('com_modules.module', $module_id, 'choix_balise_titre', '');
$enabletitle = n3tFields::_('com_modules.module', $module_id, 'enable_headerpage', '0');
$titre = n3tFields::_('com_modules.module', $module_id, 'titre' ,$module->title);
$soustitre = n3tFields::_('com_modules.module', $module_id, 'sous_titre', '');
$couleur = n3tFields::_('com_modules.module', $module_id, 'couleur', '');
$couleurtexte = n3tFields::_('com_modules.module', $module_id, 'couleurtexte', '');
$image_de_fond = n3tFields::_('com_modules.module', $module_id, 'image_de_fond', '');
} else {$value = 'le plugin n3tFields est absent ou inactif';}
?>
<?php if ($enabletitle == 1):
$style = '';
if($couleur) { $style .= 'background-color: ' . $couleur . ';'; }
if($couleurtexte) { $style .= 'color: ' . $couleurtexte . ';'; }
if($image_de_fond) { $style .= 'background-image: url(' . Uri::root(true) . '/' . $image_de_fond . ');'; }
if($style) { $style = 'style="' . $style . '"'; }
?>
<div id="<?php echo $modId; ?>" class="mod-custom custom" <?php echo $style; ?>>
<<?php echo $cbtitre; ?> class="display-4"><?php echo $titre; ?></<?php echo $cbtitre; ?>>
<p class="lead">
<?php echo $soustitre."<br>";
echo $module->content; ?>
<br></p>
<?php endif; ?>
</div>

Tu peux tester, cela fonctionne !


Explications :

J'ai utilisé la div du module custom, on pourrait également supprimer le champ image de fond vu qu'il existe déjà dans le module personnalisé.
et pour le titre, j'ai utilsié comme valeur par défaut, le titre du module ($module->title) qui sera affiché si celui-ci n'est pas défini dans le champ titre alternatif.

Comme la documentation explique : il faut préciser le contexte ainsi que l'élément et le nom du champ

$variable = n3tFields::_('contexte', $element, 'nomduchamp', 'valeurpardefaut'); 

La petite astuce pour se repérer quand tu veux récupérer le contexte, il suffit de regarder l'url quand tu edite les champs en backend....



Ainsi quand tu a inséré un onglet supplémentaire avec les champs dans le module personnalisé, tu as une url en backend qui se présente ainsi :
nomdusite .com.... administrator/index.php? option=com_modules & view=module & layout=edit & id=121 & client_id=0

- l' association de l'option et la vue(view) séparé par un point, c'est le contexte

- L'id, c'est l'identifiant, la valeur de l'élément qui doit être précisé pour distinguer des autres. Avec les modules, l'identifiant était déjà indiqué dans la surcharge (ligne 16).

- Et la valeur par défaut, c'est celle que tu veux afficher quand rien n'est défini dans le champ

[altacrea]

Effectivement cela fonctionne, mais je récupére pas le titre de la page (ou du menu). C'est juste le titre du module.
L'intérêt est d'avoir une fonction automatique de titre qui m'évite ainsi la multiplications de modules en ayant qu'un seul module qui gère cet affichage (comme Helix).
Encore merci pour vos explications, mais j’ai bien peur que je m'éloigne de mon rivage de compétence et que l'apprentissage de cet intéressant plug in ne finisse par me noyer honteusement. La documentation étant trop légère pour me permettre de mieux comprendre à mon humble niveau. Si la doc avait plus d'exemples concrets ce serait bien (comme par ex le site de UP!).