9 Insérer un média

Préalables

Si vous être parvenu ici, c’est que des droits supplémentaires vous ont été attribués depuis les chapitres précédents. Dans notre site, pour insérer un média il faut avoir obtenu le rôle dénommé « ArticlesPagesMedias ». De nouveaux identifiants vous ont peut-être été communiqués, il vous faut alors vous connecter dans le site avec ces derniers. Sinon, la modification de vos attributs d’utilisateurs doit vous être notifiée.

Ce chapitre est un peu long, je vous conseille de vous y consacrer « au calme », sinon prenez note du sous-titre où vous vous arrêtez.

Qu’est-ce qu’un média ?

Dans WordPress, tout ce qui n’est pas du texte s’appelle des médias. Au chapitre 3, nous avons vu qu’un site sous WordPress peut accueillir toutes sortes de contenus. Parmi ceux-ci, un média peut être une image fixe ou animée, une vidéo, ou un son.

Concernant les images, qu’elles soient fixes ou animées elles sont traitées de la même façon. C’est pourquoi il ne sera question que « d’image » au sens large. Elles peuvent être dans différents formats de fichiers. Ces formats se distinguent par leur extension. Vous connaissez peut-être jpg, png, tiff, bmp, gif, etc. Afin de ne pas trop pénaliser la vitesse de chargement des images depuis le site pour les internautes, il est préférable de n’utiliser que les formats jpg et pgn, les autres étant très souvent trop volumineux. Le format gif peut aussi être utilisé, mais il est généralement réservé aux images animées, bien que ce format puisse aussi afficher des images fixes. Il existe une restriction à propos des « gif animés« , ils fatiguent parfois les internautes s’ils sont trop utilisés, ce qui dégrade l’image d’un site.

Concernant les sons, le format le plus utilisé est le « mp3« . Attention toutefois à ne pas pénaliser le site avec des contenus trop volumineux.

Concernant les vidéos, les formats les plus utilisés sont « avi« , « mp4 » ou « mpeg« . Attention, les vidéos sont très volumineuses, et pénalisent très fortement un site. Le meilleur des conseils est d’éviter d’intégrer des vidéos dans un site, car il existe sur l’internet des sites spécialisés pour cela. Vous connaissez certainement YouTube, c’est le plus connu et aussi le plus efficace. Plutôt que d’intégrer des vidéos dans un site, il est grandement préférable de faire un lien vers une vidéo présente sous YouTube. C’est beaucoup plus efficace, les serveurs de YouTube sont beaucoup plus rapides que les hébergeurs de sites.

Dans ce qui suit, nous allons nous intéresser uniquement aux images.

Dans le rôle actuel qui vous est attribué, vous pourrez proposer des médias, donc des images. Attention, WordPress n’intègre des médias que dans la limite de 2 méga-octets par fichier. La taille des images est directement fonction de leur qualité de définition, même si certains formats permettent de les compresser. La définition s’exprime en ppi, nombre de points par pouce (= inch), chaque point est dénommé pixel. On parle aussi parfois d’images par points.

Le tableau de bord

Connectez-vous avec votre nouveau rôle. Observez que la présentation du tableau de bord est modifiée, il propose une nouvelle fonction nommée « Médias », comme ce qui suit. Cliquez sur la fonction montrée par la flèche rouge, le tableau de bord se modifie selon la seconde image. L’écran change alors d’aspect pour vous montrer les images contenues dans la bibliothèque.

À ce stade, vous pouvez choisir une image à insérer dans votre texte. Cependant, nous considérons qu’il est nécessaire que vous en importiez une nouvelle. Vous avez plusieurs possibilités, que nous allons passer en revue. Sachez qu’elles sont toutes équivalentes.

• À côté du titre « Bibliothèque de médias », un bouton « Ajouter » est à votre disposition. Si vous le sélectionnez, vous obtiendrez l’écran suivant :

• Dans le tableau de bord, dans le menu « Médias » vous disposez aussi de la fonction « Ajouter ». Si vous la sélectionnez, vous obtiendrez l’écran suivant :

Comme il est indiqué dans l’écran, vous avez la possibilité d’importer simultanément plusieurs images.

Une autre possibilité vous est également offerte, en cliquant sur la partie de la phrase soulignée de couleur bleue. Vous obtenez alors ce nouvel écran :

Quel que soit votre choix, si vous sélectionnez indifféremment « Choisir des fichiers » ou « Parcourir », vous obtiendrez l’ouverture d’une boîte de dialogue de votre système d’exploitation habituel qui vous permet d’aller chercher le ou les fichiers à importer :

Dans cet exemple, il s’agit d’un service Windows qui permet « d’envoyer » un fichier depuis votre ordinateur (ou votre réseau) vers WordPress. Une fois qu’un ou plusieurs fichiers sont choisis, il faut valider le bouton « Ouvrir ». Je sais, ce n’est pas logique, mais c’est du Microsoft ! (Un équivalent existe sous Mac OS.)

Pour ceux qui pratiquent le « glisser – déposer« , vous pouvez aussi sélectionner vos fichiers et venir les glisser dans la partie intérieure des pointillés de l’écran de WordPress.

Dans notre exemple, nous n’avons sélectionné qu’un seul fichier à importer.

Dans tous les cas, vous obtiendrez successivement les deux écrans qui suivent, le premier pendant la phase d’importation, puis le second lorsque tout est terminé :

 

Une fois l’importation terminée, le (ou le dernier) fichier importé (sous WordPress on l’appelle « attaché« ) est entouré d’un rectangle bleuté. Vous pouvez alors cliquer sur ce fichier pour vérifier ses caractéristiques. Vous obtenez alors l’écran suivant :

En effet, votre image ne correspond peut-être pas complètement à ce que vous en attendez. Elle est peut-être trop grande, mal orientée, devant être recoupée, etc. Il existe donc quelques fonctions qui permettent de la corriger. Mais c’est peut-être le moment de souffler un peu.

À noter que selon les droits qui vous ont été attribués, la fonction de suppression n’est peut-être pas possible pour vous. Dans ce cas, le choix « Supprimer définitivement » (caractères rouges) ne s’affichera pas.

Modifier une image attachée

Poursuivons, vous disposez maintenant d’une image, mais elle ne vous convient pas complètement. Sous cette image, vous trouvez un bouton nommé « Modifier l’image ». Cliquez dessus, et l’écran se modifie comme suit :

7 icônes sont à votre disposition, de gauche à droite :

1. Recadrer l’image, en définissant un rectangle de sélection.
2. Pivoter 1/4 de tour vers la gauche.
3. Pivoter 1/4 de tour vers la droite.
4. Retournement vertical. L’image sera « tête en bas », mais avec le texte inversé comme dans un miroir.
5. Retournement horizontal. L’image est vue dans un miroir.
6. Annuler la modification.
7. Rétablir – Annuler l’annulation.

Les modifications terminées, cliquez le bouton bleu « Enregistrer ».

Notez qu’il existe une autre façon de modifier cette image, à l’aide des fonctions disponibles à droite de l’écran (première image suivante). Dans tous les cas, une petite explication vous est donnée en cliquant sur les points d’interrogation :

• Vous pouvez directement fixer une taille bien déterminée à l’image, à partir de la taille originale qui est indiquée.
• Vous pouvez aussi recadrer l’image en lui fixant une proportion en hauteur sur largeur que vous auriez définie.
• Vous pouvez aussi ne choisir qu’une sélection de l’image, en fixant un rectangle à la souris. Dans ce cas, les dimensions de la sélection vous sont communiquées (image 2).

Enfin, comme toute image ainsi redéfinie, avec création d’une miniature, les trois boutons radio vous proposent différents choix d’application de vos modifications. À la fin, vous validez avec le bouton bleu « Enregistrer ».

Exemple d’une modification par rotation 1/4 de tour vers la droite :

Insérer un média dans le texte

Maintenant, vous disposez d’une collection d’images, et vous désirez en insérer une dans votre texte. Retournez dans l’écran d’édition de votre article (Menu « Articles », puis « Tous les articles », puis survol à la souris des titres des articles jusqu’au-dessus du vôtre, puis « Modifier »). Notez qu’au-dessus des commandes d’éditions vous disposez maintenant d’un bouton nommé « Ajouter un média », comme suit :

Sur la gauche de l’écran, quatre fonctions vous sont proposées, mais nous n’allons nous servir que de la première, « Insérer un média ». Les trois autres seront décrites plus tard.

Il vous suffit de sélectionner votre image avec la souris. Notez que cette fonction dispose d’un tri par type de média, ce sera pratique lorsque votre bibliothèque sera très fournie. Ce tri s’effectue avec le bouton « Tous les éléments média » qui ouvre une liste déroulante comme ceci :

Sélectionnez votre tri en fonction du média.

• Mis en ligne sur cet article permet de recopier une image une nouvelle fois sans devoir la chercher.
• Non-attaché ne montre que la partie de la bibliothèque non encore utilisée.

Une fois votre image sélectionnée, elle vient se placer à l’emplacement du curseur dans votre texte, puis le curseur se positionne automatiquement derrière pour vous permettre de poursuivre votre saisie :

Dans cet exemple, j’ai continué à saisir du texte après l’image, mais j’ai remis le curseur à sa position initiale (flèche rouge), afin que vous puissiez observer comment l’image se place dans le texte.

Il vous faut maintenant habiller votre image. Cliquez dessus, une petite barre de fonctions apparaît :

Icônes de gauche à droite :

• Indentation vers la gauche.
• Centrer dans le texte.
• Indentation vers la droite.
• Image complètement à gauche dans le texte.
• Détails de l’image.
• Sortir.

Intéressons-nous à la fonction d’édition des détails de l’image. Cliquez sur l’icône désignée par la flèche rouge (en forme de petit crayon), un nouvel écran vous est proposé :

Les actions que vous devez maintenant entreprendre sont notées en rouge.

1. Dans ce champ, le nom du fichier que vous avez importé est automatiquement renseigné. Vous pouvez le laisser tel quel.
2. Vous devez renseigner ce champ avec un petit résumé de l’image, afin que l’internaute puisse la reconnaître lorsque l’image est survolée avec la souris. Le résumé apparaîtra dans une petite fenêtre. De plus, ce résumé participe au référencement du site pour ce contenu.
3. Le champ « Légende » vous permet d’afficher un titre sous l’image dans votre texte. Ce titre suivra automatiquement le positionnement de l’image.
4. Validez cette commande, les internautes vous en remercieront.

En effet, l’internaute peut désirer afficher uniquement cette image, afin de l’examiner dans son détail. Dans ce cas, ouvrir un nouvel onglet dans son navigateur lui évitera de perdre cette page. De même, une image peut offrir un lien vers une autre partie du site, ou même un autre site. Dans ce cas, ce lien s’ouvrira dans un nouvel onglet, toujours pour éviter à l’internaute de perdre la page de départ.

Lorsque vous en avez terminé avec ces habillages, l’image s’insère dans votre texte comme ceci :

Notez la légende située sous l’image, tandis que la suite du texte est automatiquement reportée à la ligne suivante.

Si vous êtes satisfait du résultat, validez avec le bouton bleu « Soumettre à relecture ».