Using Images With The FCK Editor – WP Tutorial

Using Images With The FCK Editor - WP TutorialHello Again Everyone,

In This post we are going to take a quick look at how to manage and edit images using the Deans FCKEditor plug in for WordPress.

First Things First…

Before we can start using images with this editor, we need to make some adjustments to the WordPress Settings. 

It's important to keep in mind that while WordPress has it's own media manager built into it's core, the FCKEditor comes with it's own media manager as well.  In effect, with this plug in activated, you have two separate media managers.  Unfortunatly, they are uploading media to two separate files AND they both come with their own "language" or "idea" of how images should be handled.

  STRONG SUGGESTION… In most cases, you'll be uploading images on the fly (at the time your writing the post) so you'll be using the editor to upload and manage the image.  In other words, you can get by WITHOUT having to use the WordPress media library all together.  So, if your going to be using this editor often, I suggest you use the FCKEditor manager exclusively to avoid any unpleasant encounters.

That Being Said, Here's The Scoop With Images…

  • To insert an image, click the Image Icon located from the tool bar. (AVOID using the media icons above the editor to insert images)
  • To Modify the image AFTER you insert it into the post, right click on the image, and select "Image Properties"
  • To Insert an image already uploaded to your server, click the Browse Server button and locate the image.
  • To Upload an image from your computer, click the Upload tab ->Browse->[select your file]->Send To Server
  • After you either insert or upload your image, you'll be given a preview of what that image will look like.
  • You can also link to an image that already exsists elsewhere on the internet by pasting the image url ( into the "URL" value to the left of the "Browse Server" button
  • After you've either inserted the image from your server, uploaded from your computer, or linked to it from another url, you'll be given a preview of the image and give several perameters to modify:
    • The Width and Height of the image can be set to whatever you want, but I recommend ensuring the "lock" to the right of these values is on.  This constrains the proportions of the image when you resize it.  If this is unlocked, the image will skew and get out of proportion.
    • The Border values are measured in pixels.  The higher the value the thicker the border.  A value of zero (0) or if left blank tells it "no border".
    • HSpace is the horazontal spacing between the image and the content to the left and right of it.
    • VSpace is the vertical spacing between the image and content above and below it.
  • If you want your image to be a clickable link, Use the Link tab at the top of your Image Properties menu.  (It is in between the "Image Info" and "Upload" tab.  Paste your destination url into the URL value and select what happends when someone clicks on the link (the target value).
  • 99% of you will NEVER need to use the Advanced tab on the Image Properties menu

Video Demonstration On How To Work With Images….


This text will be replaced





  1. I will immediately grab your rss as I can’t find your email subscription hyperlink or e-newsletter service. Do you’ve any? Please let me know in order that I may subscribe. Thanks.

Speak Your Mind


CommentLuv Enabled