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 à :
-
template.php : surcharge des fonctions de thème :
http://drupal.org/node/11811 -
Ajout d'appel à _phptemplate_variables :
http://drupal.org/node/207841 -
Fusionner plusieurs fonctions _phptemplate_variables :
http://drupal.org/node/152426
É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_decode( strtolower(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_decode( strtolower(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;
}
}
?>- Version imprimable
- 3373 lectures
-
Commentaires
Poster un nouveau commentaire