Thèmes « HowTos »

Afficher des images aléatoires

Date du document en anglais : 26 Août 2009 - 23h08 - http://drupal.org/node/29522



On peut le faire grâce à un script, nommé rotate.php, trouvé sur alistapart.com.

Procédure :

  1. Créer un dossier sous le dossier racine du serveur web. Je l'ai placé dans mon dossier de thème.
  2. Remplir ce dossier avec des images.
  3. Télécharger le script et stockez-le à l'abri.
  4. Modifiez les script pour qu'il puisse trouver votre dossier image. Si vous ne voulez pas toucher au script, enregistrez-le dans le même dossier que les images.
  5. Dans votre configuration de thème, pour le logo personnalisé, indiquez le chemin vers le script plutôt que le chemin vers le logo.
  6. C'est tout.

Ajouter des classes « first » et « last » aux blocs

Date du document en anglais : 4 Mars 2010 - 23h29 - http://drupal.org/node/293188



Parfois, le premier ou le dernier bloc d'une région doit être d'un style différent des autres blocs. Pour avoir une classe « First » ou « Last » sur les premiers et derniers blocs d'une région, vous devez surcharger deux fonctions de thème : theme_block() et theme_blocks().

  1. Surcharger theme_blocks() :
    <?php

    function phptemplate_blocks($region) {
      
    $output '';

    if (
    $list block_list($region)) {
        
    $blockcounter 1// il y a au moins un bloc dans cette région
        
    foreach ($list as $key => $block) {
          
    // $key == <i>module</i>_<i>delta</i>
         
    $block->extraclass ''// ajout de la clé 'extraclass' à l'objet $block
         
    if ($blockcounter == 1){ // est-ce le premier bloc de la région ?
           
    $block->extraclass .= ' first'
          }
         if (
    $blockcounter == count($list)){ // est-ce le dernier bloc de la région ?
           
    $block->extraclass .= ' last';
         }
          
    $output .= theme('block'$block);
         
    $blockcounter++;
        }
      }

      
    // Ajout d'un contenu attribué à cette région via un appel à drupal_set_content()
      
    $output .= drupal_get_content($region);
    return 
    $output;
    }
    ?>  
  2. Surcharger theme_block() :
    <?php
    function phptemplate_block($block) {
        
    // dans cette ligne, l'extraclasse est ajoutée en tant que classe
        
    $output "<div class=\"block block-$block->module $block->extraclass\" 
            id=\"block-$block->module-$block->delta\">\n"

        
    $output .= " <h2 class=\"title\">$block->subject</h2>\n";
        
    $output .= " <div class=\"content\">$block->content</div>\n";
        
    $output .= "</div>\n";
        return 
    $output;
    }
    ?>  

C'est tout !

Ajouter des classes « first » et « last » aux blocs menu

Date du document en anglais : 23 Août 2009 - 15h23 - http://drupal.org/node/138656 Drupal 5.x  



Cet article est spécifique à Drupal 5.x. Drupal 6 utilise des theme_links au lieu de menu_item_link, et ajoute automatiquement les classes « First » et « Last » aux items de menus.

On veut souvent styliser le premier et le dernier élément de menu différemment des autres. CSS 2 fournit un simple sélecteur pour le faire dynamiquement mais il n'est malheureusement pas pris en compte par Internet Explorer, aussi, beaucoup de concepteurs de thèmes ajoutent une classe « First » et « Last » aux éléments des listes, pour qu'ils puissent être ciblés par les styles CSS.

Drupal 5 ajoute automatiquement les classes « first » et « last » aux primary et secondary links, mais ne le fait malheureusement pas pour les menus affichés dans des blocs. Heureusement, le système des thèmes nous permettra d'y remédier.

Le menu est généré par la fonction menu_tree(), qui n'est pas surchargeable par le thème. Quoiqu'il en soit, cette fonction est elle-même appelée par une fonction de thème, nous pourrons la surcharger par ce biais. Pour cela, copiez-collez le code suivant dans votre fichier template.php :


 <?php
function phptemplate_menu_tree($pid 1) {
    if (
$tree phptemplate_menu_tree_improved($pid)) {
        return 
"\n<ul class=\"menu\">\n"$tree ."\n</ul>\n";
    }    
}

function 
phptemplate_menu_tree_improved($pid 1) {
  
$menu menu_get_menu();
  
$output '';

  if (isset(
$menu['visible'][$pid]) && $menu['visible'][$pid]['children']) {
    
$num_children count($menu['visible'][$pid]['children']);
      for (
$i=0$i $num_children; ++$i) {
        
$mid $menu['visible'][$pid]['children'][$i];
        
$type = isset($menu['visible'][$mid]['type']) ? $menu['visible'][$mid]['type'] : NULL;
        
$children = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL;
        
$extraclass $i == 'first' : ($i == $num_children-'last' '');
        
$output .= theme('menu_item'$midmenu_in_active_trail($mid)
 || (
$type MENU_EXPANDED) ? theme('menu_tree'$mid) : ''count($children) == 0$extraclass);     
      }
  }

  return 
$output;
}

function 
phptemplate_menu_item($mid$children ''$leaf TRUE$extraclass '') {
  return 
'<li class="'. ($leaf 'leaf' : ($children 'expanded' 'collapsed')) . ($extraclass ' ' $extraclass '')
 . 
'">'menu_item_link($midTRUE$extraclass) . $children ."</li>\n";
}
?>
  

Cette fonction diffère de la fonction par défaut par le fait qu'elle dirige le système vers la version alternative de menu_tree(), phptemplate_menu_tree_improved().

Cette fonction fonctionne exactement comme celle du core sauf qu'elle passe une extraclass à la fonction menu item alternative. (Oui, on peut ajouter des paramètres à une fonction de thème surchargée). phptemplate_menu_item() pose juste l'extraclasse si elle est spécifiée, ou ne fait rien si elle ne l'est pas. Voilà ainsi les classes « first » et « last » dans tout menu d'un bloc.

Notez que ce code ajoute ces classes à l'élément de la liste, pas au lien lui-même.

Voici comment Drupal gère habituellement ces classes, et permet à une règle CSS de cibler soit l'élément de la liste soit le lien, selon les besoins. Si on mettait la classe sur l'élément <a> lui-même, cela ne ferait que styliser le lien et non l'élément affiché.

Élément de menu isolé

Parfois, vous avez un (sous-)menu avec un seul élément. Le code précédent ajoute la classe « first » à un élément de menu, sans se soucier s'il est le premier parmi une multitude ou s'il est le premier et aussi le seul élément du menu. Cela pouvant vicier un thème, il y a deux façons de pallier à la présence d'un seule élément de menu :

Façon n° 1 :

Ajoutez ce code :

<?php 
 $extraclass 
.= $num_children == ' last' ''
 
?>

après

<?php
  $extraclass 
$i == 'first' : ($i == $num_children-'last' '');
  
?>

Cela ajoutera juste une classe « Last », vous aurez ainsi un élément de menu avec la classe « first last ».

Façon n° 2 :

Ajoutez ce code :

<?php
  $extraclass 
$num_children == 'single-item' $extraclass;  
?>

après

<?php
  $extraclass 
$i == 'first' : ($i == $num_children-'last' '');  
?>

Cela ajoutera une classe « single-item » au lieu de « first ».

Isoler un élément de menu spécifique avec $mid

Date du document en anglais : 26 Août 2009 - 23h52 - http://drupal.org/node/198634  



On a parfois besoin de styliser un élément de menu en particulier (pour lui donner une couleur différente par exemple). En ajoutant $mid dans la classe de chaque élément de menu, on les contrôle entièrement avec les CSS.

La fonction modifiée ressemblera à ceci :


<?php
function phptemplate_menu_item($mid$children ''$leaf TRUE$extraclass '') {
  return 
'<li class="'. ($leaf 'leaf' : ($children 'expanded' 'collapsed')) . ($extraclass ' ' $extraclass '') .
 
' mid-' $mid '">'menu_item_link($midTRUE$extraclass) . $children ."</li>\n";
}
?>

Je n'ai fait qu'ajouter ". ' mid-' . $mid", sans me préoccuper de tests conditionnels puisque $mid est toujours déclaré.

Dans les CSS, j'utilise un sélecteur tel que #header .mid-123 pour atteindre l'élément de menu utilisé dans l'en-tête, etc. Ça marche très bien.

Ajouter des classes « first » et « last » aux listes LI

Date du document en anglais : 23 Août 2009 - 15h34 - http://drupal.org/node/213711  



Comme dans le billet précédent, mais appliqué aux listes LI.

Le traitement des listes s'effectue dans les fonctions theme_item_list($items = array(), $title = NULL, $type = 'ul', $attributes = NULL)> qui peuvent être surchargées dans le fichier template.php. Il n'y a que quelques petits changements à effectuer pour que cela fonctionne (ajouter $item_key au foreach et vérifier le décompte pour déterminer si la class s'applique).

Copiez le code ci-dessous dans votre fichier template.php et ce sera tout :

<?php
function phptemplate_item_list($items = array(), $title NULL$type 'ul'$attributes NULL) {
  
$output '<div class="item-list">';
  if (isset(
$title)) {
    
$output .= '<h3>'$title .'</h3>';
  }

  if (!empty(
$items)) {
    
$output .= "<$type" drupal_attributes($attributes) . '>';
    foreach (
$items as $item_key=>$item) {
      
$attributes = array();
      
$children = array();
      if (
is_array($item)) {
        foreach (
$item as $key => $value) {
          if (
$key == 'data') {
            
$data $value;
          }
          elseif (
$key == 'children') {
            
$children $value;
          }
          else {
            
$attributes[$key] = $value;
          }
        }
      }
      else {
        
$data $item;
      }
  if (
count($children) > 0) {
        
$data .= theme_item_list($childrenNULL$type$attributes); // Render nested list
      
}
      if(
$item_key == 0) {
        
$attributes['class'] = (isset($attributes['class'])? $attributes['class'] .= ' first' 'first');
      } 
      elseif(
$item_key == count($items)-1){
        
$attributes['class'] = (isset($attributes['class'])? $attributes['class'] .= ' last' 'last');
      }     
      
$output .= '<li' drupal_attributes($attributes) . '>'$data .'</li>';
    }
/* end foreach */   
    
$output .= "</$type>"
  }
  
$output .= '</div>';
  return 
$output;
}
?>  

Bonus : zebra

Pour ajouter une classe zebra qui alternera les items de la liste (pas les balises php); ajoutez ce qui suit avant le $output .= '<li' . drupal_attributes($attributes) . '>'. $data .'</li>'; :

  <?php
if ($item_key 2) { 
    
$attributes['class'] = (
        isset(
$attributes['class']) 
            ? 
$attributes['class'] .= ' zebra' 
            
$attributes['class'] = 'zebra'
        
); 

?>  

Ajouter des régions à la page d'accueil

Date du document en anglais : 25 Août 2009 - 02h43 http://drupal.org/node/65064



Pour Drupal 6.x, reportez-vous à Attribution de contenu aux régions.

Ce qui suit concerne l'utilisation de thèmes avec PHPTemplate (le moteur de thèmes par défaut de Drupal). La page suivante concerne les thèmes PHP seulement.

Dans cet exemple nous avons un thème personnalisé, appelé montheme, et nous allons ajouter trois régions à la page d'accueil. Nous les appelerons frontpage top, frontpage center et frontpage bottom.

Remplacez toutes les occurences de montheme par le nom de votre thème.
  1. Dans le fichier themes/montheme/template.php (créez-le s'il n'éxiste pas), ajoutez le code suivant :
    <?php
    /** Define the regions **/
    function mytheme_regions() {
    return array(
    'left' => t('left sidebar'),
    'right' => t('right sidebar'),
    'content' => t('content'),
    'header' => t('header'),
    'footer' => t('footer'),
    'frontpage_top' => t('frontpage top'),
    'frontpage_center' => t('frontpage center'),
    'frontpage_bottom' => t('frontpage bottom'),
     );
    }
    ?>
  2. Maintenant que les régions sont déclarées, allez dans le fichier page.tpl.php (qui se trouve dans le dossier de votre thème).

    Placez le code suivant à l'endroit où vous souhaitez que les régions soient affichées :

    <?php if ($is_front || strstr($_GET['q'], 'admin/block')) :
    ?>
    <div id="frontpage_top" class="frontpage">
    <?php print $frontpage_top ?>
    </div>
    <?php endif; ?>
  3. Répétez cette procédure pour les trois régions de la page d'accueil. Pour améliorer les performances, vous pouvez combiner deux régions avec une seule instruction if().

  4. Pour ajouter des blocs à ces nouvelles régions, il suffit d'aller dans Administration » Construction du site » Blocs.

Désormais, avec des tableaux HTML ou des CSS, vous pouvez placer ces régions où vous le souhaitez dans votre page d'accueil, les rendre plus attractives, etc.

Si vous ne voulez pas que le contenu par défaut s'affiche sur la page d'accueil, vous devez entourer le <?php print $content ?> avec un if (!$is_front).

Allez voir blocks repository pour de jolis blocs, ou créez-en avec views que vous pourrez disposer sur votre page d'accueil.


Blocs en page d'accueil et thèmes plain PHP

Date du document en anglais : 27 Août 2009 - 00h01 - http://drupal.org/node/205396  



J'ai pu ajouter un bloc en page d'accueil en éditant le fichier thème drupal de mon thème plain PHP. Ce qui veut dire que si vous utilisez un clone de Chameleon, tout ce que vous avez à faire est ajouter les références des nouveaux blocs à la fonction yourtheme_regions(), ajouter la référence du bloc de thème à votre fonction yourtheme_page :

<?php  // Get blocks before so that they can alter the header (JavaScript, Stylesheets etc.) 
$blocks_left theme_blocks('left'); 
$blocks_right theme_blocks('right');
$blocks_home_center theme_blocks('home_center');   
?>

puis ajouter le code suivant à l'endroit où vous voulez que votre bloc apparaisse :

<?php  $output .= &quot;n<!-- begin content -->n&quot;; 
if ( 
$show_blocks &amp;&amp; !empty($blocks_home_center) &amp;&ampdrupal_is_front_page() ){
$output .= &quot;.$blocks_home_center.&quot;;  }  
?>

Comme vous pouvez le voir, j'ai mis le mien juste après la balise de début de contenu. Pour les blocs gauche et droit, les zones dans le fichier thème sont clairement repérées.

S'il s'agit du bloc central, vous pouvez aussi ajoutez une ligne après .block dans le fichier common.css :

.block {
     width: 180px;  
}
 #block-block-11{
        width: 100%;  
}    

Vous aurez besoin de publier le bloc, ou de le survoler de la souris dans l'administration des blocs, pour obtenir son numéro.

Ajouter un menu par défaut aux nodes sans menus

Date du document original en anglais : 23 Août 2009 - 19h17 - http://drupal.org/node/369854  



Quand il s'agit de gérer des nodes il y en a toujours qui ne peuvent être rattachés à aucun des items du menu principal. Ainsi, pour le site sur lequel je travaille actuellement (ce n'est pas kolossaldrupal qui parle, c'est l'auteur de l'article en anglais. NDT), certains nodes ont besoin d'un menu par défaut même s'ils ne font pas partie des liens de menus principaux qui sont affichés sur la plupart des nodes.

Voici l'idée

C'est tout.

<?php
/**
* La toute-puissante fonction de pré-traitement, si commode
* Paramétrez le nouvel item ici pour être sûr qu'il soit
disponible pour l'affichage.
*/
function mysite_preprocess_node(&$variables) {
    
$node $variables['node'];
    
// paramétrer le menu par défaut si besoin.
    
_set_default_menu($node->nid);
}

/**
* Un menu est défini pour la plupart des items. Mais nous
* devons en définir un pour ceux qui n'en ont pas.  
*/
function _set_default_menu($nid){
    if (!
node_has_menu("node/$nid")) {
        
$menu _find_default_menu($nid);
    }
}

// le node a-t-il un menu ?
function node_has_menu($path) {
    
$sql "SELECT 'TRUE' FROM drupal_menu_links ";
    
$sql .= "WHERE menu_name IN ('primary-links') AND ";
    
$sql .= "link_path = '%s'";
    
$result db_result(db_query($sql$path));
    return 
$result;
}

/**
* Ici, le menu par défaut existe. Vous pouvez trouver votre
* menu par défaut de différentes façons, 
* par l'utilisation d'une taxonomy existante appliquée à un
* node ou par n'importe quel autre champ appliqué au node, ou
* même par une variable par défaut. 
*/
function _find_default_menu($nid) {
    
$sql "SELECT link_path FROM drupal_menu_links WHERE plid = 0 AND ";
    
$sql .= "menu_name IN ('primary-links') AND link_title = '%s'";
    
$link db_result(db_query($sql'Some Menu'));

    
$router_item menu_get_item($link);
    
// ne pas paramétrer si router_item est vide
    
if($router_item) {
        
menu_set_item("node/$nid"$router_item);
    }
}
?>

Cacher le titre d'un node sur une page (6.x)

Date du document en anglais : 27 Août 2009 - 00h22 http://drupal.org/node/426482



Vous pouvez cacher les titres des nodes de certains types de contenus en ajoutant du code dans votre fichier template.php.

Cet exemple omet le titre des nodes dont le type de contenu est page ou article. Il sauvegarde également le titre dans une variable, pour qu'il puisse être utilisé ailleurs dans dpage.tpl.php.

Notez également que ces instructions concernent la situation pour laquelle la fonction n'existe pas. Si vous obtenez une erreur "cannot redeclare function...", vous devrez ajouter ce code à la fonction existante.

Enfin, pour que ces modifications prennent effet, vous devrez aller dans Administrer » Construction du site » Thèmes et sauvegarder la configuration pour reconstruire le registre de thèmes.

<?php
function THEMENAME_preprocess_page(&$vars) {

  
// Titres omis selon le type de contenu lorsque leur affichage n'est pas souhaité
  // dans la mise en page.
  
$vars['original_title'] = $vars['title'];
  if (!empty(
$vars['node']) && in_array($vars['node']->type
array(
'page''story'))) {
    
$vars['title'] = '';
  }

}
?>

Pour utiliser ce code, remplacez page ou story avec le type de node dont vous ne voulez pas afficher le titre, et remplacez THEMENAME avec le nom de votre thème. Par exemple, si votre thème s'appelle foo, la fonction s'appellera foo_preprocess_page. Si votre fichier template.php a déjà une fonction THEMENAME_preprocess_page, il suffit de lui ajouter ces lignes de code.

Cacher le titre du node dans la page d'accueil

Voici un exemple sur la façon de cacher le titre d'un node uniquement sur la page d'accueil. Comme pour l'exemple précédent, ce code doit être placé dans le fichier template.php de votre thème.

<?php
function THEMENAME_preprocess_page(&$vars) {

  
// Titres ignorés dans la page d'accueil
  
$vars['original_title'] = $vars['title'];
  if (
$vars['is_front']) {
    
$vars['title'] = '';
  }

}
?>

Pour utiliser ce code, remplacez page ou story avec le type de node dont vous ne voulez pas afficher le titre, et remplacez THEMENAME avec le nom de votre thème. Par exemple, si votre thème s'appelle foo, la fonction s'appellera foo_preprocess_page. Si votre fichier template.php a déjà une fonction THEMENAME_preprocess_page, il suffit de lui ajouter ces lignes de code.

Cacher le titre du nœud sur une page (5.x)

Date du document en anglais : 27 Août 2009 - 00h23 http://drupal.org/node/138910



Vous pouvez cacher les titres des nodes sur le critère de leur type de contenu, en ajoutant un peu de code dans votre fichier template.php.

Cet exemple omet le titre de tout node dont le type de contenu est page ou article. Notez qu'il sauvegarde également le titre dans une variable, pour qu'il puisse, si besoin,  être utilisé dans un fil d'ariane.

<?php
// Titles are ignored by content type when they are not desired in the design.
$vars['breadcrumb_title'] = $vars['title'];
if (
arg(0) == 'node' && is_numeric(arg(1))) {
  
$node node_load(arg(1));
  if (
in_array($node->type, array('page''story'))) {
    
$vars['title'] = '';
  }
}
?>

C'est ici que le code s'insère dans la fonction _phptemplate_variables() :

<?php
function _phptemplate_variables($hook$vars = array()) {
  switch (
$hook) {
    case 
'page':
    
// Titles are ignored by content type when they are not desired in the design.
    
$vars['breadcrumb_title'] = $vars['title'];
    if (
arg(0) == 'node' && is_numeric(arg(1))) {
      
$node node_load(arg(1));
      if (
in_array($node->type, array('page''story'))) {
        
$vars['title'] = '';
      }
    }
    break;
  }
  return 
$vars;
}
?>

Cacher le titre du node dans la page d'accueil

Voici un exemple sur la façon de cacher le titre d'un node sur la page d'accueil. Encadrez la balise H1 de votre fichier page.tpl.php avec la première et la troisième ligne de ce code-exemple. La deuxième ligne est un exemple de ce qui publierait votre titre dans page.tpl.php.

<?php if ($title && !$is_front): ?>
   <h1 class="title"><?php print $title?></h1>
<?php endif; ?>

Remplacer le titre du nœud par une image

Date du document en anglais : 27 Août 2009 - 00h07 - http://drupal.org/node/221854  



J'ai repris plus d'un site, conçus avec Dreamweaver. Le design et la mise en page étaient très beaux, et l'une des tâches dans la conversion du site vers Drupal était de conserver autant que possible son attrait visuel. L'un des éléments graphiques consistait en titres sous forme d'images. C'est ainsi que commença ma recherche sur la façon de remplacer des titres Drupal par des images. J'ai essayé plusieurs méthodes avant d'arriver à celle décrite dans le précédent article, qui m'a donné l'idée qui suit.

Vue d'ensemble : les concepts de base

Un nœud de votre site a un titre, tel que « Kolossal et Danaïdes même combat ! » et vous voulez afficher une image « kolosall_danaides_meme_combat.gif » au lieu du titre en texte. De plus, vous voulez que le titre original soit le alt text de l'image, et vous voulez une « graceful degradation » pour que le titre original en texte soit affiché si le fichier image du titre n'existe pas.

What this does is essentially make the Title field of the nodes into an special image selector - if you use a title with an associated image, the image will appear, otherwise, the text title will appear - sweet!

Exigences :

  • vous utilisez un gabarit de thème
  • vous n'êtes pas réfractaire à un peu de PHP (en fait, juste un nuage de PHP dans votre thème)

Tout le code sera placé dans votre fichier template.php.

Note : ignorez les balises d'ouverture et de fermeture de PHP. Elles ne sont là que pour des raisons d'affichage et ne doivent pas être ajoutées à votre fichier.

Pour plus d'infos sur template.php et les variables de fonctions phptemplate_variables, reportez-vous à :

Étape 1 : convertir le titre en fichier

<?php
// Apprête un titre texte pour son usage en tant que nom de fichier.
// Ote les caractères HTML spéciaux, les espaces, 
// convertit en minuscules, remplace les espaces par des
// signes souligné. 
function clean_title($string)
{
    
$cleanString htmlspecialchars_decodestrtolower(trim($string)), ENT_QUOTES );
    
$cleanString str_replace(array("& ""'"), ''$cleanString);
    return 
str_replace(' ''_'$cleanString );;
}
?>

Cette chouette petite fonction prend un titre tel que « KolossalDrupal & Danaïdes même combat ! » et le transforme en nom de fichier « kolossaldrupal_danades_meme_combat ». Puisque Drupal convertira les guillemets et l'esperluette en « caractères spéciaux » (par exemple, $#039; ou $amp) il les extraira en premier. Puis il s'en débarrassera (car ils sont très courants dans les titres) et remplacera les espaces résultants par des signes souligné.

Cette fonction peut être modifiée pour personnaliser comme il vous convient les titres en noms de fichier. Selon les titres utilisés dans votre site, vous voudrez peut-être élargir les substitutions réalisées ici. En utilisant par exemple des expressions rationnelles pour repérer et modifier des motifs (telle que preg_replace("/[^a-zA-Z0-9]/", "", $string) ), c'est un peu moins rapide mais d'usage plus large.

Étape 2 : faire les substitutions - code snippets

Nous avons besoin du file system path (pour vérifier si le fichier existe) et de l'URL (pour créer la balise image) pour l'image titre.

Note : indiquez la bonne extension de fichier et le bon chemin pour vos images titres - les miennes sont .gif, qui se trouvent dans files/images/titles.

<?php
       
// convertit un titre en nom de fichier utilisable et 
        // obtient l'URL et le file system path .
       
$titleFile clean_title($vars['title']) . '.gif';
       
$titleImage base_path() . "files/images/titles/" $titleFile;
       
$titleURL "http://" $_SERVER['SERVER_NAME'] . $titleImage;
       
$titlePath $_SERVER['DOCUMENT_ROOT'] . $titleImage;
?>

N'effectuez la substitution que si l'image appropriée peut être trouvée. Utilisez $vars['title'] comme texte alternatif de la balise image, et mettez cette balise dans $vars['title'] :

<?php
       
// Vérifie si une image titre existe et fait la
       // substitution
        
if ( file_exists($titlePath) ) {
          
$newTitle '<img alt=\'' $vars['title'] .'\' src=\'' $titleURL .'\' />';
          
$vars['title'] = $newTitle;
       }
      }
?>

Quelques améliorations :

Restreignez la portée des substitutions - voir l'article précédent qui l'explique en détail :

<?php
    
// Ne substitue les titres que pour les nodes...
    
