Page 1

In this tutorial we'll get an introduction to the JCE in action, by showing how easy it is to add graphics to content with the JCE.

Here's another look at the home page as it is now. We'd like to add some graphics to the content items on the front page.

open full sized image

Page 2

Here is the content item that we opened in the last tutorial. We'll click on the Insert / Edit Image icon.

open full sized image

Page 3

Some images are already listed, but we'll upload a new one by clicking on the Upload icon.

open full sized image

Page 4

1. We'll browse to the image we want to upload and then
2. click on Upload.

open full sized image

Page 5

1. The image appears in the images list. (Note that we could have chosen to put the image in a subfolder, which could be a good idea if we are adding many.)
2. Clicking on the listing causes the image to display.
3. Note that more options are available in the Appearance tab. We won't examine the Appearance tab yet and will instead just accept the defaults.

open full sized image

Page 6

Click Insert.

open full sized image

Page 7

1. The image appears at the point where we had the cursor in the content.
2. Click Save.

open full sized image

Page 8

We repeat this process with the other content items on the front page. Our home page now looks like this:

open full sized image

Page 9

The margin of the new images was a bit narrow. Let's fix that. Back in the Content Items Manager, we'll click on the first article shown on the home page...

open full sized image

Page 10

We'll select the image and then click on the image icon again.

open full sized image

Page 11

The image properties dialog appears. We'll click on Appearance.

open full sized image

Page 12

In the indicated box, put a CSS styling (margin-right:10px;)

Click on Update.

open full sized image

Page 13

There is now a bit more of a margin.

open full sized image

Page 14

After repeating this process with the other two content items, the image margins have been adjusted.

open full sized image

Page 15

Let's make one last adjustment using the JCE. When a user clicks on an image, it should go to the full content for that item. Here we are looking at a content item again.

1. Click on the image
2. Click on the link icon.

open full sized image

Page 16

1. Choose the article for this link to go to.
2. Click Insert.

Now when a user clicks on an image, the full article content will display.

open full sized image

Page 17

After saving and returning to our home page, when we click on the image:

open full sized image

Page 18

The full content page for the article appears.

open full sized image