Using JCE editor for image management E-mail

Your JCE editor is typically what's installed on your site as the primary editor for text and graphics. Here's a quick low-down on the basics.

To replace or add a new image using your JCE editor

While technically, falling off a log is slightly easier than replacing an image, image replacement is far less painful. Just open your article, click the image and select the "Insert/edit image" button. If you're unsure which one it is, mouse over each icon and a small tool-tip will appear. It will be on the bottom row, close to the far right. Your configuration, depending on what else is loaded into your site, may look different.

edit_image_button

If your editor has been updated recently, it make look something like this:

edit-image-button_v2

You can do most everything you need to do in the next window that pops up. This will be the Image Manager. Here, you can upload a file with the same image name (providing· you changed the image for some reason in photoshop), you can upload new images, make new folders or select an existing image already uploaded to your site.

You should be looking at the Image Manager window that pops up after you
1-- selected the image you want to replace, and
2-- clicked the image/edit button. The image is automatically loaded and a small thumbnail should be visible on the lower right.

jce_image_manager

Reading the image above from bottom to top, left to right, we discover the bottom section is all about organizing and finding the right image.

  1. Folders: Here you can add another folder (by clicking on the add folders button (#5). Or more typically, open another folder to see what's inside it. If you select a different folder, the contents of that folder show up in section (#2).
  2. Folder Contents: The file names of the folder you select in (#1) show up here. If you've pre-selected an image before opening this window up, you'll see the file details to the right.
  3. Details section shows the file size and image dimensions, and usually a small preview. If you want to upload another image with the exact same dimensions, you can do so here. In this case, the new image would need to be 405 pixels wide by 315 pixels high.
  4. The upload button (#4) lets you find files on your computer and transfer them (upload) to your website.
image_upload

Uploading an image

Clicking on (#4) above will open the "Upload" dialog box below. To upload a new image, just click "Add" (#1)

The image name will appear in section (#2). If you made a mistake, you can delete the selection with the big red X to the right, or you can rename it using the small icon to the left of the big red X. If you're satisfied with your selection, click "Upload" (#3).

The image will upload and the red X will turn to a green check mark. Close this dialog box.

Your image is uploaded, but now you need to select it in the Image Manager. Go head and click on the image name in section (#2). This will update the information in section (#3) and more importantly, create the correct URL in the properties area at the very top. Click· the "Update" button in the lower right.

Theoretically, you've just uploaded a new image, and selected it and updated it. You should see this new image in your edit window. If you've updated the same file name, it will appear when you click Save or Apply and refresh the page.

Back to the Image Manager Window

The next section (#6) is all about styling the image on your page. You may want it to float it to the left or right while wrapping the text around it. (The image above is floated to the left with a 20 pixel margin just on the right side.) Click the drop-down selector "Alignment" and float your image right or left. Depending on which one you choose, you may want to adding some padding on a particular side of the image. Use the preview section (#7) to visually verify what you're doing is what you want.

When you're done, click "Apply" or "Save" in the upper right. As usual, "Apply" saves the document but keeps it open. This is good to check your document in your web browser. I usually keep several tabs open, one in the back-end (article manager) and another one navigating to the page I'm working on. After I click "Apply" I refresh the page my browser is pointing to and check to see if the changes I made show up how I think they should. Often you'll need to tweak your files to get the desired result.

Okay. Guess I'll grab that log and see if it's more painful. I'm guessing maybe the log is the way to go after all.

 
Home Tutorials Joomla Article Management Using the JCE editor