if (arg(0) == 'node' && is_numeric(arg(1))) {
      
$node node_load(arg(1)); 
      
// ... d'un type listé.
      
if (in_array($node->type, array('page'))) {
// convertit un titre en nom de fichier utilisable et 
// obtient l'URL et le file system path .
        
...
?>

Sauvegardez le titre original pour l'utiliser dans le head et le fil d'ariane :

<?php
    $vars
['breadcrumb_title'] = $vars['title'];
    
$vars['head_title'] = $vars['title'];
?>

Étape 3 : tout rassembler

Dans Drupal 5 :

<?php
function _phptemplate_variables($hook$vars = array()) {
  switch (
$hook) {
    case 
'page':
    
// substitute node title with an image, if a suitable replacement can be found.
    // save original title text for use in head and breadcrumb.
    
$vars['breadcrumb_title'] = $vars['title'];
    
$vars['head_title'] = $vars['title'];
    
// Substitute title only for nodes...
    
if (arg(0) == 'node' && is_numeric(arg(1))) {
      
$node node_load(arg(1)); // (expensive, unless arg(1) is already loaded, which is should be at this point.)
      // ... of one of the listed types - add node types to process to the array.
     
if (in_array($node->type, array('page'))) {
        
// convert title to suitable filename and derive both file system path and URL.
        
$titleFile clean_title($vars['title']) . '.gif';
       
$titleImage base_path() . "files/images/titles/" $titleFile;
       
$titleURL "http://" $_SERVER['SERVER_NAME'] . $titleImage;
       
$titlePath $_SERVER['DOCUMENT_ROOT'] . $titleImage;
       
// $vars['title'] = $titleURL;   // DEBUG - see what's being produced
       // Determine if a suitable replacement image for title can be found, and make substitution.
        
if ( file_exists($titlePath) ) {
          
$newTitle '<img alt=\'' $vars['title'] .'\' src=\'' $titleURL .'\' />';
          
$vars['title'] = $newTitle;
       }
      }
    }
    break;
  } 
  return 
$vars;
}
?>

Dans Drupal 6 :

<?php
// afc/template.php
// Prepare some general title text for use as a file name.
// Remove special HTML characters, trim whitespace, convert to lower-case
// repace spaces with underscores.
function clean_title($string)
{
    
$replace_chars = array("&"":"",""'");
    
$cleanString htmlspecialchars_decodestrtolower(trim($string)), ENT_QUOTES );
    
$cleanString str_replace($replace_chars""$cleanString);
    return 
str_replace(' ''_'$cleanString );;
}

function 
mytheme_preprocess_page(&$variables) {
// substitute node title with an image, if a suitable replacement can be found.
// save original title text for use in head and breadcrumb.
$variables['breadcrumb_title'] = $variables['title'];
$variables['head_title'] = $variables['title'];
// Substitute title only for nodes...
     
$titleFile clean_title($variables['title']) . '.png';
     
$titleImage base_path() . path_to_theme() . "/images/titles/" $titleFile;
     
$titleURL "http://" $_SERVER['SERVER_NAME'] . $titleImage;
     
$titlePath $_SERVER['DOCUMENT_ROOT'] . $titleImage;
     
//$variables['title'] = $titleURL;   // DEBUG - see what's being produced
     // Determine if a suitable replacement image for title can be found, and make substitution.
      
if ( file_exists($titlePath) ) {
        
$newTitle '<img alt="' $variables['title'] .'" src="' $titleURL .'" />';
       
$variables['title'] = $newTitle;
     }
}
?>

Comment ajouter une liste des billets de blog récents à une page Utilisateur ?

Référence en anglais sur drupal.org : http://drupal.org/node/755174
28 Mars 2010 - 02h59


J'ai rassemblé plusieurs morceaux de code (c'est l'auteur sur drupal.org qui parle. NdK) pour créer une liste des billets de blog récents d'un utilisateur, sans utiliser Views. Vous pouvez utiliser ce qui suit sans avoir à utiliser Views ou un module quelconque. C'est plutôt simple. Et à utiliser dans votre fichier gabarit surchargé user-profile.tpl.php. Vous pouvez coller le code directement à la fin du fichier.

<?php
$nlimit 
5;
$query"SELECT n.created, n.title, n.nid, n.created FROM {node} n WHERE n.uid = %d AND n.type = 'blog' AND n.status = 1 ORDER BY n.created DESC";
$result db_query_range(db_rewrite_sql($query), $account->uid0$nlimit);
while (
$node db_fetch_object($result)) {
         print 
'<div><ul><a href="';
        print 
'../' drupal_get_path_alias('node/'.$node -> nid);
        print 
'">' $node->title "</a>\n&nbsp;-&nbsp;";
        print 
date('F d,y'$node->created) . '</ul></div>';
}
?>

Dans ce code, j'interroge la base de données sur tout le contenu pour lequel l'utilisateur dont on affiche la page est l'auteur. Puis je trie sur la date, par ordre descendant, ce qui place les billets récents en tête de liste.

Je restreins ensuite le nombre de billets affichés au nombre indiqué dans la variable $nlimits, initialisée en début de code. Là j'ai mis 5, vous pouvez modifier cette valeur avec celle qui vous convient.

Ensuite, j'affiche les champs désirés du contenu de chaque billet, dans le cas présent un titre en lien vers le billet de blog - en utilisant l'alias d'URl au lieu de l'ID du node, les deux fonctionnent mais cette façon est plus élégante - et la date de création, qui est mise en forme.

Cela m'a pris quelque temps de trouver le code correct pour arriver à ce résultat. Je voulais le partager car plusieurs personnes recherchaient comment faire, moi y compris. Après de multiples recherches je suis tombé par hasard sur quelques choses qui marchaient à peu près comme je voulais. J'ai tout rassemblé et voilà !

C'est très facile à implémenter, même si vous n'avez pas personnalisé votre fichier user-profile.tpl.php, collez simplement ce code à la fin de votre fichier et ça marche. Il n'y a pas de champs personnalisés à modifier ou quelque soit d'autre. Si vous le voulez, vous pouvez modifier la mise en page à votre guise. Celle-ci me convient à moi.

Voici un exemple du rendu final : http://www.flickr.com/photos/48785425@N07/4468915462.

Convertir n'importe quel gabarit ou design de site en thème Drupal - facilement !

Date du document en anglais : 29 Mars 2010 - 12h08 - http://drupal.org/node/313510  



La création de thèmes Drupal n'est pas aussi compliquée que vous pourriez le penser. Il y a certes des domaines plus pointus que d'autres, qui seront peut-être nécessaires, selon les besoins de votre site, ou des défauts mineurs que vous voudrez corriger (sur lesquels vous vous pencherez le moment venu). Créer le thème global de votre site est très simple.

Un thème Drupal n'est rien d'autre qu'une mise en page de site web standard, avec un peu de code PHP ajouté par-ci par-là, que vous pouvez d'ailleurs copier-coller dans les endroits où vous appellerez le contenu et les fonctions dynamiques de Drupal.

Si vous apprenez mieux par l'image, une vidéo portant sur les informations développées ici est disponible là : Static Theme Conversion.

Les thèmes « contributifs » sont plus complexes que votre thème n'a besoin de l'être

Vous avez peut-être examiné plusieurs thèmes pré-fabriqués livrés avec le core Drupal, ou disponibles en téléchargement, et vous avez poussé un soupir de frustration devant l'aspect obscur de leurs code-source.

Ces thèmes-là ont été créés pour répondre à tous les scénarios de travail possibles, pour vous permettre d'agir dynamiquement sur la mise en page du thème, tel l'ajout de colonnes, et acceptent la personnalisation de fonctions ou de modules dont vous n'aurez peut-être pas besoin pour votre site. Ils disposent généralement d'une grande quantité de code PHP dont le but est simplement de dire « si ce paramètre est à vrai, alors montre cette partie de cette façon-ci, sinon montre ça ». Le thème est ainsi très souple, mais aussi très complexe.

Quoi qu'il en soit, votre thème n'a pas besoin de fonctionner avec tous les sites de la galaxie Drupal. Il a juste besoin de faire ce dont votre site a besoin, et rien de plus. Tout ce qu'il vous faut ce sont des petits bouts de code PHP, que vous copierez dans votre gabarit HTML, qui diront à Drupal de charger le contenu dynamique à ces endroits.

Vous pourrez également trouver utile de jeter un œil aux gabarits du core Drupal plus élémentaires (ceux utilisés lorsqu'un thème ne fournit pas de gabarits alternatifs pouvant être surchargés). Pour examiner ces gabarits élémentaires, regardez dans le dossier /modules/system de votre installation Drupal (et notamment les gabarits page.tpl.php et node.tpl.php).

Il ne faut que quelques éléments de base pour fabriquer un thème Drupal

Le gabarit principal de Drupal est appelé page.tpl.php. Faites une copie du gabarit de votre site et appelez-la page.tpl.php. Ensuite, copiez le code suivant dans votre mise en page, aux endroits signalés (tout le code mentionné dans cette leçon sera placé dans le fichier page.tpl.php).

La section Head de votre site

<head>
  <title><?php print $head_title; ?></title>
        <?php print $head; ?>
        <?php print $styles; ?>
        <?php print $scripts; ?>
</head>

La barre latérale ou les colonnes de votre mise en page

Beaucoup de sites ont une barre latérale, à gauche ou à droite de la page, placée à côté de la zone de contenu principale. Ces barres latérales affichent différentes fonctions ou informations (par exemple, la form de connexion, les menus de navigation, les commentaires récents, etc).

Dans Drupal, ces zones sont appelées blocs et vous pouvez les personnaliser en allant dans le menu Administrer » Constructions du site » Blocs. Pour que Drupal sache où afficher ces blocs, vous devez ajouter des placeholders dans votre thème (Drupal appelle ces placeholders des régions). Il y a plus d'un placeholders disponible ( et vous pouvez aussi créer les vôtres) mais il est important d'ajouter en premier lieu la barre latérale, puisque le menu d'administration y est affiché. Ajoutez les régions suivantes à votre barre latérale :

Si vous utilisez Drupal 5 :

<?php print $sidebar_left?>

...et/ou...

<?php print $sidebar_right?>

Si vous utilisez Drupal 6 :

<?php print $left?>

...et/ou...

<?php print $right?>

Menu système / Navigation

Dans Drupal, le menu de navigation par défaut de votre site s'appelle Primary Links. Il y a également un menu Secondary Links qui peut amener aux sous-pages tributaires du menu Primary. Lorsqu'il est dépouillé de toutes ses images et de ses styles, un menu Drupal n'est rien de plus qu'une imbrication de listes non ordonnées, en HTML brut, avec un lien pour chaque élément de la liste. Vous pouvez utiliser les CSS pour personnaliser un menu à votre façon; modifier son apparence, sa disposition, horizontale, comme des onglets, ou verticale, etc.

Pour afficher dans votre site les liens de menu Primary,ou Secondary, collez le code suivant soit dans la partie supérieure de votre thème (par exemple, si votre menu est stylisé en tant qu'onglets ou boutons), soit dans la barre latérale (dans le cas où vous souhaitez y afficher votre menu verticalement).

Au plus simple :

Voici la façon la plus simple de procéder, si vous êtes certains de vouloir utiliser les liens Primary et Secondary (ou avoir la possibilité d'effacer la partie Secondary Links si vous n'en avez plus besoin).

<div id="primary">
<?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->

<div id="secondary">
<?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->

Une façon plus souple :

Si vous hésitez à afficher les deux types de liens, Primary et Secondary, vous pouvez utiliser le code suivant à la place (c'est le même, mais il vérifie si les menus sont activés, et ne les affiche que s'ils le sont) :

<?php if ($primary_links): ?>
<div id="primary">
    <?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->
<?php endif; ?>

<?php if ($secondary_links): ?>
<div id="secondary">
    <?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->
<?php endif; ?>

Le contenu principal et dynamique de la page

A ce stade, vous avez ajouté tout le cadre (framework) de mise en page de tout votre site. Il est temps maintenant d'inclure la zone du gabarit où le contenu courant sera affiché (un contenu différent selon la page vue).

Localisez simplement l'endroit de votre gabarit où le contenu principal doit être affiché (habituellement, il s'agit du centre de la page, après l'en-tête et entre les barres latérales) et copiez-y le code suivant (vous pouvez réorganiser ce code si vous le souhaitez, sinon recopiez-le tel quel) :

<?php if ($breadcrumb): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>

<?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>

<div id="content">
<?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
<?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
<?php if ($messages): print $messages; endif; ?>
<?php if ($help): print $help; endif; ?>
<?php print $content; ?>
</div>

Pied de page : ajouter un pied de page et un texte en pied de page

Pour ajouter une région Pied de page et le texte paramétré dans la partie administration, vous pouvez mettre le code suivant :

<?php if ($footer_message || $footer) : ?>
<div id="footer-message">
    <?php print $footer_message . $footer;?>
</div>
<?php endif; ?>

Ajouter la balise Final au bas de votre thème

Collez le code suivant à la fin de votre gabarit page.tpl.php. Vous devez placer cette balise en bas de page, elle inclura dynamiquement tout script devant apparaître en bas de page et elle fermera toute balise qui aurait été laissée ouverte :

<?php print $closure; ?>
</body>
</html>

Pour Drupal 6 : créer votre fichier NomDeMonTheme.info

En dernier lieu, dans Drupal 6, vous devrez créer un fichier NomDeMonTheme.info (où NomDeMonTheme est le nom de votre thème, sans espaces).

Créez simplement un fichier texte vierge et collez-y le code suivant, personnalisez-le ensuite avec le nom et la descriptions appropriés, et sauvegardez-le dans le même dossier que celui contenant vos fichiers gabarits :

name = YourThemeName
description = Description of YourTheme
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

Si du texte ci-dessus apparaît colorisé, n'en tenez pas compte, c'est une fantaisie du module de coloration syntaxique

La section « regions » après style.css déclare toutes les régions normalisées de Drupal, c'est recommandé pour que vous puissiez ôter les régions dont vous ne voulez pas, ou pour ajouter les vôtres.

Si vous ajoutez des régions personnalisées, vous devez inclure à la main les régions par défaut à conserver sinon elles disparaîtront de votre thème (copiez-collez-les depuis cette page ou depuis un autre thème).

Si vous voulez ajouter une région personnalisée, copiez l'une des lignes regions[] ci-dessus et renommez-là.

C'est tout. Collez les code-source précédents dans n'importe quel gabarit ou mise en page de site et vous obtiendrez une thème Drupal élémentaire et fonctionnel.

En apprendre davantage sur les thèmes Drupal

Il y a bien des choses utilisables dans votre thème si vous le souhaitez. Voici quelques excellentes sources d'apprentissage pour approfondir les thèmes Drupal :

Framework / Base / Thèmes de départ

Il existe différents thèmes Frameworks (également appelés Base ou Starter thèmes). Leur but est de servir de thème vierge sur lequel vous construirez le vôtre. Beaucoup de ces thèmes sont débarrassés de tous les styles superflus et ne comprennent que les fichiers gabarits tpl.php de base, sans fioritures.

Beaucoup incorporent également des paramétrages utiles dans leurs fichiers gabarits tpl.php, pour les corrections et ajustements les plus courantes. Vous les aurez ainsi à disposition avant même de réaliser que vous pourriez en avoir besoin.

Quelques-uns ajoutent des fonctionnalités supplémentaires qui n'existent pas par défaut dans Drupal.

Vous pouvez utiliser ces thèmes comme une base de départ propre et fonctionnelle pour la création de vos propres thèmes, ou, si vous préférez, vous pouvez les étudier pour voir comment incorporer les fonctionnalités de Drupal dans un thème que vous créerez de toutes pièces.

Puisque ces thèmes sont propres et très légers côté styles, il est aisé de travailler avec, comparativement à des thèmes nettement plus personnalisés.

Voici une liste de quelques thèmes frameworks (il peut y en avoir d'autres) :

Créer un sous-thème, vite fait mal fait (Quick and dirty)

Référence en anglais sur drupal.org : 23 Août 2009 - 21h18
http://drupal.org/node/441088


Comment styliser et restructurer votre site avec un minimum d'efforts

Cet article est plus une anti-sèche un peu développée qu'un guide approfondi, il vous servira d'aide-mémoire pour une personnalisation rapide du look-and-feel de votre site Drupal 6.x plutôt que pour le restructurer en profondeur. Cet article n'est pas un cours HTML, CSS ou sur les hooks Drupal - mais un minimum de connaissances est supposé.

Mettons les mains dans le cambouis. Accordez-vous quelques secondes pour créer un sous-thème. Pourquoi un sous-thème plutôt qu'un thème ? Parce qu'un thème oblige à spécifier ce que vous voulez obtenir, alors qu'un sous-thème vous permet de ne spécifier que ce que vous voulez de différent. Les sous-thèmes héritent de toutes les feuilles de style, de tous le javascript et de tous les gabarits (fichiers .tpl.php) du thème sur lequel ils sont basés. Ce qui vous permet de le utiliser rapidement et proprement - et tout cela sans avoir à hacker le code existant du thème, ce qui signifie que lorsqu'une nouvelle version du thème est publiée, le vôtre hérite automatiquement de toutes ses améliorations !

  1. Inventez un nom pour votre sous-thème. À partir de maintenant nous nous y référerons avec <subthemename>. Ensuite, dans /sites/all/themes,créez un dossier qui porte le nom de votre thème (ne créez pas ce dossier dans /themes !)

  2. Dans ce dossier, créez un fichier nommé <subthemename>.info qui contiendra les lignes suivantes :

    name = <le nom de votre thème en clair>
    description = <ce qui vous arrange>
    core = 6.x
    base theme = <nom du dossier de n'importe quel thème ou sous-thème, du core ou contribué, par ex. bluemarine>
    stylesheets[all][] = <subthemename>.css

  3. Toujours dans le dossier de votre sous-thème, créez un fichier vide nommé <subthemename>.css

  4. À l'inverse de tout le reste, le logo du thème de base n'est pas hérité par le sous-thème. Aussi, pour remplir le vide dans le coin haut à gauche de votre site, vous voudrez peut-être copier le fichier logo.png du dossier du thème de base vers le dossier de votre sous-thème; Ou vous pouvez créer votre propre fichier logo.png. Drupal l'utilisera automagiquement.

  5. Et voilà ! Avec le dossier de votre sous-thème et ces trois fichiers, vous avez jeté les base de vos futurs développements de thème.

    Allez dans Administrer » Construction du site » Thèmes pour activer votre theme. Sélectionnez-le dans la liste en cochant le bouton-radio Par défaut puis cliquez sur Enregistrer la configuration.

Voila qui est fait. Vous êtes maintenant prêt à personnaliser et restructurer les éléments des pages tels que menus, onglets, tableaux, blocs. Cela ne vous aura pas pris plus d'une minute - vous le dire ne vous aura pas fait de mal !

En dernier lieu, allez dans Administrer » Configuration du site » Thème de l'administration, sélectionnez Thème par défaut de l'administration (plutôt que Garland) et enregistrez la configuration. N'utiliser qu'un seul thème partout (à partir de maintenant) rendra la plupart des modifications immédiatement visibles.

Remarque : si vous le voulez, vous pouvez créer un screenshot.png (150 x 90 pixels) et le mettre dans le dossier de votre sous-thème. Si vous le faites, il sera affiché dans la page Administrer » Construction du site » Thème, sinon c'est le screenshot.png du thème de base qui sera hérité et affiché dans cette page.

Maintenant, allons droit au but avec quatre exemples simples qui couvrent chacun une technique de sous-theming différente :

Restyliser vs. Restructurer ou : CSS vs. gabarits (templates)

J'utilise le mot restylisation lorsqu'il s'agit de modifier les couleurs, les attributs de texte, etc à l'aide de feuilles de style (fichiers .css). J'utilise le mot restructuration lorsqu'il s'agit de redisposer la mise en page des blocs, des tableaux, des fils d'Ariane, sous-menus, et tous ces sortes de choses. Il ne s'agit pas de redisposer ces éléments vis à vis d'autres éléments de la page - cela relève de la conception de thème plutôt que des sous-thèmes (bien qu'il n'y ait pas de différence vraiment flagrante)

Pour restyliser votre site, vous modifiez le fichier .css du dossier de votre sous-thème.

Exemple 1a : surcharger un style (global)

Pour modifier l'aspect de (la plupart des) tableaux de votre site, ajoutez cette ligne à votre fichier .css :

  tr.odd {
    background-color: pink;
  }

La modification sera aussitôt visible sur des pages comme Administrer » Gestion du contenu » Contenu ou

Si vous voulez baliser des éléments HTML en particulier dans des pages données, vous devrez compter sur le développeur qui a associé les classes CSS et/ou les ID à ces éléments HTML, par exemple <table class="table-nodes">.... Vous pouvez déterminer le CSS responsable de l'aspect d'un élément HTML en analysant le code-source de la page dans votre navigateur, en comprenant l'éventuelle complexité hiérarchique des sélecteurs CSS impliqués. Des outils plus pratiques, comme Firebug (pour Firefox) vous montrent la hiérarchie complète des styles CSS appliqués à un élément HTML en le survolant de la souris (chouette!).

Exemple 1b : surcharger un style (spécifique)

Si le module Search (du core) est activé et qu'un bloc est paramétré pour contenir le formulaire de recherche (via Administrer » Construction du site » Blocs), ajouter les lignes suivantes dans votre fichier .css le fera vraiment ressortir :

  .block-search {
    background-color: lightblue;
    border: 1px solid blue;
  }

Les CSS sont puissantes mais peuvent s'avérer complexes, surtout si vous avez un grand nombre d'éléments HTML imbriqués. Une explication approfondie dépasse le cadre de cet article, mais il y a quelques liens sympas (avec des tutoriels) qui peuvent aider : w3schools.com/css, http://css.maxdesign.com.au/, OpenWeb (français). Voir aussi HTML and CSS techniques and tools. (ici la traduction française sur KolossalDrupal).

Faisons un peu de restructuration... Si votre page est correctement templated, les éléments que vous souhaitez changer sont rendus par des fichiers .tpl.php qui se trouvent, euh... quelque part. Les endroits où regarder sont le sous-dossier /modules du module qui pourrait avoir affaire avec la page affichée et le dossier /themes du thème utilisé.

Il y a aussi un bel outil Drupal : le module Devel. Semblable à Firebug, il conseille des endroits où chercher des templates qui s'appliquent à la zone de l'écran que vous survolez de la souris.

Une fois le gabarit trouvé, comment le surcharger ? C'est très simple : copiez le fichier .tpl.php dans le dossier de votre sous-thème (ne lui changez pas son nom) et modifiez-le à votre guise.

Remarque : pour que la surcharge du gabarit fonctionne, votre thème de base doit être piloté par un moteur de template (vérifiez le fichier .info du thème de base). Ainsi, Chameleon et Marvin ne répondront pas aux surcharges de gabarits, bien que vous puissiez surcharger leurs styles comme indiqué à l'exemple 1a.

Exemple 2 : surcharger un gabarit (.tpl.php)

Supposons que vous voulez alléger la présentation des résultats de recherche en affichant le titre et le résultat mais sans les données concernant le type, l'auteur et la date de modifications des articles trouvés. Chaque élément individuel dans la liste des résultats est mis en forme via un gabarit : modules/search/search-result.tpl.php. Copiez simplement ce gabarit dans le dossier /sites/all/themes de votre thème puis modifiez-le à votre guise. Par exemple, effacez les trois lignes qui précèdent la balise </dd>. Rafraîchissez le cache du thème, en allant par exemple dans Administrer » Construction du site » Thèmes et en cliquant sur le bouton Enregistrer la configuration. Effectuez une recherche et regardez les résultats.

Une fois que le fichier se trouve dans le dossier de votre sous-thème, toutes ses modifications seront immédiatement prises en compte, vous n'avez pas besoin de rafraîchir les cache à nouveau.

Gabarits vs. fonctions theme_hook()

Les gabarits et les fonctions theme_hook() renvoient tous deux aux theme hooks et ont la même fonction : entourer l'HTML de contenu généré dynamiquement. Les Web designers préfèrent les gabarits puisqu'ils sont essentiellement composé d'HTML, avec très peu de code PHP. Du point de vue d'un web designer, un theme_hook() est une fonction PHP qui veut être un gabarit (fichier .tpl.php).

Pourquoi les thèmes (et sous-thèmes) ne se font-ils pas entièrement via des gabarits ?

  1. les fonctions theme_hook() s'exécutent plus rapidement (bien que cela ne se remarque pas côté utilisateur)
  2. certains programmeurs préfèrent écrire une seule fonction plutôt que repartir le code dans un gabarit "alimenté" par une fonction de pré-traitement qui initialise les données ($variable) affichées par le gabarit; cette dernière approche paraissant, à première vue, un poil plus compliquée - nous la montrerons dans l'exemple 4.

Exemple 3 : surcharger un theme_hook() avec une fonction

Pour cela, créez un fichier template.php dans le dossier de votre sous-thème, avec une ligne <?php vide au début. Puis identifiez la fonction theme_hook() en charge du rendu du HTML que vous souhaitez modifier. Disons que vous voulez appuyer davantage l'accentuation rendu par les placeholders du theme. theme_placeholder() se trouve dans le fichier includes/theme.inc. Copiez le code dans votre fichier template.php, modifiez le nom de la fonction en subthemename_placeholder() et modifiez le corps en ce que vous souhaitez, par exemple :

  function subthemename_placeholder($text) {
    return '<strong><em>'. check_plain($text) .'</em></strong>';
  }

Rafraîchissez le cache du thème, en allant dans Administrer » Construction du site » Thèmes et en cliquant sur le bouton Enregistrer la configuration. Maintenant, rendez-vous, disons, dans l'onglet Révisions (.../node/%/revisions) et vous verrez que le titre et version en cours sont fortement accentués (à supposer que le node ait plus d'une version)

Comme pour les autres fichiers du dossier de votre sous-thème, les modifications futures des fonctions existantes de template.php prennent effet immédiatement, vous n'avez pas à modifier le cache à nouveau.

Nous avons indiqué que les gabarits sont généralement préférés aux fonctions theme_hook(). Voyons si le vilain petit canard theme_hook() peut être transformé en gabarit...

Exemple 4 : surcharger un theme_hook() avec un gabarit

La partie facile ressemble beaucoup à l'exemple 2 et se base sur la règle que chaque fichier <theme>.tpl.php dans le dossier de votre sous-thème surcharge automatiquement tout hook de thème existant, indépendamment de l'endroit où il est implémenté, que ce soit dans par une fonction ou un gabarit. Aussi, pour surcharger la fonction theme_user-name() (/includes/theme.inc) et rendre le HTML plus designer-friendly, vous n'avez qu'à créer un fichier nommé username.tpl.php dans le dossier de votre sous-thème. Donnez-lui le contenu suivant et rafraîchissez le cache :

  <span style="color:orange">*author goes here*</span>

Vous n'aurez pas à aller loin pour voir le résultat de cette modification, Administrer » Gestion du contenu » Contenu.

Maintenant le plus dur... récupérer le nom de l'auteur à partir du contexte PHP dans lequel le hook de thème username est utilisé et le placer dans le code HTML précédent.

C'est là que les fonctions de pré-traitement entrent en jeu. Ajoutez le code suivant à votre fichier template.php (n'oubliez pas de changer le préfixe subthemename pour qu'il corresponde à votre sous-thème).

  /**
   * Implémentation de <subthemename>_preprocess_hook().
   * Surcharge  /includes/theme.inc/theme_username($object).
   * Appelé avant la mise en forme par le gabarit, ce qui nous permet
   * d'initialiser les variables utilisées dans le gabarit.
   *
   * @param $variables, contient l'objet utilisateur à mettre en forme
   * @return rien
   */
  function subthemename_preprocess_username(&$variables) {
   $user = $variables['object'];
    // … autre code et initialisations de variables si besoin
    $variables['username'] = check_plain($user->name);
  }

Les dernières lignes rendent la variable $username disponible dans le gabarit, vous pouvez donc en tirer parti dans votre fichier username.tpl.php comme indiqué ci-dessous :

  <span style="color:orange">*<?php print $username ?>*</span>

Rafraîchissez le cache à nouveau (Administrer » Construction du site » Thèmes) et revenez à la page Contenus. Ou, pour changer, visitez la page Gestion des utilisateurs » Utilisateurs.

Et voilà. Le theme_hook() qui amalgamait, dans une seule fonction difficile à décrypter, le traitement des données et leur présentation, est maintenant divisé en plusieurs fichiers PHP et HTML, qui peuvent être maintenus séparément par des concepteurs de thèmes et des programmeurs.

Créer un zone de connexion Utilisateur personnalisée

Date du document en anglais : 26 Août 2009 - 01h20 - http://drupal.org/node/92657  



Dans ce « How to » vous apprendrez à créer une barre utilisateur qui :

Voici à quoi cela ressemblera une fois terminé :

uneimage
uneimage

Comme vous pouvez le voir, ce how-to est écrit pour le thème Garland, qui est le thème par défaut pour Drupal 5. Mais vous pouvez tout aussi bien l'appliquer pour un autre thème.

Décider l'approche

Drupal est très puissant, il est si souple que vous pouvez utiliser plusieurs approches pour vos réalisations. Voilà pourquoi 5 minutes de réflexion ne seront pas de trop avant de mettre les mains dans le cambouis.

La solution à laquelle je pense ressemble à ceci :

Oh ! Plaçons d'abord la fonction dans page.tpl.php

Commençons par là, mettons déjà l'appel à garland_user_bar()(même si elle n'existe pas encore), ainsi, tant que nous travaillerons avec garland_user_bar(), nous n'aurons qu'à rafraichir la page dans notre navigateur pour voir le résultat.

  1. Ouvrez themes/garland/page.tpl.php , vers la ligne 16 vous trouverez :
    <div id="navigation"></div>
    Ce <div> est le conteneur pour la barre du haut du thème Garland. Mettons-y l'appel à notre fonction garland_user_bar() :
    <div id="navigation"><?php print garland_user_bar() ?></div>

Ecrire la fonction garland_user_bar()

Avant de vous livrer le code entier, je vais vous expliquer comment nous allons l'écrire.

  1. Ouvrez themes/garland/template.php, écrivons une fonction vide à la fin du fichier, nous lui ajouterons le code par la suite :
    <?php
    function garland_user_bar() {
    }
    ?>
  2. Nous devons accéder à la variable globale $user, qui nous dira si l'utilisateur est connecté ou pas. La première ligne de la fonction sera donc :
    <?php
    global $user;
    ?>
  3. Je déclarerai aussi une nouvelle variable nommé $output, pour pouvoir lui ajouter ce que je voudrais. A la fin elle renverra son contenu à l'endroit où nous avons placé notre fonction dans page.tpl.php. Écrivons cette ligne :
    <?php
    $output 
    '';
    ?>
  4. Je veux vérifier si l'utilisateur est connecté ou pas. Ça se fait en vérifiant si la variable $user->uid existe ou pas puisque lorsque Drupal connecte un utilisateur, il modifie automatiquement $user->uid pour refléter l'ID utilisateur, toujours supérieur à zéro.
    Voici ce que nous devons ajouter :
    <?php
    if (!$user->uid) { // if user is NOT logged in..
    ?>
    Notez le ! qui signifie NON, le code indique if not $user->id, ce qui signifie si l'utilisateur n'est pas connecté
  5. Alors... Si l'utilisateur n'est pas connecté, on fait quoi ?... On affiche la login form ! Et comme je l'ai dit plus haut, puisque la login form de Drupal nous convient parfaitement, qu'elle a juste besoin que l'on modifie ses CSS, nous n'avons pas besoin d'écrire la nôtre.
    Voici comment appeler la login form :
    <?php
    $output 
    .= drupal_get_form('user_login_block');
    ?>
    drupal_get_form() est une fonction très pratique : vous lui donnez le nom de la fiche et elle vous la renvoie, prête à l'emploi.
  6. Nous avons géré le cas de l'utilisateur non connecté. Mais que faire s'il est déjà connecté ?
    Ajoutons le code pour gérer cette situation :
    <?php
    } else {
    ?>
  7. Si l'utilisateur est connecté, nous voulons lui afficher un message de bienvenue et quelques liens utiles. Voyons le message :
    <?php
    $output 
    .= t(
        
    '<p class="user-info">Salut !user, bienvenue.</p>'
        array(
            
    '!user' => theme(
                
    'username'
                
    $user
                
    )
            )
        );
    ?>
    la fonction t() encapsule la totalité du message, qui peut ainsi être traduit. Pour afficher les noms utilisateurs, vous devriez toujours utiliser theme('username', $user).
  8. Les liens maintenant... Je veux deux liens : « Votre compte » et « Déconnexion ». Drupal a une fonction appelée theme_item_list() à laquelle vous pouvez donner une liste d'items et qui vous les retournera dans une liste <ul> HTML.
    « Votre compte »est lié à ?q=user/<uid> et « Déconnexion » a ?q=logout. Ce sont des URL standards dans Drupal. Voici le code :
    <?php
    $output 
    .= theme('item_list', array(
        
    l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
        
    l(t('Sign out'), 'logout')));
    ?>
    Oh ! Une nouvelle fonction ! l() génère des liens. Vous lui passez le titre et l'URL et elle vous retourne un lien <a href="..." title="..">....</a> en bonne et due forme.
  9. Il reste une dernière chose avant d'obtenir l'affichage. Je veux tout encapsuler dans un <div id="user-bar">...</div>. Pourquoi ? Parce qu'il sera plus simple d'écrire les CSS s'appliquant à cette barre. Comment ? En utilisant l'opérateur . (dot). Comme ceci :
    <?php
    $output 
    '<div id="user-bar">' $output '</div>'
    ?>
  10. Maintenant que tout est prêt, il ne reste qu'à renvoyer le code HTML ainsi généré :
    <?php
    return $output
    ?>

La fonction complète aura donc ce code :

<?php
function garland_user_bar() {
  global 
$user;                                                                
  
$output '';
if (!
$user->uid) {                                                          
    
$output .= drupal_get_form('user_login_block');                            
}                                                                            
  else {                                                                      
    
$output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username'$user))); 
    
$output .= theme('item_list', array(
      
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
     
l(t('Sign out'), 'logout')));
}
  
$output '<div id="user-bar">'.$output.'</div>';
  return 
$output;
}
?>

Personnalisation des styles !

Maintenant que la form de connexion et les messages de bienvenue sont correctement affichés aux utilsiateurs, il reste à personnaliser leur apparence. C'est le boulot des CSS.

  1. D'abord, créons un nouveau fichier CSS dans lequel nous écrirons les styles de la nouvelle user-bar :
    themes/garland/user_bar.css.
  2. Ce fichier CSS existe désormais mais personne ne le connait... Nous allons modifier page.tpl.php pour l'inclure dans la page. Comment ? En ouvrant themes/garland/page.tpl.php et en ajoutant ce code APRES la ligne 11 :
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/user_bar.css";</style>
    Ce code ajoutera la feuille de style à la page.
  3. Écrivons maintenant les règles CSS kivonbien. Rassurez-vous, ce n'est pas très long à faire, ce sont juste les commentaires qui prennent de la place :P
    /*
    this will expand the default garland bar, make it bigger so our form and message can fit in.
    */

    #navigation {
      height: 3em;
    }
    /*
    by default, the default form adds some surrounding space, this cancels it
    */

    #navigation div.form-item,
    #navigation div.content {
      margin: 0;
      padding: 0;
    }
    /*
    this adds some space in top and bottom, so anything inside can look vertically
    centered
    */

    #user-bar {
      padding: .65em 0;
    }
    /*
    by default, fields labels tries to reserve a whole line for itself, this
    cancels that and and sends it to the left.
    it also adds some space on the right and left of the label to look easy on
    the eye.
    */

    #user-bar label {
      float: left;
      margin-left: 10px;
      margin-right: 2px;
    }
    /*
    inputs too, they try to reserve a whole line for itself, this
    cancels that and sends it to the left
    */

    #user-bar input {
      float: left;
    }
    /*
    I don't like the required * (asterisks), so I hide them.
    */

    #user-bar span.form-required {
      display: none;
    }
    /*
    the form submit button, it's so tight so we expand it a bit, and give it some
    free space around.
    */

    #user-bar input.form-submit {
      margin-top: -1px;
      margin-left: 10px;
      padding: 0 .5em;
    }
    /*
    now this is for the links list, lists by default tries to reserve a whole line
    also they add space surrounding them. we cancel all that and send the list
    to the right
    */

    #user-bar div.item-list ul {
      float: right;
      margin: 0; padding: 0;
      margin-right: 10px;
    }
    /*
    remember, stylign above was for the whole list, now for each item,
    we all know each item in the list by default exists on a separate line, also
    has that bullet on the left. we cancel all that. and makes all items sit beside
    each other
    */

    #user-bar div.item-list ul li {
      float: left;
      background: none;
      margin: 0 5px;
      padding: 0 10px;
      border: 1px solid #b8d3e5;
    }
    /*
    this is the "Hi user, welcome back message".
    by default &lt;p&gt; tries to exist on a separate line, we cancel that.
    also by default &lt;p&gt; has some surrounding space, we cancel that too, and give it
    only space on the left.
    */

    #user-bar p.user-info {
      float: left;
      padding: 0;
      margin: 0 0 0 10px;
    }

Et voilà !

Une solution qui marche et qui n'a pas demandé de surcharger le moindre code existant. Et comme nous n'avons pas codé de HTML en dur, nous n'aurons pas besoin de maintenir le code au fil des mises à jour de Drupal.

Emuler les fonctions de pré-traitement de thème dans Drupal 5

Date du document en anglais : 22 Avril 2010 - 22h44 - http://drupal.org/node/201587  



Drupal 6 a apporté le concept des fonctions de pré-traitement de thèmes. En résumé, ces fonctions permettent aux thèmes, aux moteurs de thèmes, et même aux modules de s'insérer dans le traitement du thème et de manipuler les variables envoyées aux thèmes. Cela remplace la vieille fonction _phptemplate_variables() du moteur de thème de Drupal 5 tout en effectuant le même travail.

Bien que nous ne puissions importer cette nouvelle fonctionnalité dans Drupal 5, il est possible de simplifier _phptemplate_variables() pour qu'elle ressemble à ce qui se fait dans Drupal 6. Plus précisément, nous pouvons diviser _phptemplate_variables()en plusieurs fonctions qui agiront comme les fonctions de pré-traitement de thème de Drupal 6.

Pour obtenir cette simplification, spécifiez la fonction _phptemplate_variables() dans le fichier template.php comme ceci :

<?php
function _phptemplate_variables($hook$vars) {
    
$function 'phptemplate_preprocess_'str_replace('-''_'$hook);
    if (
function_exists($function)) {
        
$function($vars);
    }
    return 
$vars;
}
?>

En premier lieu, nous nous assurons que le theme hook est d'un format pouvant être utilisé comme une partie de nom de fonction, et nous construisons son nom comme il sera appelé par la fonction de pré-traitement. Puis, s'il existe, nous l'appelons avec le tableau $vars. Vous remarquerez la fonction de pré-traitement ne retourne pas de valeur. A la place nous passons le paramètre par référence, comme ceci :

<?php
function phptemplate_preprocess_page(&$vars) {
  
// Manipulate the $vars array here.
}
?>

Dans le thème, nous pouvons maintenant manipuler n'importe quelle variable du fichier gabarit, ajouter, enlever ou modifier les variables envoyées au gabarit juste en déclarant la fonction adéquate. Bien que cela ne nous apporte aucune nouvelle fonctionnalité, cela reste plus facile à lire et à actualiser qu'une énorme instruction switch, et cela facilitera également une migration ultérieure vers Drupal 6.

Des fichiers variables distincts lorsque la fonction de thème devient ingérable

Lorsque la fonction de gabarit grossit au point de devenir ingérable, on peut la séparer en plusieurs fichiers variable :

<?php
/**
* Intercept template variables
*
* @param $hook
*  The name of the theme function being executed
* @param $vars
*  A sequential array of variables passed to the theme function.
*/
function _phptemplate_variables($hook$vars = array()) {
    global 
$user;

$vars['user'] = $user;
$vars['path'] = base_path() . path_to_theme() .'/';
$vars['admin'] = $user->roles[3] || $user->uid == TRUE FALSE;
$vars['moderator'] = $user->roles[4] ? TRUE FALSE;
$vars['editor'] = $user->roles[5] ? TRUE FALSE;
$vars['authenticated'] = $user->uid TRUE FALSE;
$vars['theme'] = 'my_theme_name';

// Include broad variables for each hook.
if (file_exists($vars['directory'] .'/'$hook .'.vars.php')) {
    include_once 
$vars['directory'] .'/'$hook .'.vars.php';
    
$function $vars['theme'] .'_variables_'str_replace('-''_'$hook);
    
$vars $function($vars);
}

// Specific variables for node types.
if ($hook == 'node') {
    if (
file_exists($vars['directory'] .'/node-'$vars['node']->type .'.vars.php')) {
        include_once 
$vars['directory'] .'/node-'$vars['node']->type .'.vars.php';
        
$function $vars['theme'] .'_variables_node_'$vars['node']->type;
        
$vars $function($vars);
    }
}

return 
$vars;
}
?>

Autres améliorations

Ajoutons-lui une commodité supplémentaire :

<?php
function phptemplate_preprocess_node(&$vars) {
    
$node $vars['node'];
    
$type $node->type;
    
    
// general node variables processing
    // preprocess by node type
    
if (function_exists($function "phptemplate_preprocess_node_$type")) {
        
$function($node$vars);
    }
}
?>

