Templates Bootstrap4 (comme Helix Ultimate) et extensions telles que Tabs, Slides etc

[woluweb]

Juste une petite info que je partage : avec des templates basés sur le tout récent Bootstrap4 (comme le framework Helix Ultimate), on peut avoir certains effets de bord.
Par exemple, j'ai réalisé hier que des extensions que j'utilise régulièrement telles que Tabs ou Slides (de Regular Labs dans mon cas) ne fonctionnent pas correctement.
En cherchant, j'ai réalisé qu'il avait d'autres extensions (Offlajn, ...) et finalement j'ai trouvé cette info :

https://www.regularlabs.com/extensions/tabs/faqs#will-tabs-work-with-a-bootstrap-4-template

Au moins c'est clair: il ne s'agit pas juste d'une ligne css à changer, c'est plus lourd que ça... et beaucoup d'extensions ne sont donc pas compatibles.

(dans le cas de Tabs, changer d'onglet fonctionne... mais l'apparence des Onglets n'est pas changée. Si qqun trouve un petit workaround pour ça, je suis bien sûr preneur. Mais l'objectif du message ici était surtout de conscientiser qu'il peut y avoir des effets de bord à utiliser un template basé sur BS4).

[daneel]

Bonjour Marc,

Effectivement, ce sont des extensions nécessitant des surcharges ou directement obsolètes. Par exemple, il n'est plus nécessaire d'installer une extension avec une css à part pour créer des onglets ou des slides, bootstrap 4 possède déjà les qualités nécessaires. Le développeur du template ajoutera des addons au page builder pour faciliter la création soit dans une page ou dans un module. C'est pour cela que je possède beaucoup plus d'addon pour sppb car ce sont des compléments créés spécifiquement pour activer les éléments inclus à l'origine dans bootstrap 4.

Perso, j'aime beaucoup cette méthode car cela évite d'obtenir des fichiers css dans des modules à indiquer dans robots.txt, on soigne le style des onglets en proposant plusieurs variantes, aucune extension supplémentaire qui pourrait bloquer lors du passage en joomla 4. Perso je travaille sur plusieurs templates dont une version helix ultimate avec material design. Je suis parti sur un developpement similaire à MDB ( https://mdbootstrap.com/material-design-for-bootstrap/ ) et cela se présente plutôt bien mais c'est du travail ! Cela me permet de revisiter en option des composants comme jcomment à la sauce php7+recaptcha invisible complétement intégré avec le design du template.

Pour l'instant, je fais une pause car j'ai beaucoup de demandes sur la réglementation européenne et l'adaptation pour cms, pages html et applications. Bref, pas d'effets de bords mais je conseille de faire une vrai sélection pour éviter d'alourdir inutilement votre site.

[woluweb]

Merci Yann pour tes lumières, toujours aussi précises

En fait, je n'utilise que très rarement SP Page Builder (SPPB)
Et installer SPPB juste pour faire des Tabs, ça ferait lourd dans ce cas-ci
Surtout que c'est au sein des articles que les Tabs doivent apparaître et qu'il y en aura beaucoup (c'est un site présentant des rapports Santé avec plein de statistiques).

Pour garder qqch de léger, j'ai installé l'extension Tabs de JoomlaShack, qui elle n'est pas basée sur Bootstrap et fonctionne donc sur Helix Ultimate (Bootstrap4).

Ca fonctionne quasi comme celle de RegularLabs : on tape
{tab=Mon premier tab}
blabla
{tab=Mon second tab}
toto
{/tabs}

Mais si qqun pense encore à une autre solution (ou peut-on utiliser un addon sppb sans installer tout sppb ?), je suis toujours curieux

[lomart]

Bonjour Marc,

Tu as aussi https://up.lomart.fr/demo/action-tab

Il charge un petit JS de 8Ko et la feuille de style est en SCSS ;-)

UP peut aussi rendre responsive tes tableaux et plein d'autres choses

[daneel]

Pas de souci Marc,

sans le pagebuilder, on a déjà travaillé la-dessus via des shortcodes similaires, ce qui évite d'être supprimé par les filtres de l'éditeur html.
Je pense que Loïc (lomart) pourrait les implanter via ses extensions (comme up) car il ne s'agit que d'éléments existants dans la librairie bootstrap.

Cependant, je fais attention avec les shortcodes car j'exporte le contenu de site joomla sous d'autres formats ( flux xml type rss, json en rest api pour smartphone, assistant ou bot) ou sous google amp.

Edit : grillé par lomart... effectivement on retrouve le système d'onglets dans l'extension "up"

[woluweb]

lomart

Suis-je bête : et dire que j'étais à la présentation de UP au #jd18fr :-D
J'avais pas vu qu'il y avait aussi la possibilité de Tabs.
'faut que j'étudie la liste par coeur

Gé-nial !
En plus, le fait qu'il bascule en accordéon sur smartphone est bien pensé...
Et aussi le fait qu'il ne faut pas mettre de balises autour de chaque nom d'onglet, c'est encore mieux

Tiens, en faisant quelques tests, je vois que l'option
tab=accordion
n'a pas l'air de déclencher (?)

J'essayais aussi l'option
title-tag=h5
(après avoir mis mes titres à considérer comme onglets en h5 bien sûr), mais ça ne marche pas.

Ai-je mal compris l'utilisation des options ?

(Sinon, question idiote : je ne vois pas pourquoi il y a un espace de quelques pixels entre les Tabs proprement dits et le Contenu correspondant. Je ne vois rien en css dans ce sens...)

[lomart]

Marc, tu es un beta-testeur hors pair

Il y avait bien un petit bug sur le paramètre accordion. C'est corrigé sur cette version https://up.lomart.fr/telechargements...actions/27-tab
Il suffit de remplacer le dossier tab du dossier /plugins/content/up/actions/ par celui du zip

J'en ai profité pour forcer le css pour l'espace sous les onglets. Je n'avais pas osé le faire jusqu'ici, car je voulais trouver la raison !

En ce qui concerne le title-tag=h5, ça fonctionne bien chez moi avec ce shortcode

<h2>test h5</h2>
<p>{up tab | title-tag=h5}</p>|
<h5>question n°1+</h5>
<p>texte pour la question n°1</p>
<h5>{up icon=plus} question n°2</h5>
<p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
<h5>question n°3</h5>
<p>4 : {up lorem=3,decorate}</p>
<h5>question n°4</h5>
<p>4 : {up lorem=2}</p>
<p>{/up tab}</p>

Si tu trouves d'autres soucis, n'hésite pas à les remonter

[woluweb]

Loïc,
Merci pour cette nouvelle version !

Je confirme : tab=accordion fonctionne
Pour le title-tag=h5, j'ai réessayé et ça marche. J'ai dû glisser...

Merci aussi pour l'espace sous les onglets, c'est nickel !

Le seul souci que j'ai rencontré concerne l'usage des ID ou des classes sur le titre H4 qui sert de nom d'onglet : j'ai découvert pcq sur le site j'utilise aussi RegularLabs Quick Index, qui ça ajoute une classe ou un ID à H4... et du coup il n'est plus capturé par ta moulinette (d'ailleurs, c'est vrai même si on ajoute une classe soi-même sur le titre H4 je pense). Bref, éventuellement ajouter un petit regex pour qu'il capture le H4, qu'il y a un ID et/ou une classe ou pas, ça pourrait faire sens...

[woluweb]

Ah, encore autre chose : un petit souci avec tab.css : à cause de ces lignes, je vois que partout sur mon site les listes à puces et numérotées sont affectées.
Il faudrait contextualiser ce "ul, li" j'imagine

ul, li {
margin: 0;
padding: 0;
list-style: none;
}

[lomart]

Tu m'énerves je viens de corriger ma regex. j'avais prévu d'intercepter les attributs, mais il manquait un point ;(
A récupérer ici : https://up.lomart.fr/telechargements...actions/27-tab

Sinon, tu peux utiliser n'importe quelle balise. Elle est convertie en LI
Je viens de faire le test avec un h7, ça marche impec. Pas conventionnel, mais ça marche

Sinon, il serait mieux de mettre UP devant RegularLabs Quick Index dans la liste des plugins. Comme cela, le h4 sera converti avant l'analyse par l'autre plugin. Même sans UP, il serait plus logique de le lancer une fois tous le contenu mis à jour.

[lomart]

Ah, encore autre chose : un petit souci avec tab.css : à cause de ces lignes, je vois que partout sur mon site les listes à puces et numérotées sont affectées.
Il faudrait contextualiser ce "ul, li" j'imagine

ul, li {
margin: 0;
padding: 0;
list-style: none;
}

Ces lignes ne servaient à rien. J'ai ajouté les propriétés dans les définitions contextualisées juste après dans le SCSS
A récupérer ici : https://up.lomart.fr/telechargements...actions/27-tab

Merci pour ce débogage. C'est une action que je n'utilise pas (encore), donc difficile de tester tous les cas en situation.

[woluweb]

Yes !
Problème de ul,li bien corrigé

Pour l'ordre des plugins, j'y avais pensé, mais UP est un plugin de Content tandis que Index est un plugin System.
Donc pas de classement possible.

Concernant le regex, je confirme : ça marche maintenant si on ajoute une classe.
Avec {index} cependant j'ai encore un souci de conflit : j'ai deux Tabs, mais le contenu du Tab2 apparaît à la suite du contenu du Tab1 (et pas dans le Contenu du Tab2, qui du coup est vide).

Le plus simple serait que tu testes en installant Quick Index, tu pourras plus facilement voir ce qui coince (là pour moi c'est difficile : tu me pousses dans mes retranchements :-D)

Voilà, maintenant tu pourras causer avec cavo789 de la dure vie des développeurs quand je me mets à tester

[lomart]

Voilà, maintenant tu pourras causer avec cavo789 de la dure vie des développeurs quand je me mets à tester

Il me semble qu'il m'avait prévenu. Mais je pensais qu'il exagérait, mais non tu es redoutable

Je vais tester Quick Index. Tu mets des {index} dans le contenu des onglets ?

Perso, j'utilise Autotoc que tu peux voir à l’œuvre ici : https://kb.joomla.fr/procedures/sauvegarder-site-joomla
L'avantage est que tu n'as rien à faire et tu peux l'exclure pour une page

[woluweb]

Non non, le {index} je le mets en tête d'article, pas dans les Tabs (ne provoque pas un testeur :-D).
(et juste pour les articles où c'est utile)

Pour ce que je vois de auto-toc (https://extensions.joomla.org/extens...icle-auto-toc/) que je ne connaissais pas, c'est sensiblement la même chose.

[lomart]

Test fait avec juste un {index} en tête
QuickIndex est appelé en premier (normal pour un plugin system) et il modifie le contenu de l'article. Quand UP arrive, il a un code qui ne veut plus rien dire
Le seul moyen que j'ai trouvé est d'utiliser des balises h7 qui sont ignorés par QuickIndex

J'ai fait le test avec Autotoc qui est un plugin de contenu que l'on peut mettre après UP dans la liste des plugins. Ça marche bien sans configuration particulière.

Ma réflexion : je ne comprend pas qu'un plugin qui réalise un sommaire le fasse avant que le contenu soit mis en forme par les plugins content.