Activity Working with images in content

In this activity, we will do a number of things with regards to image content, and so we'll divide it into two sub-activities:

• Uploading and embedding an image

• Creating an image link

Activity 3.3a: Uploading and embedding an image

The specifics of uploading will vary with the tool being used. In this example, we'll use the upload functionality of imce, an image-uploading add-on to the Rich Text Editor that we're using.

1. Let's re-edit the same content that we used in the Creating a teaser break activity, and make sure that the editor is activated.

2. We want the image to be at the beginning of the text, so place the cursor there, and then click on the Insert/Edit Image button.

3. The Image Properties dialog box appears. At this point, we can name an image, or browse to it, if it is already on the server. As a prerequisite, our image has to be uploaded, so click on the Upload tab.

4. Assume that the image to be uploaded is located in the c:\temp folder. We'll click on the Browse button, navigate to the image, and then click on the Send it to the Server button.

5. If all goes well, then a success message similar to the following screenshot will be displayed. The image file will be deposited in a directory on the server. Drupal will have been configured to use the directory for uploads, and therefore will also know that it has to look in that directory when we wish to select an image.

6. We are now returned to the Image Info tab. The file's URL and dimensions have been filled in for us, and a thumbnail is also provided.

Image Properties

Image Info Link Upload AdvancEd

|.|-d ru pa I' d rupal-&. S/u^erfilES'^pleen jpt] Alternativ E Tekî

Ekowse S-erv Er


VAdth H Eight

210 210

Border HSpace VSpace Aign


M for

1 our. 3Q1 -n 1 ■ I

o, 1

7. We will now add some additional information. We will set the Border to 0 (this will prevent a blue box from appearing around the image when we make it a link) and Align it to the Right. Putting some descriptive text in the Alternative Text field helps with Search Engine Optimization (SEO), which is the manipulation that you can do to web site content in order to (hopefully) achieve a higher placement in search results.

8. Next, click on the Advanced tab. In the Advanced settings, enter the following text into the Style box:

padding: 0 0 3px 3px

This will set some whitespace between the text and the bottom and left edges of the image.

Image Properties ÜI

InisgE Info Link Upbad Advanced

Image Properties ÜI

InisgE Info Link Upbad Advanced

Id 1

Long Description URL

La ri g u a g e Direction La ng uage Code 1 <not s&t> _tJ I

Stylesheet Classes

Advisory Tide




1 padding: 0 0 3px 3px|

Olí Canctl

Olí Canctl

The line of code that we just saw is Cascading Style Sheet (CSS) code. Originally, positioning of all of the elements on a web page were done using Hyper Text Markup Language (HTML), as well as the formatting of those elements (type size, button colors, and so on). It N became very difficult to maintain with everything mixed together, not ( ) to mention that pages that were similar, had the same HTML repeated \3 again and again with a minor change needed in many places. CSS allows positioning and formatting to be separated from the page HTML, as rules, and referred to indirectly. Therefore, for example, if you want 12-point text that is blue anywhere, then you can have a rule defined once, and then simply refer to it.

9. Click on the OK button, and the image now becomes part of the body text.

10. At this point we can save the Node Content. After doing so, return to the front page, and you will see the image in our Teaser.

Music for Your Spleen

» Add nev.~ comment Read more

That's it for this activity. We've successfully uploaded and added an image to our content using the Rich Text Editor. But what if you don't have a RTE? Not a problem! The editor simply adds an HTML tag to the body text for you.

Inserting an image if you don't have an editor

Even if you do not have a Rich Text Editor, you will still need to transfer the image onto the server so that you can use it. Ask your site administrator about uploading the file using FTP. Once it has been uploaded, you just need to know its location within the web site. For example, if the file is myimage.jpg, then its location might be images/myimage.jpg. Your site administrator can help you with that, too.

Once you have the file in place, simply add the HTML tag into your body text just before the paragraph that you want it next to. Here is the simplest form of the tag, without the alternate text, border, or spacing options added. Note that the tag is standalone, and not in pairs as was the <a> tag earlier.

In the example above, img stands for image, src stands for the source of the image, and the final / is there because this is a standalone tag.

A tag containing all of the options we chose as well as the information that Drupal provided automatically, looks like this:

<img height="210" width="210" border="0" align="right" src="/images/myimage.jpg" alt="some alternate text here" />

This is an example of HTML. For the most part, HTML is composed of 'tags', information within angled brackets < > that define the content of a web page. Here, border is the size of the image border in pixels (in this case, none), and align defines on which side of the text the image should be aligned. alt is the text to be shown if the image cannot be found, or if the page is being displayed to someone who has chosen not to receive images. For example, a Text-to-Speech system can give a visually-impaired site visitor a description of what is present on the site. The height and width are the dimensions of the image, in pixels. The image will be shown at its original size if the dimensions are not specified. Having the dimensions set speeds up the page load, because the browser knows in advance how much space to set aside.

Activity 3.3b: Creating an image link

Now that we have an image in our text, let's use it as a link. Any image can be used as a link. Sometimes you may want to have a nice graphic for the reader to click on, instead of a text link or a standard button. On sites where images are links to themselves, such as in photo galleries, the image link might be a small 'thumbnail' that, when clicked on, leads to a full-sized version of the image. Internet users are used to images often being clickable. Here's how to do create such a link:

1. Re-edit the Node Content in which we just added the image.

2. If necessary, activate your editor. We'll use FCKeditor for our example.

3. In the Body box, click on the image once. Clicking on the image will cause handles to appear around it, as seen in the following screenshot.

4. Click on the Insert/Edit Image button.

5. The Image Properties pop-up box will appear. Click on the Link tab.

6. We're going to link the image to the full (non-teaser) version of the article for now. We can change the 'target' later, when we have more content. We'll enter /node/15 into the URL field, and then click on the OK button.

Image Properties 13

Image Infs Link Upbad Advanced LTRL


Target I <nut set>

I OK II Cancel

Bjawse Seiv er m

7. Save the Node Content, and then navigate to the front page and click on the image.

At the time of writing, the FCKeditor did not provide browse functionality to select Node Content for linking, so a link to the Node Content needs to be entered. The required link is the portion of the URL (when viewing the full Node Content) that follows the domain name. Therefore, with a URL of, the link «.^i—x would be /node/15. Every piece of Node Content has a node ID in the form of a number. There are two easy ways to find this number. One is to look below the Body box when editing the Content. The URL will be listed there. The other way is go to the screen where all of the Node Content is listed (admin/content/node), and hold your mouse over the name of your Node Content, which on that page will be a link. Your browser will show the URL assigned to the link, and this will contain the node number.

Was this article helpful?

0 0

Post a comment