Adding and Styling Images in your articles

First up, I STRONGLY RECOMMEND you download the JCE Editor because the default content editor in Joomla is just not worth the stress when creating your content. The JCE Editor is a very robust wysiwyg (What you see is what you get) application that greatly enhances the tools and functions of creating and editing content from text to images to other forms of media that you add to your page.

This editor is the one you will want to use for your images (which is the topic of this setup tutorial) because again, the image button that you see at the bottom of your Joomla default editor (see below) is also not worthy of the stress because it really lacks a lot of functionality and very limited.

joomla-image-readmore

So the idea here is NOT to use the default Joomla editor and NOT to use the Image button. Unfortunately there is one sacrifice in not using the default image button which is the loss of the Image Caption feature which the JCE Editor does not have as part of it’s free download; you need their subscription to get that added plugin. However, if you plan to use captions a lot on your images, then I would definitely say it’s worth their subscription.

Pixel Linear Image Styling

When you insert an image using the JCE Editor, you get a lot of options available to you, including settings to apply to your image like alignment, borders, etc. I added custom image styling to the Pixel Linear template styling so this is how you will add images…

Step-1 Create Your Article

First thing you need to do is write up your article before you start adding in images because this will be easier.

image-editor1

Step Two: Add Your Image

On the editor, you will find an image button to click on. In the screenshot above, it’s in the bottom row next to the icon with the paper and hand. When you click on the “Insert/Edit Image” button, a popup window will show. You will want to first find your image if you uploaded it using your Joomla Media Manager, or if you still need to upload it, you can do it directly from this window with a small icon to the far right above the Details pane that has a green arrow. When you have your image, click on it so that it shows up in the Details pane and it’s dimensions will automatically show above.

You can change the Alternate Text field (ALT) to your own preference as this will do it for you based on the file name, but DO NOT set any other attributes because we want to go to the ADVANCED tab for our styling. These settings are for custom image placement and for any templates that do not offer custom image styling:

image-editor2

Step Three: Add Styling to the Image

We want to go to the ADVANCED tab because in this settings located here, you should see styles for this particular template (Pixel Linear) that are set from the custom editor css I included for you. In the CLASS LIST dropdown, select the “alignment” that you want…the most common is alignleft. When you select this, it automatically gets added to the CLASSES field below it. We just have one last style to add to this ourselves, which is called “border” and as the name suggests, it’s the style that adds the nice bordering around the image…hence “border”.

NOTE: When you type in “border” into the field where it shows alignleft, make sure there is a single space between that style and the one you are about to type in.

 

image-editor3

image-editor4

When done, click the INSERT button.

If all went well, your article should now look something like this:

 

image-editor5

Adding an Image Caption

Adding an image caption to your pictures or other graphics is not really easy with the default Joomla editor because it’s missing a lot of custom styling features that you need. However, I have provided you an HTML Snippet of code that you can use as a mini-template for your articles which will add a caption to your article image. The Pixel Linear template already has this styled because I have it from the WordPress version of this template. Fortunately for WordPress users, their image caption setup is easy and no snippet is needed.

So to add a caption to an image, here is a sample of what it will look like using the image I’ve used in this setup tutorial, first is without and the second one is with caption:

image-caption

The HTML Snippet below is based on the code that WordPress uses and with the styling I have in this template, you just need to modify the caption text and of course the image path which you can just insert in your article, paste this code where the image is and copy and paste the image path into the snippet:

<div class=”img-caption alignleft” style=”width: 230px;”>
<img src=”image-path” alt=”description” title=”title” class=”image” height=”270″ width=”220″>
<p class=”img-caption-text”>Gorgeous</p>
</div>

It’s not the best way of doing it but image styling for the default Joomla setup is too limited.

A Better Image Caption Method

There is one alternative, although I have not tried it yet, but the JCE editor that I recommend does have a plugin for image captions. You might want to check that out because it’s a plugin for the Editor here and it’s made by the same people who do the JCE Editor. Basically it adds a caption group of settings to your image popup manager and lets you even style your caption.

By | 2010-09-25T04:02:06+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply