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

Publié le par PêUR

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 Image, la fenêtre FCKeditor - Ressource browser apparaît:

Ressource browser

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...

Ressource Browser

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

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

Ressource Browser

... 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:

Image à gaucheLorem 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:

Image à gaucheLorem 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:

Image à gaucheLorem 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)

Menu contextuel image
Fig.1

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

Proprités d'Image - Avancé
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)

Menu contextuel image
Fig.1

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

Propriétés 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:

 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 Parcourir le serveur.

 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

 

Publié dans Overblog

Commenter cet article

laurent 07/11/2006 22:17

bonjour,
votre blog est très bien fait
dites pouvez vous me dire, m'aider...
comment peut on faire pour insérer une image mais pas du net , où copier du net mais.... Plus l'adresse puique renommer
Par contre cette image se trouve dans mon ordinateur, dans mes fichier

comment faire pour la mettre en lien dans un forum par ex
là ... ???
je ne sais pas, savez vous ?
:o)
amicalement
-laurent
______
image dans mes fichiers, en interne
pas une image d'un site!
et pour la mettre en ligne il faut en gnrl source du net,
peut on trouver comment insérer l'image pour la mettre sur le forum ..

PêUR 07/11/2006 22:29

Pour qu'une image soit lisible sur internet elle doit obligatoirement se trouver sur un serveur (en d'autre terme, elle doit être sur intenrnet).De nombreux service internet permettent un stockage rapide sur leur serveur de votre image, par exemple http://imageshack.us/

blogtortter 29/07/2006 08:18

Bonjour Peur..je viens de fiare un long tour pour evisiter tous tes articles.. pet'it coucou en passant et surtout, et encore, chapeau pour le travail accompli ici bas ! c'est impressionnant !

ps: je me permets, dans l'article ci dessus, il y a deux fautes de frappe : Géré doit être au passé composé et non à l'infinitif (gérer)
@+ peur, bonnes vacances si tel est le cas !
Dom(Blogtrotter)

PêUR 30/07/2006 11:43

Salut Blogtortter (trotter ??) Dom et merci!
Voilà la faute corrigée ;-)

Angie 22/06/2006 16:42

J'ai déja laissé un petit mot de remerciement sur la page dédiée à cet effet... Et je me suis dis, pourquoi ne pas demander de l'aide ?
En effet, grâce à toi j'ai déja grandement amélioré l'aspect de mon blog.
Cependant, depuis mon arrivée au Portugal (étudiante en stage à l'étranger...), il m'est impossible des télécharger des images dans "mes fichiers" ! Du coup, pas d'illustrations dans les articles et pas d'albums photos ! Bon, j'ai utilisé un des site de stockage et de partage d'images proposés dans ton blog afin de transmettre malgré tout quelques photos à mes proches et autres lecteurs...
Cependant, si tu connaissais la solution à mon problème... j'en serais ravie !
En fait, dès que je clic sur "mettre en ligne" le téléchargement commence, se bloque, puis un message d'erreur apparaît : "Image Uploader encountered some problem. if you see this message, contact web master".
Voilà...
Merci d'avance (pour une solution ou juste pour avoir conscré un peu de ton temps à mon problème)
Angie

PêUR 08/07/2006 15:03

Bonjour Angie,
je ne sais pas quel problème fait planter Image Uploader, mais tu peux contourner le problème en passant en mode upload classique. Pour cela va dans l'onglet Configuration puis décoche la case Utiliser l'assistant de mise en ligne de fichiers (beta). Tu devrais pouvoir ainsi uploader tes images.
Bonne continuation.

Antigone 08/02/2006 14:10

je fais un essai alors, si ça marche j'ouvre un blog chez vous!

PêUR 17/02/2006 11:04

J'espère que tu ouvrira un blog chez Over-blog!!
Si tu as des questions particulières n'hésite pas ;-)

jerome 17/01/2006 22:17

Tel Rantanplan...(4 jours après...!):
Merci beaucoup!!!
et encore bravo!

PêUR 18/01/2006 12:15

;-)