Insertion d'image dans un article + bouton

Cet article a pour but d’expérimenter avec les méthodes d’insertion d’image dans un article. En principe et tel que suggéré par notre graphiste, deux types d’images peuvent être insérées dans un article:

une image pleine grandeur
une image avec texte côte à côte

La décision d’utiliser l’une ou l’autre dépendra de la version originale de la photo et de la possibilité de la modifier avec un logiciel de traitement d’image

Étape 1 -Insertion d'une image en pleine grandeur

Pour insérer une image en pleine grandeur à l’aide d’Elementor, il faut d’abord créer une section (+) d’une seule colonne, puis en cliquant sur les 9 petits points dans le tableau à gauche, glisser le widget « Image » au centre de la section nouvellement créée.

À ce point, dans le tableau à gauche apparaitra la commande « Choisir une image ». Normalement, la photo qui doit être affichée aurait dû être téléversée dans la médiathèque du tableau de bord de WordPress.

Lorsqu’une image est insérée à l’aide du widget « Image », quatre options sont offertes:

1 – Définir la taille de l’image

2 – Définir l’alignement (gauche, centré ou droite)

3 – Insérer un légende: il est possible d’insérer la légende du fichier image joint (dans un tel cas, elle reprendra la légende qui a été définie dans la médiathèque) ou une légende
personnalisée qu’il est possible d’écrire directement dans la case d’Elementor à cet effet. Il y a aussi l’option de n’avoir aucune légende.

4 – Insérer un lien: de la même façon, il y a possibilité d’insérer un lien au fichier media (l’obtenir de la médiathèque) ou personnalisé (créer un hyperlien vers toute autre destination). Il est aussi possible de n’avoir aucun lien.

Étape 2 - Insertion d'image côte à côte avec texte

À la création d’une section (+), il faut choisir une section de deux colonnes et insérer les widgets « Image » et « Éditeur de texte » et les placer dans la colonne désirée. Dans cet exemple, le texte a été placé à gauche et l’image à droite. L’approche pour insérer une image/photo est la même qu’à l’Étape précédente (Étape 1).

Étape 3 - Taille et dimensionnement des photographies

Aux étapes précédentes, deux façons d’insérer et de positionner des photos/images ont été présentés mais aucune photo n’a été choisie. Toutes les photos n’ont pas nécessairement les dimensions qui conviennent à l’emplacement souhaité. Il faut donc apporter des ajustements. Des exemples d’insertion et d’ajustements de photos sont présentés soit:

une photo provenant d’un téléphone cellulaire récent
une numérisation d’une photo ancienne

Pour chacune de ces photos, différentes tailles de photographies seront insérées (pleine grandeur ou minimisation).

Photo provenant d'un cellulaire

Cette photo de la mercerie a une largeur de 952 pixels et une hauteur de 605 pixels et exige 60 Ko de mémoire. Il est possible de modifier son affichage simplement en choisissant la taille de l’image désirée (thumbnail, medium, medium large et large) qui feront, respectivement, 150 x 150 pixels, 300 x 300 pixels, 768 x 768 pixels et 1024 x 1024 pixels). Il n’est pas possible de l’agrandir plus que la taille réelle de la photo.

Dans cet exemple, la photo extraite de la médiathèque est ramenée à la taille « medium » soit 300 pixels x 300 pixels.

L'utilisation du clic sur image

Le clic sur image est généré lorsqu’un lien est inséré sur une image. Ce lien peut mener vers d’autres articles que ce soit sur le site histoirede rawdon ou un site externe. Il peut aussi mener à la photo dans sa taille originale (telle qu’insérée dans la médiathèque).

Pour en faire la démonstration, un lien vers l’image de la médiathèque a été inséré dans la photo réduite de la mercerie (300 x 300). En cliquant sur l’image, la photographie apparaitra à sa taille réelle.

Insertion d'une image en arrière plan dans le titre

Pour insérer une image en arrière plan dans le titre, il faut aller dans la page d’Oceanwp qui permet d’attribuer le titre à un article et cliquer sur « Title » dans le tableau de commandes situé à gauche de l’écran puis d’aller sous « Title style » et sélectionner « Background Image ». Les commandes nécessaires pour récupérer la photographie choisie apparaitront.

Pour tout autre modification à une image, il faut utiliser un logiciel de traitement de l'image tel Adobe Photoshop, GIMP, Nero ou autres. GIMP est un logiciel "opensource" et gratuit.

INSERTION D'UN BOUTON DANS UNE IMAGE

Cette page expérimente aussi l’impact sur l’URL d’un changement de titre d’article – Titre initial = Insertion d’image dans un article – Titre modifié = Insertion d’image dans un article + bouton – Il ne semble pas possible de modifier le titre à partir d’Elementor – Il faut retourner à OceanWP. J’ai modifié le titre dans OceanWP mais cela ne modifie pas l’URL.

Les sections suivantes ont servi à effectuer la mise à jour de la page d’accueil. Il est à noter que ces deux sections (Rawdon en bref et Liens utiles) ont été construites à partir de deux sections chacune soit une pour le titre et une pour le contenu. Pour Rawdon en bref, la deuxième section a été subdivisée en 5 colonnes.

Rawdon en bref