Changer le HTML produit par les Panels: est-ce possible?

J'aime utiliser des panneaux, mais les panneaux sont difficiles à coiffer en raison de la quantité massive de div qu'elle génère. De plus, les classes qu'il applique à ces divisions n'ont aucun sens et sont également trop volumineuses. Causant la confusion parmi mes collègues frontenders.

Pour vous montrer la sortie qu'ils génèrent:

Le problème est que j'utilise 960.gs et les panneaux ajoutent leurs propres classes et une structure div volumineuse, ce qui m'oblige à remplacer leurs classes. C'est quelque chose que je ne veux pas faire, je veux nettoyer les divs. Est-ce qu'il y a un moyen de faire ça?

Éditer:

Ce que j'ai fait pour nettoyer des div que je considérais comme inutiles:

À partir de la ligne # 388 dans flexible.inc (panneaux / plugins / layouts / flexible)

$output = '';     
//$output = "<div class=\"panel-flexible " . $renderer->base['canvas'] . " clearfix\" $renderer->id_str>\n";
    //  $output .= "<div class=\"panel-flexible-inside " . $renderer->base['canvas'] . "-inside\">\n";

      $output .= panels_flexible_render_items($renderer, $settings['items']['canvas']['children'], $renderer->base['canvas']);

      // Wrap the whole thing up nice and snug
      //$output .= "</div>\n</div>\n";

J'ai en fait fait une copie de la mise en page flexible et édité celle-ci, mais si j'avais plus de temps sur ce projet, je créerais un plugin plus propre pour cela.

Remarque: ce n'est pas la meilleure solution, c'était le chemin le plus rapide possible pour atteindre mon objectif. Créer votre propre petit plugin est la meilleure façon de procéder, vous pouvez toujours utiliser l'un des plugins existants comme base.

J'ai déjà étudié cette question. Voici le numéro que vous souhaitez lire . Cela semble fou au début, mais il y a en fait de bonnes raisons pour que ce soit comme ça.

Conclusion: pensez à la disposition flexible des panneaux comme outil de prototypage . Utilisez - le pour essayer et des projets d' idées dans le développement, la mise en scène, l' utilisateur test etc, alors quand vous avez la mise en page parfaite signé, mettre en œuvre pour la production avec propre, net, HTML optimisé à la main comme une mise en page des panneaux personnalisés (plus sur ceux ci-dessous).

Voici un bref résumé des raisons pour lesquelles il en est ainsi, en fonction de ce problème auquel je suis lié:

• La sortie HTML des panneaux a besoin de tout ce balisage fou pour pouvoir s'adapter aux mises en page flexibles les plus folles que l'on puisse créer - pensez à des charges de fluide imbriqué et de régions fixes côte à côte.
• Rien de généré automatiquement ne sera assez bon pour les puristes HTML, donc les gars de Panels n'ont pas essayé de les satisfaire dans la fonctionnalité de mise en page flexible . Il n'y a donc pas d'algorithme d'optimiseur HTML qui essaie de réduire le HTML généré par votre mise en page au strict minimum, car peu importe sa qualité, ce ne serait toujours pas le meilleur standard HTML.
• Quelque chose qu'ils ne mentionnent pas: s'il y avait un tel optimiseur, certaines modifications de la disposition entraîneraient la disparition des divisions et classes désormais redondantes. Si vous avez suspendu CSS à ceux-ci, vous devrez réécrire votre CSS la plupart du temps lorsque vous apportez une petite modification à une disposition flexible des panneaux. Cela signifie que s'ils avaient essayé (et échoué) de faire des mises en page flexibles des panneaux un outil de production aux meilleures normes, ils l'auraient également affaibli en tant qu'outil de prototypage.
• Vous pouvez obtenir une sortie HTML Panels claire et nette . Le flux de travail attendu, en lisant entre les lignes, est, je crois, quelque chose comme ceci:
  • Vous utilisez les mises en page flexibles des panneaux pendant les premiers développements, tout en essayant des idées.
  • Une fois que vous avez choisi une mise en page particulière, si vous voulez du HTML clair, vous l'implémentez en utilisant une mise en page personnalisée, en utilisant uniquement la quantité précise de balisage HTML dont la mise en page a besoin avec juste les bonnes classes, la sémantique, etc. pour votre site (comment faire ci-dessous ).

Bien que je ne l'aimais pas au début, à la réflexion, je pense que cela a du sens. Plutôt que d'essayer de faire l'impossible et de créer un outil parfait à la fois pour le prototypage et pour les meilleures normes dans un contexte de production - qui ont tous deux des besoins très différents et ne peuvent aboutir qu'à un compromis qui n'était pas tout à fait approprié pour eux - ils 'ai opté pour un outil idéal pour le prototypage et un autre outil séparé (dispositions personnalisées) idéal pour la production allégée.

Cela signifie que vous pouvez tirer le meilleur parti des deux, au prix d'un peu plus de travail implémentant votre mise en page finale en tant que modèle basé sur les meilleurs standards HTML - mais un puriste HTML voudra faire ce petit travail supplémentaire de toute façon pour obtenir leur sortie est parfaite.

Comment créer des dispositions de panneaux personnalisées? Il y a un guide détaillé dans la documentation sur la façon de le faire . Voici un bref résumé de base:

1. Copiez une mise en page existante de /sites/all/modules/panels/plugins/layoutspour devenir/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
2. Renommez les fichiers dans la nouvelle copie pour qu'ils correspondent à leur nouveau nom de dossier. Notez que le .tpl.phpfichier doit avoir des tirets au lieu de traits de soulignement.
3. Ajoutez une ligne au fichier d'informations sur le thème: plugins[panels][layouts] = layoutscela indique aux panneaux que vous avez des dispositions personnalisées dans ce thème et où elles se trouvent (remplacez la chaîne layoutssi ce n'est pas le chemin d'accès de votre thème à votre dossier de dispositions personnalisées)

4. Modifiez les fichiers avec votre code HTML et CSS parfait, élégant, minimal et sémantique.

   • N'oubliez pas de mettre également à jour le .incfichier avec des informations sur votre mise en page comme le nom, les catégories, les noms de fichiers, etc.
   • themedans le fichier .inc doit correspondre au .tpl.phpnom de fichier du fichier, sans l'extension. Tous les themetraits de soulignement que vous entrez ici dans la valeur seront convertis en tirets.
   • Pensez également à modifier l' .pngicône pour mieux refléter votre mise en page réelle.
5. Videz le cache. Votre nouvelle disposition apparaît comme une option dans les panneaux avec le nom, la catégorie, etc. que vous avez spécifié dans le .incfichier. Utilise le.

Vous pouvez également envisager le module Clean Markup Drupal 7 pour contrôler la sortie de balisage pour les panneaux.

J'ai cherché cette page dans le navigateur et je n'en ai pas encore trouvé mention, y compris dans la très bonne réponse complète donnée par user568458.