ce qui nous donne une fonction de pré-traitement différente par type de node, par exemple :

<?php
function phptemplate_preprocess_node_story($node, &$vars) {
  
// specific story variable processing
}
?>

Fusionner plusieurs fonctions _phptemplate_variables

Date du document en anglais : 11 Mars 2009 - 06:36 - http://drupal.org/node/152426 Drupal 5.x



Plusieurs bouts de code de thèmes PHPTemplate, et quelques modules contributifs , auront besoin que vous ajoutiez des fonctions _phptemplate_variables à vos fichiers template.php. Malheureusement, si vous voulez utiliser plus d'un module ou plus d'un de ces bouts de code, ou si votre thème possède déjà une fonction _phptemplate_variables, vous ne pourrez pas en ajouter de nouvelles, vous devrez fusionner les deux fonctions. Si vous ne connaissez pas suffisamment le PHP, cela vous semblera une tâche redoutable.

Voici une technique simple pour fusionner plusieurs de ces fonctions en une seule. Vous n'avez pas besoin de connaître le PHP, contentez-vous de copier et de coller, et changez aussi quelques noms comme indiqué ci-après.

  1. Placez toutes les fonctions  _phptemplate_variables dans votre fichier template.php, et modifiez tous leurs noms, de  _phptemplate_variables à quelque chose d'autre. Par exemple  _phptemplate_variables_taxonomy_snippets,  _phptemplate_variables_page_title_module, etc. S'il y a déjà une fonction _phptemplate_variables dans le thème, changez-lui aussi son nom, par exemple _phptemplate_variables_garland_theme. Assurez-vous qu'il n'y ait pas deux fonctions avec le même nom.
  2. Créez une nouvelle fonction _phptemplate_variables. Elle sera la fonction maîtresse qui combinera toutes les variables des autres fonctions. Voici à quoi elel devrait ressembler :

  3. <?php
    /**
    * Appeler notre fonction_phptemplate_variables_*
    personnalisée et fusionner le résultat dans un seul tableau.
    */
    function _phptemplate_variables($hook$vars) {
     
    $funcs = array(
     
    // Voici les noms de nos fonctions
    personnaliséesAjoutez-en d'autres si besoin.

    '
    _phptemplate_variables_taxonomy_snippet',

    '
    _phptemplate_variables_page_title_module',
     '
    _phptemplate_variables_garland_theme,
     );
     foreach (
    $funcs as $func) {
     
    $vars array_merge($vars$func($hook,
    $vars));
     }
     return 
    $vars;
    }
    ?>

  4. Copiez ce code dans votre fichier template.php et changez les nom des fonctions pour ceux que vous utilisez.

Ensuite, si vous voulez ajouter d'autres fonctions _phptemplate_variables vous pourrez le faire facilement en lui donnant un nouveau nom et en ajoutant son nom à la liste.

Des coins arrondis dans Drupal 7 (jquery corner)

Traduction de la page http://drupal.org/node/1030144
publiée / actualisée sur drupal.org le 24 Janvier 2011


Voici une façon rapide pour arrondir les angles de vos DIV dans Drupal 7.

Dans votre fichier VOTRETHEME_corner.js, ajoutez ce qui suit :

(function ($) {
  Drupal.behaviors.YOUTHEME = {
    attach: function(context, settings) {
      // list every element that you would like to adorn with corners below
      $("#block-user-login h2").corner("tl tr 4px"); // this is just an example, customize as you'd like, tl = top left
    }
  }
})(jQuery);

Et voilà ! Pour toutes questions, conntactez l'auteur à www.ZUROSS.com.


 

Et maintenant, en CSS3

(par wjaspers)

.some-region-name {
  /* Chrome and Safari */
  -webkit-border-radius: 5px;
  /* Firefox */
  -moz-border-radius: 5px;
  /* Opera */
  -o-border-radius: 5px;
  /* W3C standard--when adopted across the board */
  border-radius: 5px;

  /**
   * You can optionally specify the shape of all, opposite, or each corner
   * with the following:
   *   border-radius: 5px 10px; /* All corners will be 5px round tall and stretched 10px long*/
   *   border-radius: 5px 10px / 3px 5px; /* Top left and bottom right will be 5x10. Top right and bottom left will be 3x5. */
   *   border-radius: top-left / top-right / bottom-right / bottom-left; /* Where each corner gets its own dimensions */
   **/
}

Images d'en-tête dynamiques correspondant à la Taxonomie

Traduction de la page http://drupal.org/node/882852
publiée / actualisée sur drupal.org le 14 Août 2010


Pour créer les images d'en-tête de pages, vous utilisez probablement plusieurs blocs contenant des images que vous ne rendez visibles que sur certains chemins (path).

Il y a une autre façon de faire, plus facile, qui consiste à créer un seul bloc avec un filtre php activé et paramétré comme suit. L'avantage est évident, vous n'avez qu'un bloc à créer et il sera plus facile d'ajouter des catégories et des images que si vous aviez plusieurs blocs. Car, que se passerait-il si vous aviez des centaines de catégories, vous ne voudriez pas créer des centaines de blocs, n'est-ce pas ?

Étape 1

Supposons que vous ayez les catégories suivantes dans votre blog (créées avec la taxonomie pour figurer dans vos billets de blog) :

Étape 2

Avec le module Pathauto installé, paramétrez les chemins de votre blog comme ceci : blog/[term-raw]/[title-raw], vos URL devrait ressembler à ceci lorsque vous créez vos billets :

Étape 3

Mettez vos images dans un dossier (par exemple, /sites/default/files/headers/) et nommez-les comme ci-dessous :

Étape 4

Placez ce code dans un bloc (qui deviendra le contenu de vote en-tête) avec le filtre php activé :

<?php
// cette ligne fournit le path, comme /blog/animaux/mon-chaton-mignon
$termp $_SERVER['REQUEST_URI']; 

// cette ligne convertit le path en tableau (array)
// comme : array('blog','animaux','mon-chaton-mignon')  
$categ explode('/',$termp);  

// inverser le tableau et le second terme sera toujours 
// la catégorie comme dans array('mon-chaton-mignon','animaux','blog')            
$categrev array_reverse($categ);       

// on peut initialiser une variable avec le deuxième terme
$categ1 $categrev[1];                    

// ajout d'une instruction conditionnelle pour vérifier si l'image existe 
// si elle existe, alors on charge l'image
(file_exists('/sites/default/files/headers/' $categ1 '_header.jpg')) ? print '<img src="/sites/default/files/headers/' $categ1 '_header.jpg" alt="' $categ1 '"/>''';  
?>

Maintenant, si vous avez plusieurs termes dans une hiérarchie et que vous voulez afficher chaque terme avec une image en en-tête, il vous suffit de modifier le tableau des termes et l'instruction conditionnelle.


A la suite de cet article, un lecteur a indiqué en commentaire que le module Taxonomie Image permet d'obtenir le même résultat.

Ce à quoi il a été répondu (par l'auteur ? ) que ce bout de code permettait de résoudre simplement l'ajout d'images relatives aux paths. Et que la compréhension de ce code permettait également de résoudre des problèmes simples relatifs aux paths, comme la mise en forme des menus, des blocs, des pages, selon leurs paths.


Look and feel

Les articles qui suivent traitent de la modification du look and feel de votre site par l'utilisation des styles et du javascript.

CSS, trucs, astuces et techniques

Date du document en anglais : 5 Juin 2008 - 00:49 http://drupal.org/node/124416

Cette section présente quelques techniques CSS permettant d'enjoliver les sites.

Elle est alimentée par les utilisateurs, je n'ai traduit que les articles estampillés « Drupal 6.x » ou sans précisions de version.

Block quotes

Date du document en anglais : 31 Mai 2007 00:22 http://drupal.org/node/148153


Si vous voulez afficher plusieurs paragraphes de citations avec des caractères guillemets de citation (anglais) plutôt que des images, vous pourriez utiliser ce qui suit : 

blockquote p::before {
  content: open-quote;
}

blockquote p::after {
  content: close-quote;
  visibility: hidden;
}

blockquote p:last-child::after {
  visibility: visible;
}

Bien sûr, vous pouvez indenter le texte comme il se doit.

Le balisage est simple :

<blockquote>
  <p>paragraph one</p>
  <p>paragraph two</p>
  <p>paragraph three</p>
  <p>paragraph four</p>
</blockquote>

Uniquement testé sur Firefox.

Commentaires conditionnels avec IE

Date du document en anglais : 30 Octobre 2008 - 13h57 http://drupal.org/node/134569

L'utilisation de JavaScript pour la détection du navigateur est un sujet délicat.

Le paramétrage des polices d'IE pour qu'elle correspondent à celles des autres navigateurs n'est pas chose aisée. Beaucoup de concepteurs de thèmes ressentent le besoin de restreindre leur tendance à l'embonpoint, ou utilisent des hacks CSS pour forcer IE à respecter les normes. 

Hélas pour les utilisateurs de Palm pilot, Blackberries, screen readers, de vieilles versions d'Opéra, utiliser JavaScript pour détecter le navigateur est une mauvaise solution. Il y a tellement de navigateurs, de résolutions différentes qu'il est impossible de satisfaire tout un chacun avec une seule feuille de style.

Les designers avertis se diront « Pourquoi ne pas untiliser une seule feuille de style pour tous les navigateurs, et utiliser JavaScript pour fournir les paramètres propres à IE ? ». Bonne question, mais il y a mieux à faire que de coder un script pour cela.

Microsoft a permis aux designers de spécifier des règles CSS propres à IE en utilisant une balise de commentaire HTML modifiée.

Ce commentaire n'est pas valable selon les normes HTML, c'est juste un commentaire. Tous les navigateurs l'ignoreront mais IE en tiendra compte et suivra toutes les instructions qu'il contiendra. Ce Commentaire Conditionnel est encadré d'une balise <link> qui contiendra la feuille de style spécifique à IE. Voici à quoi il ressemble : 

<!--[if IE]>
   <link href="screenStyle4IE.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

Comme d'habitude avec Drupal, il y a plusieurs façons de placer cette modification en début de chaque page HTML. La meilleure façon consiste sans doute à utiliser le module Conditional Styles et à modifier le fichier .info de votre thème pour incorporer des styles conditionnels :

; Set the conditional stylesheets that are processed by IE.
conditional-stylesheets[if lt IE 7][all][] = ie6-and-below.css
conditional-stylesheets[if IE 7][all][] = ie7.css

Remarque : Ce module ne joue que sur la façon dont le registre de thèmes est construit. Vous devrez effacer le registre de thème pour pouvoir constater les changements.

Une autre façon de faire est de placer cette balise dans la section <head> seulement. Une fois que la balise <link> est interprétée par IE, toute règle CSS qu'elle contiendra sera prioritaire. N'oubliez pas que les CSS s'appliquent en cascade, aussi, toute surcharge de règles antérieures doivent venir impérativement prendre place après le lien d'inclusion CSS normal.

Ajoutez un Commentaire Conditionnel au fichier page.tpl.php de Garland comme ceci : 

<head>
  <title><?php php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
  <style type="text/css" media="print">@import "<?php print base_path() . path_to_theme() ?>/print.css";</style>
   style type="text/css" media="screen">@import "<?php print base_path() . path_to_theme() ?>/screen.css";</style>
   style type="text/css" media="handheld">@import "<?php print base_path() . path_to_theme() ?>/handheld.css";</style>
  <!--[if lt IE 7]>
   <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie-layout.css";</style>
 <![endif]-->
  <!--[if IE ]>
 <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie-font-sizes.css";</style>
 <![endif]-->
</head>

La souplesse est ahurissante ! Il est désormais possible de fournir une classe div pour tous les navigateurs, puis de préciser la taille, le z-index, les float, ou les margins de cette div uniquement pour IE.

La taille des polices, disiez-vous ? Bien sûr ! Les polices de IE ont toutes une taille plus grande que celles des autres navigateurs. Personnalisez-les dans un fichier fix-ie-font-sizes.css, en spécifiant des tailles de polices juste inférieures à celles de la feuille de style normale. Par exemple, si vous avez p{font-size:normal}, mettez p{font-size:small}. Cela vous permet une certaine homogénéité entre les navigateurs sans que vous ayez à vous embarraser de hacks composés de pourcentages de taille.

Oh, et si vous voulez affiner jusqu'à préciser des styles pour chaque version de IE, regardez l'exemple précédent : <!--[if lt IE 7]> signifie « toutes les version de IE sauf IE7». Pour plus d'infos sur « lt IE6 » et  « lt IE7 », voyez les pages chez Microsoft.

Vous pouvez aussi créer des styles et des fichiers JS qui seront lus par tous les navigateurs sauf par IE, en modifiant légèrement la structure du code car, dans ce cas-là, les déclarations doivent être à l'extérieur des commentaires : 

<!--[if !IE]>-->
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/ie-wont-see-this.css";</style>
<!--<[endif]-->
La contribution initiale sur ce sujet peut être lue à http://drupal.org/node/16173

Remarque : l'utilisation de feuilles de styles internal ou inline peut causer des problèmes avec certains navigateurs (notamment Opera et Safari) car ils n'ignorent pas toujours les CSS disposées à l'intérieur des commentaires. Utiliser des feuilles de styles externes, comme décrit ci-dessus, semble résoudre ce problème.

Changer la taille d'un champ de saisie CCK

Date du document en anglais : 10 Septembre 2008 - 20h19 http://drupal.org/node/186019

Surcharger la largeur par défaut d'un champ de saisie CCK se fait mieux dans un module personnalisé. Utilisez la fonction hook_form_alter() pour cibler l'ID de votre formulaire. Si vous ne connaissez pas cet ID, utilisez un <?php print($form_id); ?> au début de votre module personnalisé et Drupal vous indiquera tous les ID des formulaires utilisés.

Maintenant que vous connaissez l'ID du formulaire, utilisez form_alter pour modifier le #size de votre champ CCK :


<?php
function nameOfYourModuleGoesHere_form_alter($form_id, &$form) {
  if (
$form_id == 'idOfYourFormGoesHere') {
    
$form['nameOfYourCCKfieldGroup']['nameOfYourCCKinputField']['#size'] = 40;
  }
}
?>

Utilisez <?php print($form); ?> si vous avez besoin de voir les noms des CCKfieldGroup ou des CCKinputField.

Modifier le paramètre #size du champ de cette façon est plus pertinent que de le faire en surchargeant les styles CSS des classes de saisie car les CSS ne cibleront pas les file fields à cause des restrictions de sécurité des navigateurs..

Cette méthode form_alter présente l'avantage de pouvoir travailler sur les formulaires même quand les CSS sont désactivés, comme c'est le cas sur les premiers ordinateurs de poche.

Pour le thème Zen

Ajoutez ceci au fichier template.tpl.php de votre sous-thème :


<?php
function zen_file($element) {
  
_form_set_class($element, array('form-file'));
  return 
theme('form_element'$element'<input type="file" name="'$element['#name'] .'"'. ($element['#attributes'] ? ' 'drupal_attributes($element['#attributes']) : '') .' id="'$element['#id'] .'" size=\"40\"' ."\" />\n");
}
?>

Comment changer l'encodage des caractères de Drupal (UTF-8 et Unicode) ?

Date du document en anglais : 5 Janvier 2008 - 17h08 http://drupal.org/node/8408


Plusieurs personnes demandent comment paramétrer l'encodage de caractères que Drupal utilise. La réponse est simple : vous ne pouvez pas, car vous n'avez pas besoin de le faire.

Drupal utilise UTF-8 pour encoder toutes ses données. C'est un encodage Unicode, il peut donc contenir des données dans toutes les langues. Vous n'avez plus besoin de vous préoccuper des particularités d'encodages pour votre site (tels que Big5, GB2312, Windows-1251 ou 1256, etc). 

De même, lorsque Drupal importe des données XML externes (telles que RSS ou XML-RPC), elles sont automatiquement converties en UTF-8 (le support iconv pour PHP est requis pour la plupart des encodages).

Si vous voulez réellement modifier l'encodage de Drupal, vous rencontrerez énormément de problèmes, à cause des différentes façons dont Drupal reçoit et envoit des données (web, e-mail, RSS, XML-RPC, etc).

Enlever le message « Connectez-vous pour laisser un commentaire » des sites Drupal 6

Date du document en anglais : 6 Avril 2009 - 22h51 http://drupal.org/node/232310 Drupal 6.x

L'approche Commentaires

Par défaut, Drupal ajoute ce texte à la fin de chaque article : « Vous devez vous connecter pour poster des commentaires ». Pour enlever ce texte, autorisez les commentaires pour les visiteurs anonymes, ou désactiver le module Comments.

Surcharge des paramètres

Vous pouvez utiliser des textes personnalisés en ajoutant quelque chose comme ceci au fichier /sites/default/settings.php :

<?php
$conf
['locale_custom_strings_en'] = array(
'Add new comment' => 'Discuss',
'<a href="@login">Login</a> to post comments' => '',
);
?>

Surcharge de l'Utilisateur Anonyme

Si vous voulez ne laisser la possibilité de commentaires qu'aux utilisateurs connectés et enlever le texte d'invitation des utilisateurs anonymes, vous pouvez ajouter le code suivant à la fin du fichier template.php de votre thème :

<?php
function phptemplate_links($links$attributes = array()) {
  global 
$user;
  if (!
$user->uid) {
    unset(
$links['comment_forbidden']);
  }
  return 
theme_links($links$attributes);
}
?>

Pour plus d'infos, reportez-vous à http://drupal.org/node/425332

Mettre $tabs dans une nouvelle région -- facilement

Traduction de la page http://drupal.org/node/1097946
publiée / actualisée sur drupal.org le 27 Mars 2011


J'utilise Drupal 6.x avec un thème Zen personnalisé (c'est l'auteur de l'article sur drupal.org qui parle, pas Kolossaldrupal).

