Drupal Q & A: How do I add an image to a page or story?

While editing a Drupal story or page, you'll undoubtedly reach a point where you want to add an image. There are a few modules that can be used to insert and manage images differently, but I'd like to provide some steps for how to add an image using the image insert module we frequently use in our Drupal websites. Before adding an image, you should have some familiarity with creating and editing a story or page and your images should already be optimized to be the size you want them on the page.

First, begin with editing your page or story.

  • If there are images to place within the story, scroll down to File Attachments. Click Browse to find and select your image file.
  • Click the Attach button to upload it and attach it to your Story or Page.
  • Once you’ve attached your images to the story, they will display in a list.
  • The name of the file is shown in the field named Description.
    Uncheck the List button unless you would like the files to be listed after the story and available for download, or displayed in an RSS feed.
  • If you made an error and uploaded the wrong file, check Delete, and the file will be deleted.

    upload image

  • Now, you will add one of your attached images to the body copy of your story.
  • Highlight to select the URL of your image. Make sure you include the leading slash and use everything after the site name. Alternatively, you can select the name of the image from the Description field. Copy it.

    copy image file name

  • Next, scroll up to the Body area of the Edit screen. Insert your cursor just before the first word of the paragraph where you want to place the image.
  • Click on the Insert/Edit image button in your editing tools. It looks like a picture of a tree or a postcard picture.
  • The Insert/Edit image box will open.
    In the Image URL field, paste the name of the URL or file name.?
  • The URL should be formatted like so: /files/yourfilename.jpg (with /files/ before the file name). Make sure you are including the leading slash and use everything after the site name. If you enter the URL correctly, you will see your image in the window below. In some image editors, you may need to enter an absolute path URL: http://www.your-website.com/files/yourfilename.jpg.
  • Using keywords, enter an image description into the Image description field.
  • Using keywords, enter a title into the Title field.

    insert edit image

  • Click the Appearance tab next to adjust the positioning of your image.
  • In the Appearance screen, use the Alignment dropdown to select the alignment you prefer.
  • Select Right to put your image to the Right with text wrap on the left. Left will do the opposite.
  • The window will show approximately how your image will be positioned in the text.
    Nothing else in Insert/edit image should be adjusted. Click Insert to insert the image in the text.

    align image right

  • You will see the image in your text with the position and text wrap you assigned.
  • To add a border to the image, click on the image, and select border1, border2 or border3 from the Styles tools dropdown. If you make no selection, there will be no border.

    apply style class to image

    When you are finished editing your page, click Submit to save your work.

    There you have it! You now have an image in your page or story.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
4 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.