https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Note de l'utilisateur: 5 / 5

Donnez une note !
5 sur 5 - 1 votes
Merci d'avoir noté cet article.

L'un des concepts clés qui rendent Gantry si puissant, c'est qu'il propose une richesse de possibilités et des fonctionnalités qui peuvent être facilement accessibles par le template de Joomla.
Pour vous développeur de template, cela vous facilite l'écriture d'un code propre et vous fournit, comme avantage secondaire, un niveau d'abstraction qui vous permettra de passer de Joomla 2,5 à 3,0 + sans rien changer à votre template.
La bibliothèque de gantry gère tous les morceaux compliqués à votre place.

 

Template index.php

Commençons à creuser dans Gantry en jetant un oeil à ce à quoi ressemble index.php:

 

// no direct access defined
( '_JEXEC' ) or die( 'Restricted index access' );
// load and inititialize gantry class require_once('lib/gantry/gantry.php')
; $gantry->init();

 

Ce bloc de code en haut est tout ce qui est nécessaire pour faire que Gantry soit en place et fonctionne. En incluant le fichier bootstrap gantry.php, vous êtes connecté au framework Gantry et l'initialisez. Un grand nombre de manipulations lourdes se traitent à ce moment, en toute sécurité hors de la vue et l'esprit. Vient ensuite le début de l' HTML:

 

<!doctype html><html xml:lang="" lang="" >
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php $gantry->displayHead(); 
$gantry->addStyle('grid-responsive.css', 5); 
$gantry->addLess('global.less', 'master.css', 8); 
$gantry->addScript('rokmediaqueries.js'); ?>
</head>

 

 

Ici vous pouvez voir que les traditionnels appels Joomla pour obtenir la langue ont été remplacés par les appels Gantry équivalents.
Il ya aussi un appel pour inclure les éléments head. Ceux-ci incluent les CSS et JavaScript qui ont été initialisés et installés dans d'autres parties du framework Gantry.
Vous voyez également un appel pour ajouter des feuilles de style à l'entête du template. Cet appel est construit dans une logique et incluera les CSS de base Gantry , ainsi que notamment les fichiers CSS qui correspondent à ces noms dans les dossiers CSS du template.
De plus, toutes les versions spécifiques à chaque navigateur de ces fichiers sera également ajouté. Par exemple, si vous avez /css/master-ie8.css dans le dossier css du template, il sera également collecté, mais il ne sera présenté qu'aux navigateurs IE8. Une des nouvelles fonctionnalités importantes de Gantry4 est la possibilité d'ajouter et de compiler les fichiers LESS dans le CSS en se servant de la méthode addLess(). Vous pouvez également inclure des fichiers JavaScript avec la méthode addScript(). Portons maintenant notre regard sur le morceau suivant du fichier qui comprend des références à certaines positions de module:

 

<header id="rt-top-surround">                
  <div id="rt-top" >            
    <div class="rt-container">                                
      <div class="clear">
      </div>            
    </div>        
  </div>        
<?php /** End Top **/ endif; ?>

 

Maintenant vous pouvez voir un peu de l''élégance que Gantry apporte. Tout d'abord dans la balise body, vous voyez un appel à la méthode displayBodyTag(). Cela saisit tous les paramètres de template qui ont été désignés via templateOptions.xml pour les afficher dans la balise body. Cela va afficher ces derniers au format PARAM_NAME-PARAM_VALUE. Cela rend vraiment facile la stylisation de votre CSS basé sur un paramètre de template, sans codage exigé de votre part. En dessous, vous pouvez voir les commentaires qui désignent la position "Top". En premier il y a un bloc "if" pour s'assurer qu'il y a un contenu assigné à ces positions, s'il n'y a pas de contenu, alors l'ensemble de la structure HTML "rt-top" n'est pas affichée. À l'intérieur de la div "rt-container" se trouve un appel pour afficher les modules : displayModules() qui prend un nom de position, dans ce cas "top", un type de mise en page, "standard", et un module chrome, également "standard", dont nous en dirons plus ultérieurement. Cette fonction effectue toute l'affichage logique pour les 6 positions de module: top-a, top-b, top-c, top-d, top-e, et top-f. Vous configurez vos modules avec le gestionnaire de Module Joomla comme vous le feriez habituellement, mais cette méthode fait tout le calcul concernant la façon dont les modules devraient afficher.

Configuration XML

Dans le cas de l'exemple dont nous discutons, nous nous référons à une position "top", mais cela représente réellemnt un groupe allant jusqu'à 6 emplacements de modules individuelles dans cette position top. Les emplacements possibles de modules qui s'offrent à vous sont définis dans le fichier templateDetails.xml, dans l'élément XML "position". Il s'agit de l'emplacement standard pour définir des positions pour Joomla, car c'est ce qui est utilisé par le gestionnaire de modules à afficher des positions possibles assignables aux modules. Toutes les options de configuration Gantry personnalisées se trouvent dans le fichier templateOptions.xml. Ce fichier se décompose en fieldsets qui définissent chaque ' onglet que vous voyez dans les options du Template. Le début de ce fichier contient des informations de base sur le template et sa configuration. La position de module"top" a sa propre configuration dans la section layouts avec une valeur par défaut et des paramètres de configuration qui définissent les options qui sont disponibles. Le XML abrégé pour cela ressemble à :

<positions>.....
  <position>top-a</position>
  <position>top-b</position>
  <position>top-c</position>
  <position>top-d</position>
  <position>top-e</position>
  <position>top-f</position>.....
  </positions>.....
<fields name="top" type="position" label="TOP_POS" description="LAYOUT_POS_DESC">    
  <field name="layout" type="positions" default="3,3,3,3" label=""
  <schemas>1,2,3,4,5,6</schemas>        <words>2,3,4,5,6,7,8,9,10</words>    
  </field>
  <field name="showall" type="toggle" default="0" label="FORCE_POS"/>    
  <field name="showmax" type="showmax" default="6" label="POS_COUNT"/>
</fields>.....

 

Paramètres du Template

À ce stade, si vous ne touchez à rien, la mise en page par défaut donnera une taille égale aux modules publiés. Cependant, avec Gantry, vous pouvez complètement contrôler avec combien d'espace chaque position de module doit travailler et ceci est contrôlé à travers les Paramètres des Templates dans l'interface utilisateur . Ci-dessous vous voyez une capture d'écran de la façon dont cet élément de paramètre"topPosition" est rendu dans les paramètres du template.

layouts top position

Les "Positions:" le long du haut représentent les scénarios pour le nombre différent de positions de module occupées. Si vous aviez des modules dans 4 positions de module différentes top-a, top-b, top-c, et top-d cela voudrait dire que vos positions actives serait 4. Le widget mise en page vous montrera toujours le nombre actuel de positions actives en gras. "Force positions" est une option "interrupteur" qui vous permet d'outrepasser le nombre réel de modules et de dire à Gantry d'utiliser un nombre de positions fixes indépendamment de s'il y a effectivement des modules dans ces positions ou pas. Cela est prévu pour quelques mises en page personnalisées sophistiquées.

Une couverture complète des configurations de modules de Gantry et comment mettre en place différentes largeurs peuvent être trouvées dans la section Layouts.

Ajouter un Commentaire