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

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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 :
    Tabs for Joomla 3 is based on the Bootstrap tabs functionality, so it uses and needs the Bootstrap 2 framework (styles and scripts) that...


    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).
    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

    Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

  • #2
    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.

    Dernière édition par daneel à 12/06/2018, 10h36
    Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

    Commentaire


    • #3
      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).
      Code:
      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
      Dernière édition par woluweb à 15/06/2018, 09h35
      Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

      Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

      Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

      Commentaire


      • #4
        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
        woluweb aime ceci.
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          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"
          Dernière édition par daneel à 15/06/2018, 11h11
          Joomla User Group (JUG) Lille : https://www.facebook.com/groups/JUGLille/

          Commentaire


          • #6
            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...)
            Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

            Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              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
              Code:
              <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

              UP, le plugin universel à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                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...
                Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                Commentaire


                • #9
                  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;
                  }
                  Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                  Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                  Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                  Commentaire


                  • #10
                    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.
                    UP, le plugin universel à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                    Commentaire


                    • #11
                      Envoyé par woluweb Voir le message
                      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.
                      Dernière édition par lomart à 15/06/2018, 14h36
                      UP, le plugin universel à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        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
                        Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                        Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          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
                          UP, le plugin universel à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire


                          • #14
                            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.
                            Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                            Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                            Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                            Commentaire


                            • #15
                              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.
                              UP, le plugin universel à découvrir sur https//up.lomart.fr
                              bgMax
                              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X