Home › Support › Knowledge Base ›

How to put images in Drupal content

Knowledge Base: Content Management, XHTML, CSS, HTML, Drupal
Updated: August 26, 2008

This kba is part of the series: How to format Drupal content

How do I put images in Drupal content?

Put an image into the Drupal file system.

  1. Create a content page (blog/article, if you haven't already) that you intend to use the image in.
  2. Attach the image file you want to use
    1. Edit the content page.
    2. Expand "File Attachments".
    3. Click the "Browse" button (and find the file on your computer).
    4. Click the "Attach" button.
    5. Click the "Submit" button at the bottom of the Edit form.

The file is now in the drupal filesystem and can be referenced from any page. Drupal files are stored in:

www.unicon.net/files

Reference the image in the content.

  1. Edit the content page.
  2. In the body textarea, find the place in your html to put the image.
  3. Input the following html:
    <img src="/files/{filename}" border="0" 
alt="{plain language description of the image}" />
  4. Click the "Submit" button at the bottom of the Edit form.
  5. Check and verify that the image appears. If only the alt text appears, your src reference is not correct. Try verifying the filename.

Here's an example:

Map to Unicon's corporate headquarters

Remove the link of the file as an attachment (optional).

  1. Edit the content page.
  2. Uncheck the "List" checkbox next to the image in the "File Attachments" section.
  3. Click the "Submit" button at the bottom of the Edit form.
  4. Verify that the file is no longer listed as an attachment.

Viola!

Add styling to the image (optional).

"screenshot" is an optional class you can add to an image that adds a border, drop shadow, and spacing to the image.

<img src="/files/{filename}" border="0" 
alt="{plain language description of the image}" class="screenshot" />

Which ends up looking like this:

Map to Unicon's corporate headquarters