Planète

Par fgm@drupal.org
Adhérent
Frédéric G. Marand

Drupal et le NoSQL - Drupal 8 WSCCI - DrupalCamp Toulouse

Si vous avez manqué la présentation sur les outils NoSQL dans Drupal à l'occasion de Drupagora et si vous trouvez que les slides sans les commentaires sont un peu arides, n'hésitez pas à faire le déplacement jusqu'à Toulouse pour DrupalCamp Toulouse ce weekend, où elle sera proposée une deuxième fois.

Inscrivez-vous sur http://toulouse2011.drupalcamp.fr/ et rejoignez-nous pour les talks du samedi et/ou les ateliers du dimanche: s'il y a suffisamment d'intéressés, nous tenterons de démarrer des participations sur l'initiative WSCCI de Drupal 8.

en lire plus

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 le code

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.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span class='line'><span class="k">function</span> <span class="nf">sandbox_image_default_styles</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// La variable $style est un tableau et chaque composant sera un nouveau style.</span>
</span><span class='line'>  <span class="nv">$styles</span> <span class="o">=</span> <span class="k">array</span><span class="p">();</span>
</span><span class='line'>  <span class="c1">// 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.</span>
</span><span class='line'>  <span class="nv">$styles</span><span class="p">[</span><span class="s1">&#39;image_style_example&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">();</span>
</span><span class='line'>  <span class="c1">// Pour chaque style pour pouvez ajouter plusieurs effets</span>
</span><span class='line'>  <span class="nv">$styles</span><span class="p">[</span><span class="s1">&#39;image_style_example&#39;</span><span class="p">][</span><span class="s1">&#39;effects&#39;</span><span class="p">]</span> <span class="o">=</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>  <span class="c1">// Premier effet à appliquer à l’image</span>
</span><span class='line'>    <span class="k">array</span><span class="p">(</span>
</span><span class='line'>      <span class="s1">&#39;name&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;image_rotate&#39;</span><span class="p">,</span>
</span><span class='line'>      <span class="s1">&#39;data&#39;</span> <span class="o">=&gt;</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>        <span class="s1">&#39;degrees&#39;</span> <span class="o">=&gt;</span> <span class="mi">2</span><span class="p">,</span>
</span><span class='line'>        <span class="s1">&#39;random&#39;</span> <span class="o">=&gt;</span> <span class="mi">0</span><span class="p">,</span>
</span><span class='line'>        <span class="s1">&#39;bgcolor&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;#CECECE&#39;</span><span class="p">,</span>
</span><span class='line'>      <span class="p">),</span>
</span><span class='line'>      <span class="s1">&#39;weight&#39;</span> <span class="o">=&gt;</span> <span class="mi">0</span><span class="p">,</span>
</span><span class='line'>    <span class="p">),</span>
</span><span class='line'>    <span class="c1">// Deuxième effet</span>
</span><span class='line'>    <span class="k">array</span><span class="p">(</span>
</span><span class='line'>      <span class="s1">&#39;name&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;image_scale&#39;</span><span class="p">,</span>
</span><span class='line'>      <span class="s1">&#39;data&#39;</span> <span class="o">=&gt;</span> <span class="k">array</span><span class="p">(</span>
</span><span class='line'>        <span class="s1">&#39;width&#39;</span> <span class="o">=&gt;</span> <span class="mi">200</span><span class="p">,</span>
</span><span class='line'>        <span class="s1">&#39;height&#39;</span> <span class="o">=&gt;</span> <span class="mi">200</span><span class="p">,</span>
</span><span class='line'>        <span class="s1">&#39;upscale&#39;</span> <span class="o">=&gt;</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'>      <span class="p">),</span>
</span><span class='line'>      <span class="s1">&#39;weight&#39;</span> <span class="o">=&gt;</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'>    <span class="p">),</span>
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'>  <span class="k">return</span> <span class="nv">$styles</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span>

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.


1
2
3
4
5
6
<span class='line'><span class="c1">// Récupération de l’adresse de l’image.  </span>
</span><span class='line'><span class="nv">$path</span> <span class="o">=</span> <span class="s2">&quot;images/funny_cat.jpg&quot;</span><span class="p">;</span> <span class="c1">// Qui à pour adresse sites/default/files/images/funny_cat.jpg</span>
</span><span class='line'><span class="c1">// Transformation de celle-ci.</span>
</span><span class='line'><span class="nv">$uri</span> <span class="o">=</span> <span class="p">(</span><span class="nx">file_build_uri</span><span class="p">(</span><span class="nv">$path</span><span class="p">));</span>
</span><span class='line'><span class="c1">// Génération de notre image.</span>
</span><span class='line'><span class="nv">$image</span> <span class="o">=</span> <span class="nx">theme</span><span class="p">(</span><span class="s1">&#39;image_style&#39;</span><span class="p">,</span> <span class="k">array</span><span class="p">(</span> <span class="s1">&#39;path&#39;</span> <span class="o">=&gt;</span>  <span class="nv">$uri</span><span class="p">,</span> <span class="s1">&#39;style_name&#39;</span> <span class="o">=&gt;</span> <span class="s1">&#39;image_style_example&#39;</span><span class="p">));</span>
</span>



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

Crédits Photo

Par Simon Georges
Adhérent
Simon Georges
Drupal depuis plus de 10 ans, SEO depuis 3 ans

Makina Corpus à Capitole du Libre les 26 et 27 novembre !

Participez à Capitole du libre, l'évènement
du logiciel libre à Toulouse les samedi 26 et dimanche 27 novembre ! Capitole du Libre regroupera 3 thématiques : L'Ubuntu party, pour découvrir et
approfondir les logiciels libres, L'Akademy-fr, le rendez-vous de la
communauté française de KDE, Le Drup

Par fgm@drupal.org
Adhérent
Frédéric G. Marand

Drupal et le NoSQL

Présentation sur l'état de l'art en matière de technologies NoSQL en environnement Drupal, données le 2011-11-10 à l'occasion de la conférence Drupagora.

en lire plus

Par badgones

Form API Drupal : supprimer un éditeur WYSIWYG

Si vous voulez supprimer un éditeur Wysiwyg d'un textarea de vote formulaire, par exemple pour remplir des données dans une interface administrateur, il suffit de rajouter la ligne suivante :

<span style="color: #000000;"><strong><span style="color: #dd0000;">'#wysiwyg' </span><span style="color: #007700;">=&gt; </span><span style="color: #0000bb;">false<br /> <br /> <br /> </span></strong></span>Exemple :

<span style="color: #000000;"><span style="color: #0000bb;">$form</span><span style="color: #007700;">[</span><span style="color: #dd0000;">'textarea_field'</span><span style="color: #007700;">] = array(<br /> &nbsp;&nbsp;&nbsp; </span><span style="color: #dd0000;">'#type' </span><span style="color: #007700;">=&gt; </span><span style="color: #dd0000;">'textarea'</span><span style="color: #007700;">,</span></span>

en lire plus

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.

Par juliendubreuil
julien dubreuil
Drupal since 2009

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

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.

Par badgones

Nice menu : ouverture à droite ou à gauche en fonction de la largeur du navigateur

Vous avez besoin d'un menu nice menu qui s'ouvre à droite ou à gauche en fonction de sa position dans la page, et de la largeur du navigateur?
Voilà la solution :

Vous ajoutez votre menu, avec ouveture vers la gauche. Puis, vous rajouter le Javascript suivant dans votre thème (ou alors, vous incluez le fichier JS mis en attachement) :

Attention : #nice-menu-1 est à changer suivant le menu que vous voulez modifier !

$("#nice-menu-1 .menuparent").bind('mouseover',function(){
    if (($(this).offset().left+$(this).outerWidth()+$(this).children("ul:first").outerWidth()) > $("body").outerWidth()) {
        $(this).children("ul:first").css({left:'-'+$(this).outerWidth()+'px'});
    }
    else {

en lire plus

Pages