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.
Click on the image for page view.
Page 2
Here is the content item that we opened in the last tutorial. We'll click on the Insert / Edit Image icon.
Click on the image for page view.
Page 3
Some images are already listed, but we'll upload a new one by clicking on the Upload icon.
Click on the image for page view.
Page 4
- We'll browse to the image we want to upload and then
- click on Upload.
Click on the image for page view.
Page 5
- 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.)
- Clicking on the listing causes the image to display.
- 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.
Click on the image for page view.
Page 6
Click Insert.
Click on the image for page view.
Page 7
- The image appears at the point where we had the cursor in the content.
- Click Save.
Click on the image for page view.
Page 8
We repeat this process with the other content items on the front page. Our home page now looks like this:
Click on the image for page view.
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...
Click on the image for page view.
Page 10
We'll select the image and then click on the image icon again.
Click on the image for page view.
Page 11
The image properties dialog appears. We'll click on Appearance.
Click on the image for page view.
Page 12
In the indicated box, put a CSS styling (margin-right:10px;)
Click on Update.
Click on the image for page view.
Page 13
There is now a bit more of a margin.
Click on the image for page view.
Page 14
After repeating this process with the other two content items, the image margins have been adjusted.
Click on the image for page view.
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.
- Click on the image
- Click on the link icon.
Click on the image for page view.
Page 16
- Choose the article for this link to go to.
- Click Insert.
Now when a user clicks on an image, the full article content will display.
Click on the image for page view.
Page 17
After saving and returning to our home page, when we click on the image:
Click on the image for page view.
Page 18
The full content page for the article appears.
Click on the image for page view.
| 
