Drupal Articles » Documentation case studies » How do I add images to my Drupal site?


By David - Posted on 30 August 2008

User information

A new Drupal user, who has just recently installed Drupal 6. No knowledge or understanding about how Drupal works is assumed. I installed Drupal 6 because, of course, it's the newest version, and I don't know that "contributed modules" might not yet be available for it. I may have some prior experience with other content management systems, which might affect my assumptions about how Drupal works. My computer skill level is at least intermediate.

Goal

To find out how to add images to my new Drupal site.

Steps Taken

  1. Tried using the search form: "add images to Drupal". I clicked some of the results, but they are all people asking the same question as me, many with no reply, or else displaying dizzyingly complicated PHP code. Tried the following searches as well, with no better results: adding images to drupal, images in drupal, including images, how to add images. I've now given up on the Search feature. (note: a search for just "images" was the only useful search, leading only to Image module, but this user didn't use that search).
  2. Clicked the main Documentation tab.
  3. First tried Getting Started and found nothing after several minutes.
  4. Moved on to Beyond the Basics.
  5. After about 5 minutes of clicking many many links and finding very little (e.g. I found HowTo > Node Listings with Thumbnails using Drupal 5.1, CCK and ImageCache ... but this is way over my head, and anyways it says Drupal 5.1), I finally came across Beyond the Basics > Contributed modules > Asset and media management modules (http://drupal.org/node/206708). This page is a "start" but still not what I was looking for, and I was lucky to even find it in the place it's categorized (since I'm a newbie, I don't know what a Contributed module is... I'm looking for how to add images - I don't even know yet that I'm going to have to install a "contributed module" to do this). But I've found this page now, so let's see if it helps. I'm a newbie and the word "Asset" doesn't mean anything to me (and "Media" sounds like audio/video to me), but I happened to notice a few instances of the word "Image" in the listing of sub pages, so I think this might be worth looking into.
  6. Clicked on "Asset Manager" since it's first. Hmm doesn't make a lot of sense to me. A comment below on the page says it doesn't work, so I'm moving on.
  7. Clicked on the next link, "Asset: Unify asset file management". The screenshots are a welcome surprise, though I'm not sure what they mean. I don't see any mention of images though, so this couldn't be what I'm looking for. Moving on.
  8. Clicked on "Embedded Media Field: Third Party Videos, Audio & Images". This looks pretty scary to me. It mentions terms like fields for nodes, CCK, %YourType%, and I've also noticed the version info at the top right. I'm using Drupal 6, so I must be in the wrong place. Ah now I see this is for embedding images from "other" sites. Moving on.
  9. Clicked "Gallery: Embed Gallery2 in your Drupal site". Galleries have images, so maybe... nope this won't work. It wants me to install some other software besides Drupal.
  10. Clicked "Image painter". Woah! Scary. Moving on.
  11. Clicked "Image: image nodes, attached images, and galleries". Ahhh now this is looking more promising. I don't know what "Each image is stored as a node" means, but I'll keep reading. I've now read this page, and this looks like the way to go. But I see a few "more" mentions of images in the menu and have started to grasp at this point that there are a variety of possible ways to do this. I bookmark this page, and decide to have a peek at the other image links just in case.
  12. I click "IMCE: Image uploader and browser". Uh oh. This looks promising too. Now I'm not sure what to choose. I click the link to view the IMCE 6 Demos. I click the "Image" icon, but at first can't figure out how to do anything here that has to do with images. Ah there's a little weird icon next to Browse. And there it is, IMCE. Not bad. I decide to click back and watch the screencast to learn more about this. Oops, the link to the screencast is broken.
  13. I take a quick peek at the menu to see it there are yet more image modules I need to look at. I see "Img package: Easy way to display images in posts & comments". Nice! It says it will be easy - I click the link. I read a good bit of info on this page and decide to click on the link to the Img Package project at the top. What?! This module has been "abandoned"? Why didn't you tell me that before while I was reading all that stuff on the previous pages?
  14. I take a last glance at the menu and see no further mention of "Images". So this must be all there is. (of course I will hear about a variety of other image modules later that weren't listed here and be confused at why I hadn't known about them earlier).

Post test notes

  • The results of the test were not promising. I had a particular page in mind that I've read in the past, which compared a number of the image module options, and was unable to find it despite my own best efforts. If I couldn't find it, even knowing it was there somewhere, a newbie would only find it by sheer random luck.
  • The page I did find the most information on was not ideal. It was cluttered with a mixture of different media-related modules, some of which have become abandoned or outdated, and definitely did not represent most of the available options (all would be difficult of course, as it changes so rapidly). In particular there is no mention easily found regarding Imagefield and Imagecache.
  • The page I found also required me to muddle through documentation of varying quality on each possible module, trying to decipher the merits of each to see if they meet the needs of my site. There was no concise all-in-one place overview of what options I had to choose from - I had to read through overwhelming reams of information about a variety of modules, almost blindly sifting for key info to help me decide if the module would suit my needs (this might be ok when it comes to more advanced or specialized modules down the line for the user, but this is "images", and likely one of the very first things a newbie is going to look for).
  • Drupal.org's search feature was almost completely useless in this case. It found almost no relevant results for just about every query I could think of (or at least a newbie is likely to think of).
Tags — 

This is absolutely spot on. As an experienced computer user and software developer, but Drupal newbie of a couple of months, this is so like my own unsatisfactory search. For the time being I've given up on images in Drupal and shall probably just add a few 'img' tags to photos hosted off site.

I'm also quite confused on how I would organise stuff if I did upload it. My impression is that it all gets hurled into one enormous 'files' directory, with no organisation. I feel sure this need not be so, but I'm reluctant to go reinventing wheels that I'm sure are solved in some corners of the Drupal community.

I can't begin to tell you how accurate this is.

I'm considering going to v5. At least the image related stuff is not in alpha or beta. From my point of view, the Drupal core should handle pictures much as well if not better than WordPress.

..the idea behind drupal is great. But the current system is simply unusable. Basic things which almost every twenty-lines-php-cms can handle, drupal seems overstrained with.

David's picture

Please be specific, or your comment is not helpful at all. I and many others happen to disagree with you and find it to be a terrific system, however there is plenty of room for improvement. If you suggest or offer solutions, then it can improve. You're clearly frustrated with Drupal - what is the issue that you're stuck on?

Edit: you mentioned getting a blank screen (in your email)... I have not been able to reproduce this by any means. Please let me know your browser, OS, and versions so I can test in those.

Boy, this is scarey. It is almost identical to the real process that I went through. As I researched, I kept thinking "I can insert an image in three seconds with mark-up hand-coded in xhtml but with Drupal, I'm now on day two of a full work-day trying to figure out how to add images -- and enable office clerical staff to later insert them easily." I still am confused, although I now know there are several options. Why is an image a node? More important to me is: Why should it be a node? What's the benefit?

I'm now at month six of site creation and embarrassed at how slow I am. Every step I need to take requires research/study, which is fine with me. But, the study takes days or weeks. My boss, who doesn't know squat about web site development, doesn't understand the slowness and wants the site up yesterday.

I'd like to see documentation that targets several different "publics" as we call them in public relations. Public One would be the newbie without programming skills but xhtml/css. Public Two would be the newbie with programming skills but no xhtml/css. ....and so on, so forth..

We need "documentation tracks" for different levels/types of Drupalers.

Now, I'm onto my next task; maybe you can write text on this, also. I'm needing to create section landing pages. I'm using a tpl.php I've created from scratch. I thought I'd be able to use, for example, page-about.tpl.php for the landing page for the 'about' section but I think I've discovered that if I used pathauto (which I've just learned about) that I'm going to run into trouble with what I think should be a simple task. I'll need to insert php code into template to create the page suggestions in 6x. I read the documentation. I reread the documentation. I reread it again. I got a cup of coffee. I scribbled on some paper. I reread. I called someone. I reread. Well, the only thing I still know is that I need to add php snippet into template file. I don't understand where in the file to add it; if I need to modify/customize the snippet for my site; and if I do have to modify, how to modify? So, here I sit. Searching.

David's picture

Section landing pages... there's a number of approaches to take, and the one you choose depends on the needs of your site. I do not recommend making multiple page-something.tpl.php files except as a very last resort, as this adds exponentially to the amount of code you have to maintain, making changes in many files when ever you adjust one of them. Always make use of lower level templates and other techniques (for instance body classes) before making more page.tpl.php files.

I do hope to make a full guide on the issue, though here's some current info I can point you to:

  • I wrote an analysis of how the home page for drupalsn.com is likely made and in it I discussed the idea of using a "Section" CCK type to make nodes as place holder pages for main sections of a site. You can read the analysis here. This approach is pretty straight forward. I also explain the idea of providing specific blocks to display at a certain path, and style into position with CSS. Replacing the "Home" aspect with "Section" this guide also touches on the same concept: Creating a home page using CCK. Once you have a node that has a certain path, you can have blocks or other more advanced data show up at that location.
  • Consider using Panels module. Version 2 might be the most stable choice for now, though you will have to wait for an upgrade path to 3. *Edit: I used Panels 3 on a site I'm working on the other day, and it works quite well.
  • If appropriate, consider creating Views as these landing pages. You can then augment the main view on the page with additional blocks and other content. Set the View's path to what you need, e.g. about.
  • Here's a more advanced method that would let you register your own pages in the same way that a module does. This is a trade off that gives greater flexibility direct in code, but on the other hand requires understanding and working with the code. Again this one mentions the "Home" page but the concept applies to anything else too.

1. have a clean install of drupal 6, go to create content -> page
2. file attachments -> select image -> attach it (Uncheck "list" checkbox so it won't appear for download after)
3. take the link of the jpg from the attach information go to body and write
4. select full html Input format and hit save

tadaa : image in drupal no extra modules required, no extra settings only clean install of drupal 6

errm .. where I said write .. it's < img src="link" / > but without spaces after < and before >

I am trying to follow your instructions here and it is not working. The image is not being shown at all.

I solved the problem by editing the Full HTML filter and adding to the list of allowed html codes. After that, everything worked.

David's picture

In case it wasn't clear, this is a documentation case study seeking to understand the difficulties users "do" have handling images in Drupal (I am a member of the Drupal documentation team). The idea is to put myself in the shoes of an entirely new Drupal user who has to figure out the "image handling" situation from square one, based on the info they are able to find on drupal.org (before resorting to asking for help)... the information they find is not actually helpful in many cases in leading them to the correct solutions.

Your solution is viable of course, for a user who is both proficient in HTML and also does not mind the inconvenience of this method (when much more user friendly solutions are possible). The goal however is image handling that is simple, scalable, flexible, and possible for users with zero HTML required. This is what various other CMSes do (and Drupal can too - it just isn't very obvious which modules are needed to do so, or how to configure them once they are found).

hmm I understand .. and you are right it is a little bit awkward and a newbie won't nail it very fast :)

what about a button near the "split summary at cursor" thingie from body section of create content, that would do I just said but without the user seeing the steps , just press "Attach image" .. select it and bam inserted in body ..

well .. from idea to seeing that in core is a ling way ...

I agree. If it comes to getting up to speed with Drupal this "finding out how to add an image" definitely slows a newbie down and discouraged me (ref:date posted). This slowdown is mainly because of a naming convention. The "file attachments" option when creating content should get a name such as "Add non-text items such as jpeg, gif etc." or "File attachments - E.g. jpeg, gif..." Anyways, when I was searching with similar keywords to find out how to add an image I stumbled upon this: http://drupal.org/project/usage

This should be in the introduction paragraph of starting with Drupal for newbies. It showed me how awesome Drupal is and which modules I should first download to access the full potential of this CMS including advanced image uploading, editing etc. Way to go developers!

I'm glad that some people are having an easy time, but I too have a clean install of Drupal 6 where if I go to create content -> page there is NO file attachments option.
As a pretty experienced programmer/web developer/CMS users Drupal is just so opaque and I can't see me using it in place of Joomla! in the near future. It's got some very attractive concepts in it's design but it's usability for an average client is poor.

you need to enable the upload in the modules and save configuration so that you can see the file attachments option

6 month trying to use Drupal. It feels less like a content management system and more like a module management system + google. I don't know how many pages I had to read to install 29 modules. The gap between a usable site like, whitehouse.gov and a stock install of drupal is so far apart that it seems like it is faster to write a CMS from the ground up. I also noticed a bad sign.. google doesn't seem to be able to index drupal based websites well. For example, I had a really hard time finding tutorials and such using google relating to D6. Almost all the results are for D5. hosted on Joomla. :/

Ha ha ha, I got the biggest laugh out of reading your case study that so agonisingly depicted my own newbie wanderings into the murky world of Drupal = world of Pain.

Eyes glazed......weeks later, I get here via your post on drupal.org

I think sometimes coders are akin to magicians: they don't want to give away too much information or noboby would pay them anymore to do the magic.

Thanks for a great article and your tips on drupal.org.

Been a programmer with 20 years experience didn't help much with learning Drupal. After spendin 3 month and reading 4 books on Drupal, I just start feeling that I can do something finally... And how many times I thought about changing to Worldpress or Jumla...

Hi,

Nice thread.

I'm also a Newbie on Drupal and don't have any knowledge in HTML, but found how to put images on a Drupal Page.

Articles already have how to insert images, but common pages dont, so here's how.

If you are using a localhost whit WAMP, copy past a image in:

C:\wamp\www\drupal-X.X(your Drupal version)\sites\default\files\field\image

If you are using a webhost use Filezilla to uploas the image to the host to:

ftp://(yourwebhost path)/drupal-X.X (your Drupalversion)/sites/default/files/field/image

Now the image is in the place to be uploaded. I still didn't try to make a sub-folder to organize, but you can do that (probably).

To get the image while in Drupal, you need to put some code in the Body of the content place.

<img src="ONE OF THE PATH ABOVE" alt="DESCRIPTION OF THE IMAGE" />

Now you have the file in the right place to be downloaded to the page, and you have the code to do it, with the right path imbeded.

Note that, that code line is very simple. If you want to move the image, find on the web what can you do to the image using html code.

P.S.The Body of the page must be in Full HTML mode.

And that is how a complete nooooob finds how to put a pic in Drupal...

Hi there,

Just happened upon this thread from quite a while ago while doing some research.

I highly recommend installing the BUEditor module. It allows file uploads from the node edit page (via toolbar button). There's a slew of settings you can adjust, including which folders to allow users to upload to. You can create the folders as admin (or back-end) and then allow users to choose the correct folder to upload to, like "documents" or "images" for instance, and sub-folders within each.

The attachment module works, too, but make sure to un-check the "list" option and manually link to files or images, as it just creates an ugly list of files/links at the end of the web page.

Cheer,
 BB

Be sure you're clicking on "Full HTML" under "input format" when you create pages, otherwise you'll run into issues with the image showing up, as well as text formatting. This drove me a little crazy when I first played around with Drupal, too.