L'autre jour, il 'ma été demandé : « Est-il possible de déplacer ces affreux onglets sur la colonne latérale et leur donner un aspect de liens ? ». j'ai répondu bien sûr mais je n'avais pas idée de ce qui m'attendait. Je suis tombé sur un tas de conseils sur la mise en forme des onglets dans un bloc, sur la création de module, sur le déplacement des onglets avec les CSS et quelques autres tuyaux. Déplacer les onglets avec les CSS marche jusqu'à un certain point, mais comme d'autres parties de mon site partageaient le même espace, j'avais vraiment besoin de placer $tabs dans un div de ma région personnalisée.

Ma première idée fut de déplacer le dans de mon page.tpl.php à l'endroit où je le voulais. Je le déplaçais pour qu'il s'affiche dans ma région personnalisée $right. Rien ne s'afficha. En fait, le seul endroit de ma page où l'on pouvait mettre les onglets mis en forme était dans content-top du div content-header.

Bref, j'ai résolu le problème en mettant $tabs dans une variable et en affichant cette variable où je le voulais dans la page. Comme ceci :

<?php
if ($breadcrumb || $title || $tabs || $help || $messages): ?>
               <div id="content-header">
                    <?php print $breadcrumb?>
                    <?php print $messages?>
                    <?php if ($tabs): ?>
                                      <?php $newTabs="<div class='tabs'>".$tabs."</div>"?>
                    <?php endif; ?>
                 <?php print $help?>
            </div> <!-- /#content-header -->
        <?php endif;
?>

et donc :

<?php
print $right?>
               <div id="sidebar-right-page">
                  <div id="sidebar-right-inner" class="region region-right">
<?php print $right?>
<?php 
print $newTabs;?>
          </div>
             </div>
        <?php endif;
?>

J'ai enlevé les "tab" graphiques et formaté les onglets comme souhaité en modifiant le fichier tabs.css.

Espérant que cela rende service à ceux confrontés au même problème.

Replier par défaut des groupes de champs : ordonner les paramètres formulaires du thème

Traduction de la page http://drupal.org/node/733198
publiée / actualisée sur drupal.org le 5 Octobre 2010


Par défaut, les paramètres formulaire des thèmes ont tous les groupes de champs (fieldsets) du noyau dépliés, même s'ils ne contiennent pas de champs requis. Et notamment, lorsque vous dépliez les paramètres de thème avec vos propres éléments de formulaires, les groupes de champs du noyau dépliés créent une vue désorganisée.

La solution réside dans une surcharge de thème placée dans votre fichier template.php (voir Overriding themable ouput pour un aperçu des surcharges et de la localisation de ce code) :

<?php

// Surcharge des paramètres de thème formulaires 
// pour replier les groupes de champs "Logo" et "Icone". 
// Remplacez "yourthemename" par le nom de votre thème.
function yourthemename_system_settings_form($form) {
  
// Replier les groupes de champs
  
$form_elements element_children($form);
  foreach (
$form_elements as $element) {
    if (
$form[$element]['#type'] == 'fieldset') { 
        
//Identifier le groupe de champs et le replier
      
$form[$element]['#collapsible'] = TRUE;
      
$form[$element]['#collapsed']   = TRUE;
    }
  }
  return 
drupal_render($form);
}
?>

Views - Créer une liste d'événements, groupés par mois

Date du document en anglais : 23 Février 2010 - 02h47 - http://drupal.org/node/388140  



Views dispose d'une fonctionnalité appelée regroupement. Elle vous permet de regrouper les données d'une liste en différentes catégories. En d'autres termes, si plusieurs éléments font partie d'une même catégorie, ils sont regroupés et forment alors leur propre liste. Pour que ce regroupement fonctionne, vous devez avoir des champs actifs et présents, fort heureusement vous pouvez utiliser n'importe quel champ disponible pour créer des catégories.

uneimage
Illustration 1: copie d'écran prise sur l'article de Drupal.org. Non, non. Je ne l'ai pas francisée.

Modules utilisés :

Créer un type de contenu pour vos événements

Avec CCK :

Créez ensuite quelques contenus pour ce nouveau type Événement dont certains avec la même date.

Créer une nouvelle vue

Avec Views, ajoutez une nouvelle vue appelée Événements.

Choisissez un style pour la vue, de préférence Table.

Ajoutez les champs Node : Titre et Contenu : Date. Ce sont les champs qui seront visibles, paramétrez-les de sorte qu'ils soient présentables.

Nous venons d'ajouter le champ date, mais nous devons l'ajouter une deuxième fois pour qu'il soit utilisable dans le regroupement. Cette fois-ci il ne devra pas être affiché à côté du premier, pour cela cochez « Exclure de l'affichage » et n'indiquez rien dans l'étiquette.

La raison pour laquelle nous avons besoin d'un deuxième champ pour la date est que nous allons modifier sa présentation pour n'afficher que le mois et l'année.

Maintenant, dans le cadre Paramètres de base, en face de l'option Style, cliquez sur le bouton « Rouage » et sous Champ de regroupement, sélectionnez le champ date caché puis cliquez sur Mise à jour.

Vous pouvez aussi ajouter un filtre pour Node : Publié = oui et Node : Type = événement.

Si vous faites un aperçu de la vue, vous remarquerez que chaque node a été placé dans son propre groupe, et chaque groupe a une date unique comme en-tête. Puisque toutes les dates sont uniques nous avons pour l'instant un groupe par date.

Nous devons maintenant modifier le champ date caché pour qu'il ne retourne que le mois et l'année.

Assurez-vous que votre vue ait un type d'affichage page ou bloc et sauvegardez-la.

Surcharger l'affichage du champ date

Pour trouver le fichier à copier pour personnaliser notre champ, nous devons cliquer sur le lien Thème : informations (situé dans le bloc Paramètres de base, tout en bas du bloc), cela nous donne la liste des fichiers possibles pour chaque partie de la vue. De cette liste, trouvez l'identifiant du champ caché et regardez la deuxième suggestion de nom de fichier (la première suggestion est en gras), dans mon cas il s'appelle views-view-field--field-date-value-1.tpl.php. Le nom du vôtre peut être différent.

Pour utiliser ce fichier, nous devons copier celui appelé views-view-field.tpl.php du dossier sites/all/modules/views/theme pour le coller dans le dossier de votre thème. Renommez-le en suivant avec le nom suggéré plus haut ( views-view-field--field-date-value-1.tpl.php, dans cet exemple), y compris avec les traits d'union.

Ouvrez le nouveau fichier et remplacez <?php print $output ?> avec :

<?php
print date('F Y'srttotime($row->node_data_field_date_field_date_value));
?>

F = Mois

Y = Année

Dans le code ci_dessus, remplacez node_data_field_date_field_date_value par le nom de votre champ (qui sera trouvé dans la requête SQL, après l'instruction AS)

Maintenant, lorsque vous chargerez la vue finale vous devriez obtenir une liste semblable à celle de la copie d'écran.

Personnalisations

Comment personnaliser l'affichage de la date : http://php.net/manual/fr/function.date.php.

Comment modifier l'apparence du texte : http://v1.reinspire.net/blog/2005/09/15/css_font_styling/ (en anglais).

Mise en garde

Si vous vous demandez pourquoi les données de votre listing ne sont pas correctement groupées, désactivez Theme developper et voyez si ça marche mieux.

Dans le but de vous éviter d'éventuels casse-tête, voici une remarque au sujet de cet exemple :

La raison pour laquelle vous écrivez un gabarit est que le champ de regroupement fait ses comparaisons à partir de la sortie des données et non sur les données elles-mêmes. Cette voie a été choisie pour faciliter l'implémentation de propriétés telles que la granularité sur les dates.

Un des effets de bord de tout ceci est que tout outil qui se plante avec les sorties dira... THEME DEVELOPPER... provoque des différences sur des chaînes dates apparemment égales. Plus précisément, la sortie sera enveloppé d'un tag qui comporte un attribut thmr dont la valeur augmente

One BIG side effect of this is that any tools that monkey with the output, say... THEME DEVELOPER ... will cause what seem like equivalent date strings to be different. More specifically, the output will be wrapped in a tag, that includes a thmr attribute that increments.

Modifier le FavIcon

Date du document original en anglais : 26 Août 2009 - 00h43 - http://drupal.org/node/362265  



Dans un développement web, vous pouvez placer un petit logo affiché près de la barre d'adresse et dans les marque-pages du navigateur de votre internaute. Ce logo s'appelle favicon. Drupal en fournit un par défaut, qui est une goutte d'eau tombante.

Utiliser le favicon de Drupal n'est pas plus mal, mais si vous voulez vraiment faire ressortir votre site, vous devriez afficher le vôtre. Les fichiers favicon sont au format .ico et de très petites dimensions. Le favicon de Drupal fait 32 pixels de côté. Ceci étant dû au fait que les favicon sont affichés dans la barre d'adresse, endroit qui ne dispose pas de beaucoup de place libre. Tout favicon que vous créerez devra être de cette taille.

Modifier le favicon

  1. Ouvrez le dossier d'installation de Drupal
  2. Ouvrez le dossier misc.
  3. Si votre favicon n'est pas déjà nommé favicon, renommez-le ainsi. Les gabarits par défaut de Drupal ne reconnaissent que le format ICO, assurez-vous que votre favicon soit bien enregistré dans ce format.
  4. Placez votre favicon dans le dossier misc et remplacez celui fourni par Drupal.

Le changement n'apparaîtra pas immédiatement dans le navigateur, vous devrez vider son cache et recharger la page. De même, si vous avez bookmarqué votre site, vous devrez effacer le marque-page et le recréer pour voir le nouvel favicon.

Astuces pour la création du favicon

  • Quand vous créez un favicon de toutes pièces, faites-le de dimension carrée et de grande taille. Cela en facilitera son dessin (à moins que vous ne soyez un as en Pixel Art).
  • Les favicons devraient respecter les codes couleur du site.
  • Placez un symbole caractéristique (comme, par exemple, la goutte qui tombe de Drupal, le W de Wikipédia, le G de Google, le K de KolossalDrupal, etc).

Saines lectures

Pour plus d'informations sur les favicons, rendez-vous dans les pages Favicon de Wikipedia ou celles du W3C.

Il y a plusieurs sites qui pourront vous aider à créer des favicons, par exemple : favicon.cc.

Personnalisation complète de votre page d'accueil

Date du document en anglais : 23 Août 2009 - 15h28 - http://drupal.org/node/317461 Drupal 5.x Drupal 6.x



Si vous voulez que la mise en page de votre page d'accueil soit totalement différente du reste de votre site, vous pouvez définir un gabarit complet à cette fin.

Vous pourriez le faire parce que vous avez

  • une page d'accueil très graphique,
  • une maquette en provenance d'un designer qui ne peut pas être vraiment modifiée,
  • une intro en flash en guise de page d'accueil,
  • un « splash screen » ou toute autre nécessité.

... et  parce que faire tout ça dans un thème Drupal générique serait malcommode. 

N'importe quelle page Drupal peut être personnalisée, par le biais des template-suggestions utilisées dans le moteur phptemplate. Cette solution est puissante, apprenez-la.

Dans sa forme la plus simple, vous pouvez :

  1. dans votre dossier de thème, créer une page appelée page-front.tpl.php
  2. y copier du code source HTML statique, avec les corrections de chemins d'accès appropriées.
  3. C'est terminé !

Notez que les chemins relatifs vers les images (ou vers des swf) directement depuis la page ne marcheront pas pour trouver les images enregistrées près du dossier de votre thème. Enregistrer ces images dans le dossier de votre thème est la bonne façon de procéder, mais vous devrez reécrire tout votre code HTML pour utiliser soit 

<img src="/sites/all/themes/votretheme/images/votreimage.gif">

(qui est correct mais mauvais)

soit

<img src="<?php print $directory;?>/images/votreimage.gif">

(qui est beaucoup plus correct - $directory renvoie toujours le chemin du thème en cours d'utilisation)

Pour faire une page d'accueil relativement unique mais qui se marie bien avec Drupal, vous pouvez :

  1. dans votre dossier de thème, créer une page appelée page-front.tpl.php,
  2. y copier du code source HTML statique, avec les corrections de chemins d'accès appropriées.
  3. Comparer votre page avec la page de thème page.tpl.php «normale» et en copier les balises de code comme leur logique dans votre nouvelle page, aux bons endroits.
  4. Vous pouvez placer $content au milieu, des barres latérales aux endroits appropriés pour y placer des blocs ensuite, et $footer dans votre pied de page, etc. Essayez d'en reprendre autant que possible - cela s'avérera utile,  c'est aussi pour cette raison qu'on utilise un CMS.

Sous Drupal 6, les nouveaux gabarits ne seront pas forcément pris en compte dès leur création. Allez dans la page d'administration des thèmes et validez-la pour rafraîchir le cache des thèmes, refaites-le à chaque fois que vous ajoutez un fichier *.tpl.php.

Il y a également différents modules qui sont conçus pour vous permettre un contrôle avancé d'une page sans avoir trop de travail de mise en page, comme Panels ou peut-être Node style.

Reportez-vous aux tutoriaux pour des conseils sur la façon de modifier le contenu de la page d'accueil.



Edit de kolossaldrupal : allez jeter un œil sur la traduction de l'article de Michael Anello Blueprint CSS pour apprendre à réaliser un gabarit de page Drupal en moins de deux :-). Les références à l'article original se trouvent sur la page.


Personnaliser la page « Résultat de recherche »

Date du document en anglais : 26 Août 2009 - 02h26 - http://drupal.org/node/175013  



Avez-vous besoin de modifier la présentation d'un résultat de recherche Drupal ? Vous devez impérativement le faire à la façon Drupal, et pour comprendre comment faire, il n'y a rien de mieux que de le faire (sauf que KolossalDrupal, traducteur, n'a pas poussé le dévouement jusqu'à installer un Drupal 5.x pour vérifier tout ça. NDT). L'exemple qui suit vous montrera non seulement l'aspect technique mais aussi la façon de penser pour y arriver. La même démarche pourra être appliquée quand vous aurez à modifier des composants de Drupal.

La première étape consiste à repérer ce qui pilote la recherche Drupal. Dans les dossier des modules vous trouverez le dossier search, ce qui laisse augurer que c'est dedans que se trouvent les scripts de recherche (quelle pertinence ! NDT). Ouvrez ce dossier pour voir ce qu'il contient et ce qu'il y a à personnaliser, tout en gardant à l'esprit que vous ne devez pas modifier quoi que ce soit aux fichiers du module de recherche eux-mêmes.

Dans le module search, vous trouverez les fichiers standards .info, .install, .module et un fichier .css. Dans ce cas précis vous regardez le module search lui-même. Ce que vous devez chercher c'est quelque chose que vous pourrez hameçonner (hook) ou styliser. Les fonctions que vous cherchez sont les fonctions de thème, dans le module search vous trouverez theme_search_form, theme_search_block_form, theme_search_item et theme_search_page. Vous pourrez personnaliser ces fonctions de façon à ne pas toucher au core Drupal. Génial !

Dans cet exemple vous allez modifier l'aspect et le comportement de la page de résultat de recherches (également nommé spr par les gourous SEO). Nous allons ôter la ligne de .info qui indique qui écrit le nœud, quand il a été écrit, commentaires, etc. A première vue, il semble correct que la fonction theme_search_page soit celle à personnaliser dans mon thème. Pour cette exemple nous utiliserons le thème Zen, qui doit être enregistré dans le dossier sites/all/themes/zen. Voici le code de theme-search_page, abondamment commenté, ce qui vous indiquera les paramètres et l'objet de cette fonction :

<?php
/**
* Formate la page résultat d'une requête de recherche.
*
* Les modules peuvent implémenter hook_search_page() pour surcharger cette fonction par défaut
* pour afficher les résultats de la recherche. Dans ce cas, il est attendu qu'ils fournissent leurs propres fonctions 
de personnalisation de thème.
*
* @param $results
*   Le résultat de la recherche retourné par hook_search().
* @param $type
*   Le type de donné trouvée, tel que "user" ou "node".
*
* @ingroup themeable
*/

function theme_search_page($results$type) {
  
$output '<dl class="search-results">';

foreach (
$results as $entry) {
    
$output .= theme('search_item'$entry$type);
  }
  
$output .= '</dl>';
  
$output .= theme('pager'NULL100);

return 
$output;
}
?> 

Après examen plus attentif, vous remarquerez que cette fonction appelle la fonction theme_search_items via theme('search_item', $entry, $type), ce qui indique que c'est cette fonction qui est à modifier. Cette fonction ressemble à ceci :

<?php
function theme_search_item($item$type) {
  
$output '<dt class="title"><a href="'check_url($item['link']) .'">'
    
check_plain($item['title']) .'</a></dt>';
  
$info = array();
  if (
$item['type']) {
    
$info[] = check_plain($item['type']);
  }
  if (
$item['user']) {
    
$info[] = $item['user'];
  }
  if (
$item['date']) {
    
$info[] = format_date($item['date'], 'small');
  }
  if (
is_array($item['extra'])) {
    
$info array_merge($info$item['extra']);
  }
  
$output .= ' <dd>'. ($item['snippet'] ? '<p>'$item['snippet'] .'</p>' '') .
    
'<p class="search-info">'implode(' - '$info) .'</p></dd>';
  return 
$output;

?>

Ce que vous devez faire c'est copier toutes les fonctions précédentes dans votre fichier template.php qui se trouve dans le dossier sites/all/themes/zen. C'est ce fichier template.php que vous devez utiliser pour manipuler, indirectement, le core Drupal. Pas seulement pour les recherches, mais aussi pour tous les modules du core. Modifiez le nom de la fonction theme_search_item($item, $type) en zen_search_item($item, $type). Après sauvegarde du fichier, Drupal n'appellera plus les fonctions du module de recherche mais celles nouvellement créées dans zen_search_item($item, $type). C'est tout simplement très chouette, et désormais, si vous effectuez une mise à jour du core Drupal, les modifications dans votre thème ne seront pas écrasées par la mise à jour du module search.

N'oubliez pas de changer le nom de votre fonction template.php pour éviter le message d'erreur : « Fatal error : Cannot redeclare theme_search_item() (previously declared in....)». Je dis ça en passant... Ça ne m'est pas arrivé ;-)

Maintenant voyons le truc vraiment sympa. Comme cette nouvelle fonction zen_search_item() se trouve dans votre thème, vous êtes libre d'en faire ce que vous voulez pour obtenir les résultats que vous voulez. Ainsi, les petits changements qui enlèveront les données citées précédemment peuvent être effectués en enlevant le code qui les contient.

Votre nouvelle fonction du fichier template.php devient :

<?php
function zen_search_item($item$type) {
  
$output ' <dt class="title"><a href="'check_url($item['link']) .'">'
    
check_plain($item['title']) .'</a></dt>';
  
$output .= ' <dd>'. ($item['snippet'] ? '<p>'$item['snippet'] .'</p>' '');
  return 
$output;

?>

Vous pouvez voir que vous avez enlevé pas mal d'infos, mais vous pouvez aussi faire l'inverse et ajouter du contenu, changer les éléments ou faire ce que vous voulez, sans toucher au core Drupal !

Personnaliser le style des listes UL

Date du document en anglais : 26 Août 2009 - 01h53 - http://drupal.org/node/263979  



Niveau de difficulté : intermédiaire à avancé.

Exemple 1 : les bases

Pour cet exemple, nous créerons une liste non-ordonnée (ul) qui montrera des puces à côté d'une liste li dans une zone précise, et qui les cachera dans le reste du site.

Vous pouvez choisir quelle liste vous voulez personnaliser dans votre site.

Remarque :

Ne faites tout ceci que dans un site de développement, et ayez toujours une sauvegarde des fichiers sur lesquels vous allez travailler.

Nous allons prendre un div et l'appeler « content ». Le nom de votre div peut être différent. Dans ce div, nous placerons la liste ul à personnaliser :

<div id="content">
        <ul class="unordered_list_in_content">
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
        </ul>
</div>

Dans votre feuille de style, vous indiquerez :

ul { /* Ceci désactivera tous les list-style-types dans votre thème */
        list-style-type:none
}
#content ul.unordered_list_in_content {
        list-style-type: disc
}

Vous devriez maintenant avoir une liste à puces dans la zone que vous avez choisi et pas dans le reste du site.

Exemple 2 : amusons-nous avec les styles de listes

Pour désactiver tous les styles des listes dans un thème, tapez :

ul {list-style:none}

au lieu de :

ul {list-style-type:none}

Vous pouvez faire quelque chose comme :

ul {list-style:disc inside}

au lieu de

ul {list-style-type:disc}

Aussi, votre feuille de style finale devrait ressembler à :

ul {
        list-style:none
}
#content ul.unordered_list_in_content {
        list-style: disc inside
}

Remarque : si vous avez plus d'une feuille de style dans votre thème, vous devrez vous assurer qu'il n'y a pas de styles de liste surchargeant vos CSS, autrement elle ne s'afficheront pas.

Positionner autour des floats avec class="clear-block"

Date du document original en anglais : 25 Août 2009 - 03h04 - http://drupal.org/node/380906  



De nombreuses mises en page HTML ont besoin d'une indication de positionnement des éléments flottants pour qu'ils n'interfèrent pas avec l'affichage des éléments environnants. Cela se fait en paramétrant la propriété clear de l'élément concerné, mais lorsque l'élément environnant est inconnu on utilise un élément DIV vide avec sa propriété clear paramétrée.

Il y a cependant une façon plus simple de procéder. Le système des feuilles de style Drupal dispose d'une classe très utile : clear-block. C'est une implémentation de la technique décrite dans Position is everything.

( voir aussi : Flux et position relative et Position float chez openweb.eu.org. C'est en bon français, ça ne fait pas de mal :-). NDT)

Pour utiliser la méthode de Position is everything, attribuez simplement la classe clear-block à l'élément qui contient les flottants.

Ainsi, si vous avez une galerie d'images flottantes sous forme de LI, attribuez une 'class="clear-block"' aux UL.

Le core Drupal regorge de nombreux exemples, comme les liens de nodes.

Prototypage XHTML/CSS avec Drupal

Date du document en anglais : 11 Mars 2009 - 06h41 - http://drupal.org/node/268911



Le prototypage XHTML/CSS constitue une approche professionnelle pour résoudre les questions concernant l'affichage des données côté client et leur séparation de la logique applicative. Cela peut notamment se faire en employant des fichiers statiques. Puisque la création de ces fichiers puis leur conversion en prototype dans un thème Drupal peut également se faire, il serait plus pertinent d'intégrer ces deux étapes l'une dans l'autre. Ce « Howto » expose quelques trucs et paramètres sur le prototypage XHTML/CSS avec Drupal.

En règle générale, pour effectuer un prototypage avec un thème CSS (comme ZEN-CSS), vous devez saisir le contenu XHTML sans filtrage. Avec le paramétrage standard des filtres, Drupal filtre les sorties en ajoutant des éléments XHTML et en supprimant d'autres. Comme ce comportement est indésirable dans le cas présent, Drupal doit être configuré pour permettre à l'utilisateur de saisir du XHTML qui ne sera pas filtré.

Ajouter le format d'entrée HTML TEL QUEL

Cet objectif peut être obtenu en ajoutant un nouveau format d'entrée, appelé AS-IS HTML qui ne filtrera plus les sorties :

  1. Connectez-vous en tant qu'administrateur
  2. Allez dans Administration » Configuration du site » Format d'entrées
  3. Cliquez sur Ajouter un format d'entrée.
  4. Vous êtes maintenant sur la page Ajouter un format d'entrée
  5. Indiquez AS-IS HTML dans le champ Nom
  6. Assurez-vous qu'il n'y ait aucune case cochée dans chacun des cadres Roles et Filtres.
  7. Validez le formulaire en cliquant sur le bouton Enregistrer la configuration.

Utiliser du XHTML non filtré dans les thèmes

Ce nouveau format d'entrée peut être désormais utilisé pour restituer le XHTML requis, afin qu'il puisse être utilisé dans la création d'un thème. Vous pourrez l'utiliser dans différents types de contenus et vous pourrez l'utiliser dans l'ajout de blocs. La seule chose que vous aurez besoin de faire sera de permettre l'usage de ce filtre à l'utilisateur en charge du thème.

Tout utilisateur autorisé à administrer les filtres peut utiliser tous les filtres sans restriction, à plus forte raison l'administrateur lui-même. Si vous créez un utilisateur uniquement pour le prototypage XHTML/CSS, vous devrez ajouter cette permission à son rôle.

Prototyper

Désormais, l'utilisateur en charge du prototypage peut créer des contenus et des blocs avec ce filtre et s'occuper de la réalisation du thème. Cela devrait accélérer cette réalisation tout en la dissociant du développement. Accessoirement, ce raccourci aidera les développeurs et les concepteurs de thème à comprendre les shortcommings (Lacunes ? Manques ? Omissions ?).

Styliser un bloc de connexion horizontal dans le pied de page

Date du document en anglais : 4 Avril 2009 - 10h49 - http://drupal.org/node/259609



Styliser le bloc de connexion utilisateur pour qu'il apparaisse sur une seule ligne est assez simple. Vous pouvez ainsi le placer dans votre pied de page, comme sur les sites pour lesquels les utilisateurs n'ont pas besoin de (ou ne peuvent pas) se connecter.

Voici les règles pour votre feuille de style :

/**
* bloc de connexion utilisateur dans le peid de page
*/

#block-user-0 {
  margin: 2em 0 1em;
}
#block-user-0 *
{
  display: inline;
  color: white; /* ici, indiquez la couleur du texte dans votre thème */
}
#edit-user-login-block {
  display:none; /* recacher les éléments cachés du formulaire */
}
#block-user-0 h2 {
  font-size: 92%; /* correspond à .content font size... modifiez-le avec les valeurs de votre thème */
}
#block-user-0 .form-item {
  margin-left: 1em;
}

Styliser un formulaire de saisie CCK

Date du document en anglais : 8 Septembre 2009 - 08h42 - http://drupal.org/node/101092  



La raison qui m'a amené à écrire ce tuto sur la personnalisation des formulaires est que j'ai travaillé avec des contenus créés avec CCK et que j'ai essayé de comprendre comment changer l'ordre des champs du formulaire. Ce que j'ai trouvé dans les forums était très technique (pointeurs vers l'API pour parler comme des développeurs) ou incomplet, ou même ne concernait pas les formulaires de saisie. Il y avait plus de tuyaux pour les personnes cherchant à modifier ou à personnaliser les affichages, mais rien de clair et précis en ce qui concernait la stylisation des formulaires de saisie.

