Insérer une image à partir de l'éditeur FCKeditor

Mise à jour le 23/01/2006 23:46

Cet article à pour but d'expliquer comment insérer une image dans un article à partir de FCKeditor

Il répond aux questions:

• Comment insérer une image de votre espace de stockage Over-Blog?,
• Comment contournez la mise en page imposée?,
• Comment insérer une image à partir de son URL?
• Comment modifier les propriétés d'image avancées
• Comment insérer un lien sur l'image

Cliquez sur les images pour les voir en grand

Insérer une image de votre espace de stockage Over-Blog

En cliquant sur le bouton , la fenêtre FCKeditor - Ressource browser apparaît:

Sa structure est identique à celle de l'Explorateur de Windows, à gauche les répertoires et sous répértoires, à droite, les icones correspondants aux répertoires de votre espace de stockage "Mes fichiers" d'Over-Blog. Cliquez sur le répertoire où se situe la photo à insérer...

...et sélectionnez la photo en cliquant sur son thumbnail.

Cette action, appel la fenêtre de mise en page...

... qui vous permet de choisir la manière dont le texte va entourer votre image:

• Image à gauche: L'image est calée à gauche du paragraphe et le texte l'encadre par la droite:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus.

• Image centrée au dessus:  l'image est positionné au dessus du texte et centrée:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus.

• Image à droite: L'image est calée à droite du paragraphe et le texte l'encadre par la gauche:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ut ipsum. In dapibus. Maecenas posuere mi vel augue. Pellentesque aliquet porta tellus. Vestibulum a lorem. Duis purus.

Contournez cette mise en page imposée

Ce qui peut-être troublant avec cette méthode de mise en page, c'est qu'une fois que vous avez validé cette fenêtre, selon votre configuration, la mise en forme demandée n'est pas visible dans l'éditeur. (Par exemple, vous demandez que l'image soit centrée et après validation elle se trouve à gauche). Pour y remédier, il suffit de passer en mode source puis de repasser en mode WYSIWYG (cliquez 2 fois sur le bouton "source").

• Vous pouvez aussi, ponctuellement, supprimer cette mise en page forcée de la manière suivante:

Cliquez-droit sur l'image, sélectionnez Propiété d'Image (Fig. 1)

Fig.1

Séléctionnez le 4ème onglet "Avancé" de la fenêtre Propriétés d'Image (Fig.2)

Fig. 2

Dans le champs Classes de Feuilles de style, à la place de "GcheTexte", "CtreTexte" ou "DrteTexte", saisissez:

Classes de Feuilles de style
none                              

• Vous pouvez aussi, définitivement, supprimer cette mise en page forcée en modifiant dans votre CSS les classes GcheTexte et DrteTexte comme suit:

.GcheTexte {float;none;}
.DrteTexte {float:none;}

Insérer une image à partir de son URL

Depuis la version 1.92 d'Over-Blog (décembre 2005) il n'est plus possible d'accèder directement au formulaire d'insertion d'une image par son URL, on peut toutefois procéder ainsi:

• Insérer directement en mode HTML une image:

La syntaxe est la suivante:

<img src="url de l'image" />

• Copier/coller une image quelconque du Web ou insérer une image de votre espace de stockage Over-Blog (comme indiqué au premier paragraphe) et modifié l'URL affectée à cette image en procédant comme suit:

Cliquez-droit sur l'image, sélectionnez Propiété d'Image (Fig. 1)

Fig.1

Cette action renvoie à la fenêtre propriété d'image:

...il ne reste plus qu'à compléter le champs URL!

Propriétés d'image avancées

Cette fenêtre permet aussi de complèter d'autres propriétes d'images:

• Texte de remplacement: texte qui apparait dans une infobulle lors du passage de la souris sur l'image. Optionnel
• Largeur: largeur de l'image. Optionnel
• Hauteur: hauteur de l'image. Optionnel
•  pour garder les proportion hauteur largeur. Optionnel
•  pour remettre la taille originale. Optionnel
• Bordure: Taille de la bordure en pixel. Optionnel
• HSpace: Espace horizontal entre le texte et l'image. Optionnel
• VSpace: Espace vertical entre le texte et l'image. Optionnel
• Alignement: Alignement vertical par rapport au texte. Optionnel

Toutes ces modifications de propriétés sont visualisables dans le champ prévisualisation.

Insérer un lien sur l'image

Si vous voulez insérer un lien sur cette image vous pouvez le faire soit en cliquant sur le bouton d'insertion de lien (Voir ici) soit en utilisant le deuxième onglet de la fenêtre propriétés d'image:

 

Dans le champ URL saisissez l'adresse vers laquelle doit pointer le lien, ce peut être une page HTML comme un fichier (image, multimédia, flash, documents...). Si c'est un fichier chargé dans Mes fichiers vous pouvez y accéder via le bouton .

 Destination permet de selectionner le type d'ouverture du fichier:

• Nouvelles fenêtre: ouvre le fichier dans une nouvelle fenêtre
• Fenêtre supérieur: à utiliser lorsque le blog est géré par des frames
• Même fenêtre: ouvre le fichier sur dans la même fenêtre. Par défaut
• Fenêtre mère: à utiliser lorsque le blog est géré par des frames

 Articles connexes

• Habillez des images de texte
• Bien utiliser l'éditeur FCKeditor
• Insérer un lien à partir de l'éditeur FCKeditor
• Insérer un tableau à partir de l'éditeur FCKeditor