Publier une image sur votre site Drupal

Publier une image sur votre site Drupal peut vous paraître très compliqué au départ. Drupal est très procédurier et fonctionne avec une logique qui peut paraître étrange la première fois. C’est pourquoi je vous propose un article pour vous aider. 

Je veux vous faire des articles pour vous aider sur Drupal mais je suis confrontée à un problème : il y a autant de Drupal que de développeurs. Je ne sais même pas combien il y a de configurations possibles sur un site Drupal. Du coup, je ne peux pas adapter mon article à votre site précisément. Je vais donc vous donner une procédure générale. À vous de voir ce qui correspond avec votre configuration. En espérant que cette roadmap puisse vous aider à naviguer dans les eaux troubles de ce CMS farceur… 

Travailler l’image avant de la publier sur Drupal 

Avant de publier votre image sur Drupal, vous allez devoir la travailler. Vous devez vous assurer qu’elle correspond aux standards du web tout d’abord, puis qu’elle ait la bonne taille. 

Comment savoir quelle taille doit faire votre image ? 

Deux options : 

  1. L’option la plus simple est de prendre la taille du crop le plus grand sur Drupal. Drupal possède des crops (recadrages) de différentes tailles. Si vous faites votre image à la taille du crop le plus grand, elle sera à la taille de ce crop. Puis si vous avez besoin d’un crop plus petit, vous aurez juste à sélectionner la partie de l’image que vous souhaitez mettre en avant. Et avec un peu de chance, le rendu du petit crop sera satisfaisant ! Sinon, il vous reste toujours la deuxième option… 
  2. Tailler l’image à une taille particulière. Vous aurez peut-être besoin d’une taille qui n’est pas disponible dans les crops de Drupal. Dans ce cas, vous devrez tailler l’image à la main. Vous n’aurez ainsi pas de crop à ajouter.  

Ajouter l’image sur Drupal via Atom

Montre la fenêtre Create Atom dans Drupal, avec l'upload d'une image de libellule

Vous allez ensuite devoir créer un Atom. Les Atom regroupent tous les fichiers que vous allez ajouter sur votre site : les images, les pdf, les vidéos… Si vous n’avez pas encore cette option sur votre site, il vous faut installer le module appelé Scald, que vous trouvez juste ici : sur le site de Drupal.org. Il y a d’autres outils, mais je n’ai pas encore joué avec. Il y a encore d’autres choses à installer en plus de Scald mais cela mérite un article à part entière. Nous allons aussi partir du principe que vous avez déjà enregistré vos crops dans votre configuration Drupal. Si ce n’est pas le cas, il va falloir que je vous fasse un article… En effet, je n’ai pas paramétré de crops non plus !

À partir de là, vous aurez différents réglages à faire. Vous devrez d’abord  choisir les crops et leur positionnement (un rectangle ou un carré qui contient ce qui va être gardé de l’image et ce qui est en dehors sera jeté). Puis vous aurez sûrement d’autres informations à remplir suivant la configuration que vous avez choisie. 

Voici un exemple de crop sur Drupal, sachant que ma configuration est très minimale :

1

Tout ce qui est dans le rectangle est gardé. Les papillons en dessous, dans la partie grise, vont disparaître.

Validez et à partir de là, deux suites possibles (toute ressemblance avec une histoire dont vous êtes le héros est totalement fortuite…) : 

  1. Vous n’avez qu’une langue sur votre site (super, du travail en moins !) : vous pouvez passer à l’étape suivante 
  2. Vous avez plusieurs langues sur votre site et il va falloir traduire… Normalement, Drupal retient tout ce que vous avez marqué dans la traduction, mais vous allez quand même devoir valider… 

Poster votre image 

Vous cherchez sûrement à poster votre article sur une page ou un article… Quoi qu’il en soit, je vous conseille de la poser sur une zone texte. Parce que sur votre éditeur, dans votre zone texte, vous avez un bouton qui vous permet d’afficher les sources… Et de récupérer le code de votre zone texte. C’est pratique ! Vous pouvez récupérer ce code et le coller où vous voulez ! Cela vous laisse la possibilité d’arranger la mise en page comme vous le souhaitez. 

Une fois votre image posée, vous pouvez faire d’autres réglages, en faisant un clic droit dessus. Testez l’option « Edit Atom property ». Elle vous propose des crops supplémentaires et un positionnement. 

Vous allez sûrement obtenir quelque chose comme ça, très approximativement, suivant votre configuration :

Image qui montre un article sur Drupal, avec du texte lorem ipsum, une image de libellule en noir, et montre aussi la colonne Atom sur la droite

Conseils en plus 

Vous allez peut-être avoir besoin de poster votre image à différents endroits du site. C’est là que les crops vont se révéler le plus utile. En effet, il vous suffit d’uploader votre image une fois et de mettre plusieurs crops. Comme ça, vous aurez plusieurs images… En ayant injecté une seule image. 

Comment savoir quel crop utiliser en fonction des zones ? 

Postez votre image dans cette nouvelle zone. Faites clic droit sur l’image et ouvrir dans un nouvel onglet. Dans l’url s’affiche le nom du crop dont se sert Drupal, à côté de la partie style. Vous savez ainsi quel crop régler ! 

Supprimer une image de Drupal 

Ne le faites pas. 

Ça casse tout, c’est horrible ! 

Si vous avez besoin de supprimer une image tout de même, vous pouvez juste l’enlever des zones où elle apparaît. Elle restera toujours dans les Atom, mais personnellement, je ne suis pas allée plus loin. 

Si vous voulez remplacer cette image par une autre, vous pouvez modifier l’image, enlever la source et injecter une nouvelle image… Mais avant d’injecter cette nouvelle image, vous devez la renommer différemment. En effet Drupal va garder la première image en mémoire. Si vous injectez une deuxième image au nom identique, le site ne va pas comprendre quelle image afficher (et c’est le début des problèmes…) 

Montre la fenêtre Create Atom dans Drupal, avec l'upload d'une image de libellule

Si je veux changer ma libellule noire pour mettre une libellule en couleurs, par exemple, je clique sur Remove et je mets mon fichier libellule, avec un autre nom (libellule2 par exemple).

Conclusion 

Courage ! Faites-vous une roadmap avec les étapes à suivre. Gardez toujours le même ordre et à force de pratique, vous allez gagner en vitesse. 

O2 Switch, mon hébergeur favori !

Je vous ai déjà parlé d'O2 Switch, un hébergeur que j'adore dans cet article par exemple. Si vous souhaitez héberger un site chez eux, vous pouvez le faire via mon programme de parrainage. Ainsi, vous pourrez supporter gratuitement mon travail.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *