» Adding an image to a page
Adding an image to a page
Before proceeding to add an image to your page, open to the Image Placement & Styles page of the Research Theme Guide (which you can access by following the "Web Guide" link at the top of your Drupal site banner). Keep this page handy as you continue with the following steps.
To add an image to one of your pages in Drupal, you must first upload an image file to the page that you are editing:
- Begin editing your page by clicking the page's "Edit" tab.
- In the "File attachments" section of the Edit page (which you can expand by clicking), upload your file by choosing it from your local filesystem and pressing the "attach" button. The file will be uploaded behind the scene while your current Edit page remains on the screen.
- Next, in the updated "File attachments" section, un-check the "List" checkbox next to your new image file.
- Note that the URL to the new image is displayed in the file attachments listing. Copy the path part of this URL (i.e. the part after ".org") to your clipboard by highlighting it and pressing ctrl-C (Win) or command-C (Mac).
Now you are ready to edit your content and insert the HTML for your image. You need to enable one of the Drupal Input Formats that supports the direct entry of HTML code. See the "Input Format" area of the Edit page. On most AMNH Research Drupal sites, the input formats that support this are named "Full HTML" or "WYSIWYG HTML."
- (Only if you are using the WYSIWYG editor) In the WYSIWYG toolbar, click the "Source" button. Now you are editing the HTML source of the page.
- Using the example in the Research Theme Guide document (see above) for guidance, put in your div tag, img tag, and caption paragraphs. This is where you can paste in the path to the image file, which you copied earlier. (Ctrl-V [Win], Command-V [Mac])
- If you like, you can press the "preview" button at the very bottom of the edit page to check your work.
- To save your change, click the "save" button at the bottom of the Edit page.





