styles

Views styles settings

Bonjour,
J'ai installe le module slideshow views:
Avec fields, jai remarque que l'on peut ajouter des class CSS :
Le menu est Style settings.

J'ai beau utiliser firebug, je ne retrouve pas le cemin ou le fichier dans lequel le css est ecrit.

Dans quel fichier de views puis je modifier le css d'une nouvelle classe creer ?

MErci

Par juliendubreuil
julien dubreuil
Drupal since 2009

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

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 :

- image_styles : pour récupérer tous les styles d’images.
- image_style_load : pour charger et obtenir les informations d’un style.
- image_style_save : pour sauvegarder un style (après une mise à jour par exemple).
- image_style_delete : pour supprimer un style

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

Cet article Comment créer et appliquer des styles d’images avec Drupal 7 via le code est apparu en premier sur Julien Dubreuil.

Par juliendubreuil
julien dubreuil
Drupal since 2009

Comment créer et appliquer des styles d’images avec Drupal 7 via l’UI

Depuis Drupal 7 la gestion des images et des styles d’images est native, ainsi donc plus besoin d’installer le module imagecache pour retailler, pivoter ou encore redimensionner vos photos.
Une fois créée, vous pourrez appliquer vos styles sur n’importe quelle photo, qu’elle soit affichée dans le contenu d’un node ou encore dans le rendue d’une vue. La manip’ est vraiment simple et permet de décliner une photo en une quantité indéfinie de possibilité.

Voici donc un petit guide pour vous montrer comment ajouter de nouveaux styles d’images via l’interface de Drupal et comment vous en servir.

Créer un style d’image via l’interface d’administration

Première étape, rendez-vous sur la page d’administration des styles d’images Administration » Configuration » Media et cliquez sur Image styles. Cliquez sur le lien au dessus des trois styles d’images par défaut nommé Add style, et insérez un titre à votre style d’image. Petit conseil, soyez explicite sur les noms, car plus vous en aurez, plus cela deviendra difficile de vous y retrouver.


Deuxième étape
, l’ajout d’effets aux images et pour cela vous avez à votre disposition 6 choix :
- Crop : découpe l’image selon une certaine dimension.
- Desaturate : désature l’image.
- Resize : retaille l’image.
- Rotate : retourner l’image en fonction d’un angle.
- Scale : retaille l’image en gardant les proportions.
- Scale and crop : retaille et découpe l’image.

Choisissez l’effet désiré, entrez les dimensions voulus et sauvegardez.

Troisième étape, la visualisation des résultats. Une fois votre effet validé, vous vous retrouvez sur la page de votre nouveau style d’image. En haut de celle-ci se trouve deux images afin de voir le résultat de votre effet. A gauche l’image original et à droite l’image transformée.

Derniere étape, cliquez sur Update style pour valider les modifications effectuées et pour sauvegarder votre nouveau style que vous retrouvez pour mettre en forme chaque champ image

Appliquer un style d’image

Dans le cas d’un contenu, rendez-vous la page de gestion de l’affichage des champs : Administration » Structure » Content types et cliquez sur Manage display, pour le type de contenu de votre choix. Cliquez ensuite sur la petite icône en forme d’engrenage qui devrait se trouver à droite sur la ligne de votre champ image.

Sélectionnez le style de votre choix, cliquez sur le bouton update et votre style sera maintenant appliqué à ce champ. Pour visualiser les résultat rendez-vous sur la page de votre contenu et voila.

Cet article Comment créer et appliquer des styles d’images avec Drupal 7 via l’UI est apparu en premier sur Julien Dubreuil.

[Résolu] Où mettre les définition des classe pour les DIV

Bonjour,

je suis assez nouveau avec Drupal. j'essaye de monter un site web et d'utiliser dans mes articles une classe DIV qui placerait mon image alignée à gauche.

j'ai pu créer le fichier CSS à partir de dreamweaver mais je n'arrive pas à trouver où placer cette définition de classe pour pouvoir l'appeler dans mes articles.

est ce que quelqu'un pourrait me renseigner la-dessus ?

Merci beaucoup d'avance.

[Résolu] Blocs : différents styles de bloc au sein d'un même site

Bonjour,

je souhaites afficher des blocs sous différents style CSS (différentes couleurs selon le bloc). Comment peut-on spécifier, dans l'admin de Drupal 7.0, que nous souhaitons appliquer un style spécifique à un bloc spécifique ?
Si je dois ajouter un ou des modules pour cela, lesquels ?

Merci d'avance de toute aide