Comment créer et appliquer des styles d’images avec Drupal 7 via le code

Comment créer et appliquer des styles d’images avec Drupal 7 via le code

14 Nov 2011 |  Drupal

Cet article fait suite au précédent post : “Comment créer et appliquer des styles d’images avec Drupal 7 via l’UI” ou je vous détaillais comment, via l’interface d’administration, créer un style d’image. Aujourd’hui le sujet reste le même, mais la création sera faite par la programmation.

Si comme moi, vous êtes confrontés à maintenir à jour des sites Drupal, vous avez déjà dû vous poser tout un tas de questions sur la pérennisation des configurations et de ce fait, vous vous êtes résignés à faire vos modifications directement depuis l’interface d’administration. Du coup, pour chaque chose simple qu’il est possible de faire via le back-office de Drupal, il faut trouver comment le faire en code.

Ainsi, sur la même base que l’article précédent, voici comment créer et appliquer un style d’image par la programmation.

Créer un style d’image via le code

La solution la plus simple consiste à implémenter le hook_image_default_styles() fourni par le module image, qui permet de définir un ou plusieurs style(s) d’images à Drupal dans votre fichier .module.

function sandbox_image_default_styles() {
  // La variable $style est un tableau et chaque composant sera un nouveau style.
  $styles = array();
  // La clé du tableau sera le nom machine de votre style. Pour qu’il  n’y ait pas de soucis contentez-vous de caractères alphanumériques,  d’underscores et de tirets.
  $styles['image_style_example'] = array();
  // Pour chaque style pour pouvez ajouter plusieurs effets
  $styles['image_style_example']['effects'] = array(
  // Premier effet à appliquer à l’image
    array(
      'name' => 'image_rotate',
      'data' => array(
        'degrees' => 2,
        'random' => 0,
        'bgcolor' => '#CECECE',
      ),
      'weight' => 0,
    ),
    // Deuxième effet
    array(
      'name' => 'image_scale',
      'data' => array(
        'width' => 200,
        'height' => 200,
        'upscale' => 1,
      ),
      'weight' => 1,
    ),
  );
  return $styles;
}

On ne peut plus simple non ? Vous trouverez toutes les informations concernant les effets de base disponibles dans le fichier image.effects.inc du module image.

Voici d’autres fonctions utiles si vous souhaitez intervenir sur les différents styles d’images :

Si toutefois vous n’avez pas trouvé votre bonheur dans ces fonctions, voici toutes les fonctions et méthodes implémentées par le module images

Appliquer un style d’image

Pour appliquez un style d’image à une image il suffit simplement d’utiliser la fonction de thème : theme_image_style($variables). $variables est un tableau composé de différents éléments : - style_name: le nom du style que vous voulez appliquer - path: Le chemin de l’image relatif au système de fichier de Drupal. (ex : public://mon-image.jpg) - alt: un text alternatif au cas où l’image ne pourrait pas être affichée. - title= Le titre de votre image. Celui-ci sera affiché lorsque l’image sera survolée - attributes: un tableau associatif bien connu des fonctions de thème permettant de passer des attributs à la baslise img, tel que des class css…

Notez que votre image doit se trouver sur votre site, car cela ne fonctionne pas avec une image externe.

// Récupération de l’adresse de l’image.  
$path = "images/funny_cat.jpg"; // Qui à pour adresse sites/default/files/images/funny_cat.jpg
// Transformation de celle-ci.
$uri = (file_build_uri($path));
// Génération de notre image.
$image = theme('image_style', array( 'path' =>  $uri, 'style_name' => 'image_style_example'));

Et voila vous venez de créer et appliquer un style via la programmation !

Crédits Photo

Julien Dubreuil

Vous avez une idée, un projet web à réaliser ?

Ensemble, mettons en oeuvre sa réussite. Je vous accompagne dans vos projets, depuis l'élaboration du cahier des charges jusqu'à la mise en production. Pour plus d'information n'hésitez pas à me contacter.

Contactez-moi