Using Images

Now that you have set up input formats to allow <img> tags, WYSIWYG, your editor of choice, and an image module such as IMCE, you are ready to use them.

Create a new node using Create Content. You should see a toolbar above the body text area. You can experiment to see the interplay between the Image and IMCE check boxes. If you enable Image but not IMCE, clicking the image button in the toolbar lets you specify a URL for the image, as shown in Figure 11.23.

Inserr/edit image

Insert/edit iriagc-Image UKL I

Image description | Alignment I -- Not set --

Vertical space Horizontal space Q

Image Properties

Image Info Link Advanced URL_

Alternative Text

Width Height ~~

HSpacc VSpace ~ Align [

Preview_

Lorem ipsum dolor sit amet, 1

consectetuer adipiscing elit. Maecenas [j feugiat consequat diam. Maecenas * metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc taculis, nibh non iaculis aliquam, orci felís euismod ñeque, sed ornare

FIGURE 11.23

Use the Image button with IMCE not enabled (TinyMCE editor left, FCKeditor right).

Compare Figure 11.23 with Figure 11.24, in which IMCE is enabled.

FIGURE 11.24

Use the Image button with IMCE enabled (TinyMCE editor left, FCKeditor right).

Insert/edit image

Insert/edit Image

Image URL | jjjp| Image description 'B|w

Alignment | -- Not set -- ; | Dimensions | x | Border

Vertical space Horizontal space Q

Insert J Cancel |

Image Properties

Image Info Link Advanced URL_

Alternative Text

( Browse Server j

Height

HSpace VSpacc Align

Preview_

Lorem ipsum dolor sit amet, *

consectetuer adlpiscing elit. Maecenas II feugiat consequat dlam. Maecenas « metus. Vivamus diam purus, cursus a, commodo non, Tacilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc i a cu lis, nibh non iaculis aliquam, orci feiis euismod ñeque, sed ornare

With IMCE enabled, a new window opens that lets you view images on your server. You can click the Upload button at the top to upload an image from your computer to the server, as shown in Figure 11.25.

FIGURE 11.25

You can upload image files to the server.

Help! Thumbnails

Delete Resize Send to fckeditor

File: [f Choose File ) no file

.elected |

Upload )

Create thumbnails: □ 5

□ Large (180x190)

nail (90x90) □ Medi

jm(120x120)

Navigation File name

Size Width Height

Date

ElQusers 'pAfricanDaisy.gif

2.56 KB 48 48

07/04/2009

12:53

■Sjt Dandelion.gif

□ |_/¡magcfield_t

2.66 KB 48 48

06/28/2009

10:07

BI& images DSC00417JPG Softest I"*

1 Picture l.png

2.5 KB 100 75

06/27/2009

1B:09

6.04 KB 100 63

06/27/2009

13:08

13:25:41 Directory ¡magefíeld_thumbs is loaded.

Using the thumbnail names and sizes that you set up in IMCE, you can now use the Thumbnails button to create any of them that you select with check boxes, as shown in Figure 11.26.

File Browser

Navigation

EÖsites/default/file BQ users söi

H Qimages II Öjftest

1 Delete

Resize Send to fckeditor

Thumbnails: O Smal1 (90x90) □ (180x180)

Medium (120x120) □ Large

f Create thumbnails )

File name

Size Width Height

Date

• ^African Daisy.gif

2.56 KB 48 48

07/04/2009

12:53

-jj^ Dandellon.gif

2.66 KB 48 48

06/28/2009

10:07

pM DSC00417.JPG

2.5 KB 100 75

06/27/2009

18:09

Picture l.png

6.04 KB 100 63

06/27/2009

18:08

1 >- 4 files using 13.77 KB of unlimited quota

1 >- 4 files using 13.77 KB of unlimited quota

FIGURE 11.26

Create thumbnails.

If you do not want to use a thumbnail, you can resize the image—either the original or by creating a new image, as shown in Figure 11.27.

Upload Thumbnails Delete Send to Fckeditor

Sf Create a new image

File name

Size Width Height

Date

. j*™

Daisy.gif

2.56 KB

48 48

07/04/2009

12:53

J-, Dande

ion.g if

2.66 KB

48 48

06/28/2009

10:07

gPglDSC00417JPG

2.5 KB

100 75

06/27/2009

18:09

Picture l.png

6.04 KB

100 63

06/27/2009

IQl B Qimagefield_l

13:25:41 Directory imagefteld_thumbs is loaded.

FIGURE 11.27

You can also resize images.

The last button lets you select an image and send it back to your editor as shown in Figure 11.28. FCKeditor has a preview that lets you see the image and how text will wrap. Many people choose left alignment because that is the way that most images look best. (They are at the left of the text, and the top of the image is aligned with the first line of text, which then flows down and under the image.)

FIGURE 11.28

Send a selected image back to your editor enabled

(TinyMCE editor left, FCKeditor right).

Insert/edit image

Insert/edit Image |_

Image URL I'lmagefleld thumbs/DSe00417.JPG|Hî] Image description | |

Dimensions |lQp| * 175 | Border

Vertical space horizontal space

Image Properties m

Image Info Link Advanced URL

[-upal/sites/(fofaultffllos/irnagefic?ld thumbs/DSC00417.JPG| Browse Server^ Alternative Text

Preview

OS

Lorem ipsum dolor sit

:

amet, consectetuer adipiscing elit.

Maecenas feugfac consequat diam.

Maecenas metus. Vivamus diam

purus, cursus a,

commodo non,

OK I I Cancel

Article Marketing Knockdown

Article Marketing Knockdown

The lifeblood of any online business is in being able to generate highly targeted, consistent traffic to your websites, landing pages and squeeze pages.

Get My Free Ebook


Responses

  • tekle
    How to remove Lorem ipsum dolor sit amet, from fck editor?
    7 years ago
  • jacopo
    How can i allign images in fckeditor in drupal?
    7 years ago

Post a comment