(Image Info section rewritten. Image manipulation section added.) |
(Minor rewording) |
||
| Line 24: | Line 24: | ||
== Image Info == | == Image Info == | ||
| − | The '''Image Info''' tab is the default tab | + | The '''Image Info''' tab is the default tab that opens after you press the [[Image:CKEditor_image.png|Image]] button on the toolbar. It allows you to set the image URL and configure the way it will appear in the document. |
[[Image:CKEditor_insert_images.png|frame|center|alt=Image Info tab of the Image Properties window|Image Info tab of the Image Properties window]] | [[Image:CKEditor_insert_images.png|frame|center|alt=Image Info tab of the Image Properties window|Image Info tab of the Image Properties window]] | ||
| − | + | Below is an overview of all '''Image Info''' tab elements: | |
| − | * '''URL''' — the web address of the image. The image may be located on the same server as the web site you are now in or on | + | * '''URL''' — the web address of the image. The image may be located on the same server as the web site you are now in or on an external server. |
** External server: If you want to use an external address, use the full absolute path. | ** External server: If you want to use an external address, use the full absolute path. | ||
**: Example: | **: Example: | ||
**: http://example.com/image1.jpg | **: http://example.com/image1.jpg | ||
| − | ** Local server: If the image is located on the same server, you can use an absolute path that | + | ** Local server: If the image is located on the same server, you can use an absolute path that omits the domain name and starts with a slash. |
**: Example: | **: Example: | ||
**: [[/images/image2.jpg]] | **: [[/images/image2.jpg]] | ||
**: If CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]), you can also use the '''Browse Server''' button to select an image from the ones that are available on the server. | **: If CKEditor is integrated with a file browser (like [http://ckfinder.com/ CKFinder]), you can also use the '''Browse Server''' button to select an image from the ones that are available on the server. | ||
| − | * '''Alternative Text''' — | + | * '''Alternative Text''' — a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. You should always provide your images with meaningful alternative text in order to make it [[CKEditor_3.x/Users_Guide/Accessibility|accessible]] to users with disabilities. |
* '''Width''' — the width of the image in pixels. By default this is the size of the original image. | * '''Width''' — the width of the image in pixels. By default this is the size of the original image. | ||
| Line 48: | Line 48: | ||
* '''VSpace''' — the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels. | * '''VSpace''' — the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels. | ||
* '''Align''' — the alignment of the image in the document. Available options are '''Right''' and '''Left'''. | * '''Align''' — the alignment of the image in the document. Available options are '''Right''' and '''Left'''. | ||
| − | * '''Preview''' — a | + | * '''Preview''' — a preliminary view of the selected image formatted according to the options chosen on the left. |
=== Image manipulation === | === Image manipulation === | ||
| Line 56: | Line 56: | ||
If the image is too big, you can alter its dimensions by entering new values into the '''Width''' and '''Height''' fields. By default the image ratio is locked, which you can see thanks to a [[Image:CKEditor_lock.png|alt=Lock]] icon. This means that when you change one of the size values (width or height), the other one will be adjusted automatically. | If the image is too big, you can alter its dimensions by entering new values into the '''Width''' and '''Height''' fields. By default the image ratio is locked, which you can see thanks to a [[Image:CKEditor_lock.png|alt=Lock]] icon. This means that when you change one of the size values (width or height), the other one will be adjusted automatically. | ||
| − | If you want to freely modify both dimensions, click the [[Image:CKEditor_lock.png|alt=Lock]] button in order to unlock the ratio. The button will now change to [[Image:CKEditor_unlock.png|alt=Unlock]] and | + | If you want to freely modify both dimensions, click the [[Image:CKEditor_lock.png|alt=Lock]] button in order to unlock the ratio. The button will now change to [[Image:CKEditor_unlock.png|alt=Unlock]] and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the [[Image:CKEditor_unlock.png|alt=Unlock]] button once more. |
You can easily return to original image size by pressing the [[Image:CKEditor_reset_size.png|alt=Resize]] button. This will reset the image size; the original width and height will now appear in appropriate text boxes. | You can easily return to original image size by pressing the [[Image:CKEditor_reset_size.png|alt=Resize]] button. This will reset the image size; the original width and height will now appear in appropriate text boxes. | ||
Revision as of 12:24, 26 October 2010
CKEditor allows you to add images to your documents in an easy and intuitive way.
To insert an image simply press the 
button on the toolbar. The Image Properties dialog window that will open lets you set configuration options that define image source, its size, display properties, or other advanced properties.
The Image Properties dialog window includes four tabs that group image options:
All tabs contain the 
and 
buttons that let you accept the changes or close the dialog window without performing any changes, respectively.
Once inserted into the document, the image can be edited at any time by double-clicking it. The Image Properties dialog window will open again and you will be able to introduce changes to the image configuration options.
If you attempt to close the Image Properties dialog window without saving the changes, you will be prompted to do so:
You can either proceed without saving your changes by choosing OK or close the alert window with the Cancel command and save the changes.
Image Info
The Image Info tab is the default tab that opens after you press the button on the toolbar. It allows you to set the image URL and configure the way it will appear in the document.
Below is an overview of all Image Info tab elements:
- URL — the web address of the image. The image may be located on the same server as the web site you are now in or on an external server.
- External server: If you want to use an external address, use the full absolute path.
- Example:
- http://example.com/image1.jpg
- Local server: If the image is located on the same server, you can use an absolute path that omits the domain name and starts with a slash.
- Example:
- /images/image2.jpg
- If CKEditor is integrated with a file browser (like CKFinder), you can also use the Browse Server button to select an image from the ones that are available on the server.
- External server: If you want to use an external address, use the full absolute path.
- Alternative Text — a short textual description of the image that tells users with assistive devices (like screen readers) what the image is about. You should always provide your images with meaningful alternative text in order to make it accessible to users with disabilities.
- Width — the width of the image in pixels. By default this is the size of the original image.
- Height — the height of the image in pixels. By default this is the size of the original image.
- Border — the size of the solid border around the image in pixels.
- HSpace — the horizontal spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
- VSpace — the vertical spacing (or margin) between the image border (if present) or the image itself and other document elements that surround the image, in pixels.
- Align — the alignment of the image in the document. Available options are Right and Left.
- Preview — a preliminary view of the selected image formatted according to the options chosen on the left.
Image manipulation
With CKEditor you do not have to worry about resizing your image.
If the image is too big, you can alter its dimensions by entering new values into the Width and Height fields. By default the image ratio is locked, which you can see thanks to a 
icon. This means that when you change one of the size values (width or height), the other one will be adjusted automatically.
If you want to freely modify both dimensions, click the button in order to unlock the ratio. The button will now change to 
and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the button once more.
You can easily return to original image size by pressing the 
button. This will reset the image size; the original width and height will now appear in appropriate text boxes.
Link
The second bookmark relates to "Link":
- URL: defines the URL address of the image. You may also use the "Browse Sever" in order to browse the files.
- Target: defines the target of the image (for advanced users). User may choose from New Window ( _blank ), Topmost Window ( _top ), Same Window ( _self ) or Parent Window ( _parent ).
Upload
Notice that this bookmark may not be available if CKEditor is not connected to the file manager, such as CKFinder.
The third bookmark is the "Upload" section:
- Upload: specifies the location of the image file on your local hard drive. User may also use "Browse" instead of typing the location manually.
Pressing "Send it to the Server" sends the image to the server.
Advanced
This bookmark is only for advanced users:
- Id: specifies image's ID.
- Language Direction: sets the language direction from left to right ( LTR ) or from right to left ( RTL ).
- Language Code: specifies the language code e.g. en, pt, pl.
- Long Description URL: specifies the description of the page.
- Stylesheet Classes: specifies the name of the CSS class.
- Advisory Title: specifies the description of the target object.
- Style: specifies the style.