Aussi, en tant que non-programmeur, à moitié technicien et plutôt orienté marketing et buziness, je me suis mis en chemin pour découvrir comment styliser mes formulaires de saisie. (A tous les développeurs et autres personnes mieux informées que moi, n'hésitez pas à me corriger si je me trompe !).

(NDT : c'est pas KolossalDrupal qui parle, c'est l'auteur de l'article de Drupal.org. Veuillez aiguiller correctement les jets de tomates en représailles aux lourdeurs de style et à la fausse modestie).

Il y a au moins deux façons de styliser les formulaires de saisie :

  1. En utilisant l'API Form (en créant un nouveau fichier .module écrit en PHP et en utilisant des choses comme hook_form_alter)
  2. En créant des fichiers tpl.php.

J'ai trouvé que la deuxième façon était la plus facile (Feignasse ! NDT). Il y aura quand même un peu plus à faire que de créer un fichier tpl.php personnalisé. Il faudra modifier le fichier template.php, ce qui implique quelques connaissances en PHP, et travailler avec les feuilles de style (soit en modifier une existante, soit en créer une qui sera liée à votre thème).

Tout d'abord, il y a un couple de personnes qui sont responsables de la majeure partie du tuto et méritent d'en être crédités :

  • Lyal (http://www.harostreetmedia.com), merci de m'avoir e-mailé le bout de code au milieu de la nuit.
  • Dublin Drupaller (http://www.dublindrupaller.com), merci pour le profond savoir que vous partagez dans les forums, où j'ai pu glaner de nombreuses informations.
  • Jghyde, qui en a aidé d'autres partageant les même recherches.
  • Nick Lewis (http://www.nicklewis.org) dont le site web regorge d'informations utiles et intéressantes sur Drupal.
(Vous en avez compté quatre ? Moi aussi. Ça donne une idée de ce qu'est un couple chez les anglo-saxons. NDT [1] ).

Et maintenant, que la fête commence !

Comment styliser un formulaire de saisie CCK ?

Pré-requis :

  • Vous comprenez un peu le CSS (comment ça marche, comment utiliser les class et id dans le balisage HTML pour styliser les sorties)
  • Vous comprenez un peu le PHP (pas à fond, juste pour comprendre ce que fait un code PHP, pour pouvoir le copier ou le modifier un peu)
  • Vous avez installé le module CCK et vous savez comment créer des contenus avec (bien que je me réfère aux formulaires de saisie CCK dans ce didacticiel, je suis presque sûr que c'est la même démarche pour n'importe quel type de node).

Les étapes

  • Étape 1 : créer un type de contenu avec CCK
  • Étape 2 : créer le fichier [moncontenu].tpl.php
  • Étape 3 : modifier template.php
  • Étape 4 : modifier style.css

Avec cette méthode vous devriez pouvoir modifier le formulaire de saisie. Dans cet exemple, je vais faire ce qui suit : ne pas montrer certains des champs « location » qui sont automatiquement générés (j'ai le module « Location » installé et activé pour mes contenus CCK), puis créer mes propres groupes « pliables » et mettre les éléments que je veux dans ces groupes, et placer mes champs de saisie côte à côte au lieu de les placer un par ligne.

Même avec la méthode que j'utilise, il y a différentes façons d'accomplir le même travail; par exemple, j'utilise tpl.php pour ordonner les champs et .css pour les styliser. Je pense que je pourrais n'utiliser que le CSS pour faire le tout (mais je ne suis pas un gourou du CSS) et n'utiliser le fichier tpl.php pour attribuer les nouveaux <div>

Étape 1 : créer le type de contenu avec CCK

Créez un type de contenu CCK appelé « event_listing » et ajoutez-lui quelques champs. J'ai ajouté des infos contact, localisation, des champs d'information d'événement, etc.

Créez au moins un node (créez une liste d'événements avec votre nouveau type de contenu)

uneimage

Étape 2 : créer le fichier [moncontenu].tpl.php

Maintenant créez un fichier texte appelé event_listing_edit.tpl.php et mettez-le dans le dossier de votre thème (qui se trouve dans le dossier /theme/). On pourrait l'appeler n'importe comment, mais ce sera plus clair et simple à gérer si vous l'appelez ainsi.

Maintenant, ajoutez le code PHP suivant dans le fichier tpl.php. C'est un petit texte pour vérifier que votre prochaine étape (modifier template.php) marche :

<?php
    
print("Youpi ! Ça marche !");
?>

Étape 3 : modifier template.php

Maintenant le plus dur : vous devez ouvrir et modifier le fichier template.php qui se trouve dans le dossier de votre thème.

Vous devrez lui ajouter deux fonctions distinctes, une pour appeler votre fichier event_listing_edit.tpl.php personnalisé lorsque le formulaire sera édité et une autre pour l'appeler lorsqu'un NOUVEAU node sera sur le point d'être créé (vous n'aurez besoin que d'un seul fichier tpl.php, mais comme les modifications du fichier template.php surchargent les fonctionnalités par défaut, il est nécessaire d'indiquer à Drupal d'utiliser le fichier personnalisé pour chaque cas).

À la fin du fichier template.php, ajoutez le code suivant, ce sont deux fonctions différentes :

<?php
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
    function 
phptemplate_node_form($form) {
        return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
    }
}
// Add Form End

// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
    
$node node_load(array('nid' => arg(1)));
    function 
phptemplate_node_form($form) {
        return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
    }
}
// Edit Form End
?>

Vous pouvez voir dans le code les personnes qui l'ont écrit (bien que j'ai légèrement modifié le code original). Merci à jghyde et Dublin Drupaller (http://drupal.org/node/85908)

(NDT : je suis étonné qu'il n'ait pas encore remercié sa femme. Mais l'auteur est peut-être un geek : « c'est quoi une femme ? »)

Maintenant, essayer de modifier votre nœud event_listing, vous devriez voir le texte « Youpi ! Ça marche ! », comme sur la copie d'écran. Dans le cas contraire, il y a deux suspects à chercher : vérifiez la convention de nommage dans le fichier template.php, j'ai parfois mal référencé mon fichier tpl.php.

101092_2

Dans l'étape suivante vous allez ajouter tous les champs dont vous avez besoin dans le formulaire de saisie. Vous pouvez trouver les champs disponibles pour votre formulaire en mettant le code suivant dans votre fichier tpl.php personnalisé (astuce de goose2000 pour afficher les données joliment)

<?php
    
print("yahoo, it works!<br>");
    print(
"<pre>");
    
print_r(array_values($form));
    print(
"</pre>");
?>

Vous allez voir une longue liste de données décrivant les champs disponibles pour votre formulaire de saisie, la section qui vous intéresse ressemble à ceci (il y a une section similaire pour chaque champ et chaque objet du formulaire) :

<?php[field_website] => Array
(
    [
0] => Array
    (
        [
value] => Array
        (
            [
link] => janze.com
            
[title] => Janze.com
            
[attributes] =>
        )
    )
)
?>

Dans cet exemple, si je veux faire référence à l'URL du site, je le ferai comme ceci :

<?php
['field_website']['0']['value']['link']
?>

Aussi, si je veux ajouter l'URL du site à mon formulaire de saisie, j'ajouterai cette ligne à mon fichier tpl.php :

<div id="jpj8"><?php print form_render($form['field_website']['0']['value']['link']); ?></div>

(j'ai entouré la ligne dans un 'div id=' balise pour pouvoir la styliser en CSS)

Maintenant, je modifie mon nœud event_listing, j'obtiendrai quelque chose comme ceci :

101092_3

N'oubliez pas d'effacer la ligne « Youpi ! Ça marche ! ».

Maintenant, avançons et ajoutons le reste des champs souhaités au formulaire.

Si vous voulez faire un groupe de champs qui se déplient/replient, tout ce que vous avez à faire et entourer ces champs avec <fieldset class="collapsible"></fieldset> et si vous voulez que le groupe porte un nom ajoutez juste <legend>Contact Info</legend> après le fieldset d'ouverture. Comme dans cet exemple :

<div class="jpj8aa">
<fieldset class=" collapsible">
    <legend>Contact Info</legend>
    <div id="jpj8"><?php print form_render($form['field_name']); ?></div>
    <div id="jpj8a"><?php print form_render($form['field_email']); ?></div>
    <div id="jpj8b"><?php print form_render($form['field_phone_0']); ?></div>
    <div id="jpj8c"><?php print form_render($form['field_website']['0']['value']['link']); ?></div>
    <div id="jpj8e"><?php print form_render($form['field_description']); ?></div>
</fieldset>
</div>

Ce qui donnera ceci :

101092_4

Interestings bits

C'est un peu bizarre/curieux/étrange/fantasque/singulier/surprenant mais à la fin de votre fichier tpl.php mettez cette ligne

<?php
print form_render($form);
?>

qui affichera tous les objets du formulaire restants (champs et boutons) qui n'auront pas été préalablement référencés. Cela veut dire que tous les champs qui n'étaient pas explicitement ajoutés par le code précédent seront maintenant affichés. Mais si vous êtes comme moi, la raison pour laquelle vous ne les avez pas explicitement ajoutés c'est que vous n'en vouliez pas !

Aussi, pour se débarrasser de ces champs indésirables, j'ai trouvé deux méthodes, une qui marche pour moi (et dont je suis sûr qu'elle est mauvaise car elle n'est pas très élégante) (NDT : Ah l'élégance en programmation...) et une autre qui est très élégante, mais qui ne marche pas avec moi. J'aimerais bien utiliser la voie élégante en premier... qui est de surcharger explicitement les champs indésirables dans votre fichier template.php. Par exemple, si je ne veux pas afficher le site, je mets ceci :

<?php
$form
['field_website'] = '';
?>

dans le fichier template.php., à l'intérieur de votre fonction surchargée (avant le callback). La lecture de cette ligne de code nous montre que nous identifions le champ du formulaire et initialisons sa valeur à rien. Voici à quoi ressemblerait la fonction :

<?php
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
function 
phptemplate_node_form($form) {
    
$form['field_website'] = '';
    return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
}
}
// Add Form End

// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
$node node_load(array('nid' => arg(1)));
if (
$node->type == 'content_event_listing'){
    function 
phptemplate_node_form($form) {
      
$form['field_website'] = '';
     return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
    }
  }
}
// Edit Form End
?>

Notez que je dois mettre le bout de code à la fois dans les sections « Add form » et « Edit form » nouvellement ajoutées.

L'inélégante façon de faire est d'ajouter les champs indésirables à votre fichier tpl.php, tout comme ceux qui sont souhaités, et d'ajouter un CSS display:none pour les styliser.

Étape 4 : modifier style.css

Bien ! Vous avez maintenant un formulaire avec tous les champs souhaités, aucun de eux indésirables et vous en avez peut-être même groupés quelques-uns dans un groupe repliable/dépliable. Et qu'est-ce qu'on fait maintenant ?

Vous pouvez maintenant styliser chacun de ces éléments avec des CSS. Je ne suis pas un gourou du CSS, alors ici je ne ferais que des choses simples :

  1. je montrerai un exemple de CSS pour cacher un champ
  2. je mettrais aussi deux champs côte à côte.

Pour cacher un champ avec les CSS, identifiez le div avec l'ID du champ que vous voulez cacher puis créez un style dans votre style.css pour ce div (ou dans votre feuille de style personnalisée. Je pense qu'il est recommandé d'utiliser sa propre feuille de style pour toute modification qui doit persister après une mise à jour).

Voici un exemple :

#jpj10 {
        display: none;
}

Pour mettre des champs côte à côte avec des CSS, vous devez les entourer avec des balises <span> au lieu de balises <div>, comme ceci :

<span id="jpj8b">
        <?php print form_render($form['field_phone']); ?>
</span>
<span id="jpj8c">
        <?php print form_render($form['field_website']['0']['value']['link']); ?>
</span>

Puis créez les styles flottants comme ceci :

#jpj8b, #jpj8c {
  float: left;
}
101092_5

Maintenant mes champs s'afficheront côte à côte. Je vous laisse améliorer la présentation, c'était juste la tambouille pour que ça marche !

Informations supplémentaires

FYI, pour ceux qui jouent avec Drupal 5.x, remplacez form_render() avec drupal_render() - merci à ericelbow.

Si vous souhaitez cacher les infos de révisions, quelques solutions peuvent être trouvées à http://drupal.org/node/117148.

(Il n'a pas remercié sa femme. C'est un geek ! NDT)


1.  Évidemment, «couple», dans ce contexte, ne signifie pas couple mais quelques. Mais bon, comment j'aurais fait une vanne sinon ? :-)  retour


2. Merci à vous, lecteurs, d'avoir supporté ces mauvaises blagues.

Styliser un formulaire de saisie CCK pour CCK2

Référence en anglais sur drupal.org : 12 octobre 2009
http://drupal.org/node/601646


J'ai passé plusieurs jours à chercher comment styliser un formulaire de saisie avec CCK2 dans Drupal 6, j'espère que ce qui suit vous aidera et vous fera gagner du temps.

(c'est l'auteur de l'article qui parle, pas le traducteur)

Pour styliser un formulaire CCK2, vous avez simplement besoin de :

  1. Modifier le fichier template.php
  2. créer un fichier node-type_de_contenu-edit.tpl.php
  3. Supprimez les données du cache avant d'afficher le résultat : Administrer » Configuration du Site » Performance » Supprimer les données du cache.

Exemple

Supposons que vous ayez un type de contenu nommé account_registration et que votre thème est bluemarine.

  1. Modifiez le fichier template.php. Ajoutez ce qui suit :

    function bluemarine_theme($existing, $type, $theme, $path) {
      return array(
        'account_registration_node_form' => array(
            'arguments' => array('form' => NULL),
            'template' => 'node-account_registration-edit',
        ),
      );
    }
  2. Créez un fichier nommé node-account_registration-edit.tpl.php:

    //Pour supprimer le champ Titre
    <?php unset($form['title']); ?>

    <fieldset class=" collapsible">
        <legend>Company Data</legend>
        <?php
         
    //REMARQUE: si vous n'avez pas de Groupe de champs, indiquez simplement :
          // print drupal_render($form['field_accreg_company_name']['0']['value']);
         
    print drupal_render($form['group_company']['field_company']['0']['value']);
          print
    drupal_render($form['group_company']['field_street']['0']['value']);
       
    ?>

    </fieldset>  
    <?php print drupal_render($form);  ?>
    <?php
    // print_r($form);   //Activez ceci pour afficher toutes les variables Array du formulaire
    ?>

Comment...

  1. Restituer / rendre un seul champ :

    <?php
     
    print drupal_render($form['group_company']['field_street']['0']['value']); 
    ?>
  2. Restituer un groupe de champs:

    Vous n'avez pas besoin de restituer les champs un par un, mais simplement de saisir ce code pour restituer tous les champs dans un groupe :

    print drupal_render($form['group_company']);
  3. Restituer une liste de sélection :

    Presque la même opération que pour un TEXTFIELD, mais en omettant ['0']['value'] à la fin

    <?php
     
    print drupal_render($form['group_company']['field_region']); 
    ?>
  4. Supprimer un champ de saisie

    Vous voudrez peut-être désactiver un formulaire, habituellement on a besoin de supprimer le Titre comme ceci :

    <?php
     
    unset($form['title']);
    ?>
  5. Cacher un champ de saisie (différent de supprimer ! ):

    Vous voudrez peut-être activer un formulaire mais aurez besoin de l'en empêcher :

    <?php
     $form
    ['title']['#access'] = FALSE
    ?>
  6. Afficher toutes les variables d'un formulaire :

    Vous voudrez peut-être connaître quelles sont les variables disponibles :

    <?php
    print_r
    ($form);
    ?>
  7. Afficher les boutons:

    <?php
    print drupal_render($form['buttons']);
    ?>
  8. Réorganiser l'affichage

    Utilisez ['#weight'] pour modifier l'ordre d'affichage :

    $form['buttons']['#weight'] = -50; // boutons en début
  9. Renommer les boutons

    Pourquoi "Submit" ? Vous voudrez peut-être indiquer « Sauvegarder maintenant !», non ?

    $form['buttons']['submit']['#value'] = 'Sauvegarder dans la base de données';

Styliser des champs CCK dans un type contenu

Référence en anglais sur drupal.org : http://drupal.org/node/807330
8 Juin 2010 - 06h56


Fichiers gabarits (Template files)

Tous les thèmes disposent d'un fichier node.tpl.php qui est le fichier gabarit standard (ou fichier maquette de mise en page) . Si le votre ne l'a pas, vous pouvez le copier depuis le module node qui se trouve dans le dossier modules/node de votre installation Drupal. Le noyau Drupal vous permet l'utilisation du variant suivant pour chaque type de contenu que vous avez créé dans votre site :

node-<NOM_DU_TYPE_DE_CONTENU>.tpl.php

Par exemple : node-chronique.tpl.php sera utilisé pour styliser un node de type chronique.

Important : lorsque vous ajoutez un nouveau modèle de mise en page, vous devez reconstruire le registre de thème, sinon le nouveau modèle ne sera pas détecté par le moteur de thème. Pour reconstruire ce registre :

  • rendez-vous dans les pages d'administration des modules (/admin/build/modules)
  • ou utilisez le lien « clear cache » du module Devel.

Variables gabarits

CCK met les variables suivantes à disposition à votre disposition pour leur utilisation dans les mises en pages :

$<NOM_DU_CHAMP>_rendered

Contient le rendu HTML du champ, y compris le libellé et toutes les valeurs du champ, selon le paramétrage défini dans l'onglet Afficher les champs.

$<NOM_DU_GROUPE>_rendered

Contient le rendu HTML du groupe de champs (s'il existe), y compris le libellé et tous les groupes de champs, selon le paramétrage défini dans l'onglet Afficher les champs.

Cette variable contient également le code HTML contenu dans toutes les variables $_rendered du groupe de champs.

$NOM_DU_CHAMP

Contient les valeurs brutes des champs, dans le format tableau habituellement utilisé en interne par CCK. Ce que vous trouverez là dépendra du type du champ.

Chaque valeur contient également un élément « view », qui renferme la valeur mise en forme et prête à afficher. Par exemple :

array(
  0 => array(
  'nid' => 5,
  'view' => '&lt;a href="node/5"&gt;Titre du node 5&lt;/a&gt;',
  ),
);

Les données brutes (raw) ne sont pas assainies pour l'affichage, il est donc déconseillé de les utiliser telles quelles. Utilisez la valeur « view » ou passez-la via la fonction content_format().

Exclure des champs de la variable $content

Par défaut, la variable $content des gabarits de node contient le rendu HTML de tout le node : les champs et groupes de champs CCK, mais aussi le corps, les fichiers joints, les widgets...

Si vous voulez utiliser les variables plus précises décrites ci-dessus, vous pouvez utiliser les cases à cocher Exclure de l'écran Afficher les champs afin que l'affichage des champs soient omis dans la variable $content.

Notez qu'il y a des cases à cocher Exclure pour le teaser comme pour le node complet. Si l'affichage de votre écran est limité, il se peut que vous ne puissiez voir la colonne Exclure qui se trouve complètement à droite de la page.

En utilisant les variables $_rendered et $_rendered vous pouvez personnaliser l'affichage et la mise en page de ces quelques champs ou groupe de champs CCK et laissez la variable $content s'occuper de l'affichage du reste du contenu, sans valeurs dupliquées.

Astuce avancée

Les cases à cocher Exclure affectent tous les thèmes actifs. Toutefois, sur les sites ayant plusieurs thèmes, la liste des champs à exclure de $content peut être différente selon les thèmes, en fonction de la structure des gabarits de nodes.

Un thème peut outrepasser ces paramètres en surchargeant la fonction theme_content_exclude() pour spécifier la liste des champs à exclure pour ce thème (voir le PHPDoc de la fonction pour plus d'infos).

Cas particuliers : les nodes dans les champs nodereference

En plus de ce qui précède, les suggestions suivantes seront prioritairement recherchées pour les nodes affichés en tant que valeurs de champs nodereference utilisant les formateurs « teaser » ou « full node » :

node-nodereference-<REFERRING_FIELD_NAME>-<TYPE_NAME>.tpl.php
exemple : fichier gabarit "suggestion" node-nodereference-field_noderef-chronique.tpl.php - S'il est présent, il sera utilisé pour la mise en forme d'un node de type « chronique » lorsqu'il est référencé dans le champ « field_noderef ».
node-nodereference-<TYPE_NAME>.tpl.php
exemple : fichier gabarit "suggestion" node-nodereference-chronique.tpl.php - S'il est présent, il sera utilisé pour la mise en forme d'un node de type « chronique » lorsqu'il est référencé dans n'importe quel champ de type nodereference.
node-nodereference-<REFERRING_FIELD_NAME>.tpl.php
exemple : fichier gabarit "suggestion" node-nodereference-field_noderef.tpl.php - S'il est présent, il sera utilisé pour la mise en forme d'un node référencé dans le champ « field_noderef ».
node-nodereference.tpl.php
S'il est présent, il sera utilisé pour la mise en forme de nodes référencés dans un champ de type nodereference.

Les variables supplémentaires suivantes sont disponibles dans les gabarits pour les nodes référencés :

$referring_field
Le champ de type nodereference qui référence le node en cours.
$referring_node
Le node qui référence le node en cours.

Surcharger les gabarits de thème dans Drupal 6

Date du document en anglais : 3 Février 2009 - 21h36 - http://drupal.org/node/337022 Drupal 6.x



Ajouter des fonctions de pré-traitement supplémentaires à l'intérieur de fonctions de pré-traitement existantes.

Vous pourriez avoir besoin d'ajouter des fonctions de pré-traitement supplémentaires à l'intérieur de vos fonctions de pré-traitement de thèmes ou de vos fonctions preprocess_hook pour créer différentes variables dans différents contextes. Par exemple, si vous voulez un gabarit de type node (node-story.tpl.php) vous pourriez créer une fonction appelée MONTHEME_preprocess_node_story(), dans laquelle vous initialiseriez des variables propres au contenu story. Le nom de la fonction n'est pas appelée par les API de thème, vous pouvez ainsi l'appeler quand vous le souhaitez, mais cela vous permettra de paramétrer vote propre API pour appeler tout gabarit de type node avec quelques lignes de code seulement.


<?php
function MYTHEME_preprocess_node(&$vars$hook) {
 
// les variables disponibles pour chaque node sont déclarées ici

// Ici, la déclaration des variables spécifiques à un type de node se fait 
// en appelant leurs propres fonctions de pré-traitement 
// (si elles existent)
$function 'MYTHEME_preprocess_node'.'_'.$vars['node']->type;
if (
function_exists($function)) {
$function(&$vars);
 }
}
?>