Last updated January 15, 2014. Created by purrin on May 9, 2005.
Edited by jhodgdon, Fiable.biz, mgifford, math-hew. Log in to edit this page.

The Image module (in core as of Drupal 7) allows you to display and manipulate images on your website. It exposes a setting for using the Image toolkit, allows you to configure image styles that can be used for resizing or adjusting images on display, and provides an image field (using the Field API) for attaching images to content.

Since Drupal 7 image handling is part of Drupal core, for Drupal 6 you need to use additional contributed modules.

The Image module integrates the functionalities of the Imagefield module, and also parts of the ImageCache and (the Drupal 6) Image module functionalities for image manipulations.

Usage

Adding an image field to a content type

In a default installation, only Articles have an image field, but this type of field can be added to other content types (e.g. Basic page or custom content types) as well. An image field can also be added to a user profile, a comment, or a taxonomy term. An unlimited number of image fields can be added, each with a variety of settings such as allowed extensions, maximum file size and default directory for storing the images.

To control the way the image is displayed you must define styles (see below).

To add an image field to a content type:

  1. Choose the content type via Administration > Structure > Content types.
  2. Choose "Manage fields".
  3. Enter a label for the field, e.g. "Product picture", define a field name and choose "Image".
  4. Decide if there should be a limit on how many images can be attached (defaults to 1).
  5. Choose a default image for this field (optional).
  6. Define further settings, such as allowed extensions, maximum file size and default directory for storing the image files.
  7. Save the settings.

For more information on creating custom fields in Drupal 7 consult the Field UI documentation.

Add images to content

To add images to content:

  1. Choose Administration > Add content > [Content type].
  2. The image field will be displayed in the list of fields once you've added it to the content type (see above). Click 'Browse', then select and upload the desired image.
  3. Enter alternate text to improve accessibility and optimize it for search engines.
  4. Save the article.

Images can be added and removed from the node's Edit tab. If the node is deleted, all associated images are deleted with it.

Adding images inline

To use images attached to nodes via the Image module inline (ie. in your node body text) you can use the Insert module. It provides a button to easily add an img tag with the path to the image in the src attribute and styles of your choosing. Creating image styles (see below) with inline images in mind, combined with some CSS to set the float property, can give users the option to easily set content to display to the left or right of document text.

You'll want to go to "Manage display" for your content type to ensure the image is set to hidden, otherwise it will be displayed twice.

Adding and changing styles

Using image styles you can scale, crop, resize, rotate and desaturate images without affecting the original image. By default three sizes are defined: 'thumbnail,' 'medium', and 'large'. The thumbnail style, for example, is shown with the teaser for image posts and when browsing image galleries.

When you change an image style, the module automatically refreshes all created images. Every image style must have a name, which will be used in the URL of the generated images.

To create or change image styles:

  1. Choose Administration > Configuration > Media > Image styles.
  2. Add or select a style to edit its settings.
  3. When configuring styles you can add effects: crop, scale, resize, rotate, desaturate, and rotate (other contributed modules provide additional effects). For example, by combining effects as crop, scale, and desaturate, you can create square, grayscale thumbnails.
  4. Save the settings.

To start using the defined styles they must be assigned to the display of a content type. For each display (e.g. "default" or "teaser"), a different style can chosen.

To assign a style:

  1. Choose Administer > Structure > Content types > Manage display.
  2. Choose the display (e.g. "default" or "teaser") via the tab buttons.
  3. Click the gear wheel button to choose an image style; you are also able to link the image to the node.
  4. Save the settings.
  5. Check the content that contains the image style in question to see your new styles at work.

Setting image quality

You can specifically define the image quality on your site. Take into account that better image quality means bigger files.

  1. Navigate to Administration > Configuration > Media > Image toolkit.
  2. Enter the desired quality in the field JPEG quality.
  3. Save the settings.

Troubleshooting

To know more about your problem, log into your site as administrator and go to Reports → "Recent log messages" (/admin/reports/dblog).

The image doesn't show up

This may be a directory permission problem. When everything works fine, images seem to be generated when uploaded, when the node is saved or when a new image style is created. If you have a multisite installation and your website directory is sites/example.com/ , Drupal generates subdirectories and files inside sites/example.com/files/styles/ , for instance sites/example.com/files/styles/medium/public/field/image/landscape.jpg . (In a single site installation, it would be sites/default/files/styles/medium/public/field/image/landscape.jpg ). So check whether sites/example.com/files/styles belongs to the web server user and whether this user has all permissions on it. In Mageia 3, the webserver user is called "apache". Other typical names for it are "_www" and "www-data", depending on your operating system and distribution. To ensure that the directory "styles" is owned by the user apache and that the latter has all permissions on it, you can go to sites/example.com/files directory and run, in Linux:

$ su
# chown apache styles
# chmod u+rwx styles

(Or use "sudo".)

In some cases, you might have trouble with tokens. See Drupal 7.20's release notes, specially the last paragraph "Overall mitigation steps".

Troubleshooting image & gallery settings

In some circumstances, functions like adding images to galleries don't work unless Clean URLs are activated. (You get no result from attempting to add to galleries) More info on Clean URLs. [Related bug report]

Flushing or Rebuilding the Image styles

The Drupal 6 imagecache module was introduced into the Drupal 7 core. Since then, the option to 'flush' the image presets has changed. In the Drupal 7 UI, this 'Flush' image styles preset option was removed, but now, just resaving your image style will flush the image cache. If you need to flush all image styles (eg. after adjusting the JPEG quality), you can execute drush image-flush, use the Image style flush module, or run the following code (for instance using Devel):

<?php
// Flush all image styles in Drupal 7.
foreach (image_styles() as $style) {
 
image_style_flush($style);
}
?>

If images are not generated at all, check that HTTP error 404 is handled by Drupal. This is set by default in Drupal's provided .htaccess.

Drupal 6

Unlike Drupal 7, Drupal 6 has no core Image module. You add image functionality in Drupal 6 by using a variety of different contributed modules.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Please don't post requests for general help with setting up this module here: those should go in the forum or the issue queue.

Comments on handbook pages should be used for corrections and clarifications and questions specifically about the content of the page.

Hi anybody help me out please . i want to make a gallery in drupal 7 like an image gallery in drupal 6.
how to make a taxonomy based gallery in drupal 7 is there any module? please help me.
thanks
Meenu

Drupal 7 (Drupal Newbie)

I suppose this is a common need, but did not found any HowTo, “Putting it all together”:

1) I need a collection of photos with Title and some Description.
--> I suppose I have to create a new “Photo” publication type, with an Image field, occurring once (Maximum number of values=1) and a Taxonomy field to group photos by albums (?).
2) The internet site visitor can choose how to display this collection:
2a) Single items (one photo per side) with previous and next Buttons, to browse through the different items of the collection.
2b) A thumbnail view page, a lot (all) of items on one single page, and links to the full view of each image.
2c) A slideshow view, showing one image at a time, browsing automatically through the different images of the collection.

JavaScript: Displaying has to work with browsers having JavaScript disabled. Slideshow can “degenerate” to a manual mode but must work.

3) I want to publish some of these images (images existing in “Photo” nodes) in other publication types, without constraints: The publication type will not have any image fields.
The publication author has one big “free format” HTML area where he can insert any, in “Photo” nodes existing, images on any position in his text.
He may choose to:
3a) include a preview image.
3b) include a preview image with a link to Photo Item (Node). (Same Window / New Window)
3c) include a preview image with a link (popup) to the image.
3d) include a thumbnail image.
3e) include a thumbnail image with a link to Photo Item (Node). (Same Window / New Window)
3f) include a thumbnail image with a link (popup) to the image.
3g) include a link to Photo Item (Node). (Same Window / New Window)
3h) include a link (popup) to the image.

4) Last at not least, the author needs a convenient way to select/pick up the desired picture from the “Photo” nodes pool, by sorting/filtering on “album”, Title, Description, Date, ... showing previewing thumbnails, and so on, and to choose the desired insert (display) mode.

Which (active) module(s) are most suited for these needs? (Drupal 7 compliant, with a fair chance for being maintained in the future.) (One module fits all requirements would be great.)
HowTo proceed to realize this needs?

You've explained how to put images INTO drupal 7, but what's the point of it if there's no way to get an image OUT of drupal? For example, if i create a basic page (say node/9), and i want to display on the page a thumbnail of an image (already uploaded as node/8), what is the link that has to be used??? is it something like node/8/thumbnail?

I've tried searching for an answer everywhere with no luck.. is it possible that people are putting images into drupal with no intention of getting them out again? I don't understand

Use views for displaying content(including images). CCK = content in, Views = content out.

"Patience Luke, Let the object of your desire come to you." -- Obi Wan Kenobi

The easiest way to include an image with a basic page is to add an image or file field to the basic page content type. Then, the image style (ie thumbnail, large, small, etc) that is displayed when the page is displayed can be controlled by the image style you set in the admin/structure/types/manage/[your-content-type]/display for the image field.

For images that are their own separate nodes, you can add a term reference field to the image content type and the basic page content type, then use Views to establish a relationship between your image nodes and your basic pages based on the term reference values.

ReggieW

Somehow "Manage Fields" does not show up anywhere in my D7 install

Are you looking under the "operations" column, corresponding to each content type? On my D7 install, next to each specific content type, there are options for various operations such as "edit", "manage fields", "manage display" and "delete".

Also make sure the Field UI module is enabled on your site.

I think the built-in Drupal 7 core image module works great except for one thing: Back in Drupal 6 and CCK it was possible to un-list certain images (hide them from display in full node view). In node edit page there were check-boxes next to each uploaded image that made that possible.

In Drupal 7, this is possible for attached files but not for attached images. The function disppeared for images as imagefield moved into core.

I would love to see that function back. Thanks.

I agree completely with this sentiment. Why is there no option for display/list? File fields have the display field available.

There are some good behavior options that are missing because of this lacking feature. If you want to use a combination of Insert module and automatic display of some images, it is currently not possible.

One could use an image field for images displayed using a fixed formatter and a file field for inline images inserted using the Insert-module. There is nothing wrong with using the file widget for images files, and I believe separating images into one field for "gallery" type images and one for insertable/inline images makes sense from a usability-perpective as well. Just add a file field and call it "Inline images" or similar, set file types to "jpg jpeg png gif" etc. and use Insert to insert the images into the body.

I agree totally, that is a good solution.

Hi anybody help me out please . i want to make a gallery in drupal 7 like an image gallery in drupal 6.
how to make a taxonomy based gallery in drupal 7 is there any module? please help me.
thanks
Meenu

I fully agree with this need that I think is essential.

In Drupal 7, I have several galleries using the same "type" and image gallery. I have set the image style from default to scale - put my settings in and it's not scaling!

I have spent hours fiddling - trying to figure out what I am doing wrong and am stumped.

For an example of my challenge please refer to ...http://amwdoorandwindow.com/Cabinetry

If you then venture to the Door portfolio page (http://amwdoorandwindow.com/Doors) you will see that I avoided this issue by sizing the first 8 pics in Photoshop (adding a border) on a template so the size of the photo is consistent - but that defeats the purpose of my client being able to load his own photos.

Any help, guidance will be greatly appreciated.

Amy

You have to use "scale and crop" image effect not "scale" only. When you use a galley style like that one, all the small images have to be the same width and height. Good luck.

I followed the documentation above and also found the following post helpful. The author focuses on TinyMCE, but I got this working with CKEditor also.

Configuring and Adding Images to Drupal 7 Content with Wysiwyg, IMCE and Lightbox2
http://drupal.cocomore.com/blog/configuring-and-adding-images-drupal-7-c...

I tried to provide near equal coverage of TinyMCE and CKEditor so that it would be helpful for anyone setting up IMCE with Wysiwyg. I think a lot of it would still be helpful (the IMCE configuration) if you are setting up a non-Wysiwyg-integrated editor, too, such as the BUEditor now in use on Drupal.org. In the next day I should have a new post up about BUEditor, which I'm planning to move Cocomore Drupal to, as well (I discovered it a few months back and decided I liked it better than CKEditor, which we are currently using, although there are some pros and cons to both. It took me a while to realize just how extensible and customizable BUEditor is and now that I've added fields to the "add image" dialog and changed other defaults, I'm really happy with it (in local experiments), so hope to set it up on Drupal.Cocomore in the next day or two.

drupal 7 and drupal 6 are quite different, its good they give new things to us but they should understand rarely people know the extentions and measurement they should mentioned in the help list. I found some solution like "crope and scale" as someone also mentioned before.

What about the ability to assign any link to an image? So the image is a link to "any href". This seems obvious. A basic need for any web page.
(without rewriting hook formatters, using template, css, or views! ).

Insert Image

Options:
No Link
Link to Image
Link to URL.

Subscribe!

Starting to rewrite image.field.inc

Changes: + etc..
Need help with the last + code in the

<?php
[UPPERCASE AREA]
?>
..

<?php
/**
* Implements hook_field_formatter_settings_form().
*/
function image_field_formatter_settings_form($field, $instance, $view_mode, $form, &$form_state) {
 
$display = $instance['display'][$view_mode];
 
$settings = $display['settings'];
 
$image_styles = image_style_options(FALSE);
 
$element['image_style'] = array(
   
'#title' => t('Image style'),
   
'#type' => 'select',
   
'#default_value' => $settings['image_style'],
   
'#empty_option' => t('None (original image)'),
   
'#options' => $image_styles,
  );
 
$link_types = array(
   
'content' => t('Content'),
   
'file' => t('File'),
+  
'url' => t('url'),
  );
 
$element['image_link'] = array(
   
'#title' => t('Link image to'),
   
'#type' => 'select',
   
'#default_value' => $settings['image_link'],
   
'#empty_option' => t('Nothing'),
   
'#options' => $link_types,
  );
  return
$element;
}
/**
* Implements hook_field_formatter_settings_summary().
*/
function image_field_formatter_settings_summary($field, $instance, $view_mode) {
 
$display = $instance['display'][$view_mode];
 
$settings = $display['settings'];
 
$summary = array();
 
$image_styles = image_style_options(FALSE);
 
// Unset possible 'No defined styles' option.
 
unset($image_styles['']);
 
// Styles could be lost because of enabled/disabled modules that defines
  // their styles in code.
 
if (isset($image_styles[$settings['image_style']])) {
   
$summary[] = t('Image style: @style', array('@style' => $image_styles[$settings['image_style']]));
  }
  else {
   
$summary[] = t('Original image');
  }
 
$link_types = array(
   
'content' => t('Linked to content'),
   
'file' => t('Linked to file'),
+  
'url' => t('url'),
  );
 
// Display this setting only if image is linked.
 
if (isset($link_types[$settings['image_link']])) {
   
$summary[] = $link_types[$settings['image_link']];
  }
  return
implode('<br />', $summary);
}
/**
* Implements hook_field_formatter_view().
*/
function image_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
 
$element = array();
 
// Check if the formatter involves a link.
 
if ($display['settings']['image_link'] == 'content') {
   
$uri = entity_uri($entity_type, $entity);
  }
  elseif (
$display['settings']['image_link'] == 'file') {
   
$link_file = TRUE;
  }
+  elseif (
$display['settings']['image_link'] == 'url') {
+   
$link_url = TRUE;
+  }
  foreach (
$items as $delta => $item) {
    if (isset(
$link_file)) {
     
$uri = array(
       
'path' => file_create_url($item['uri']),
       
'options' => array(),
      );
+ }
+ elseif (isset(
$link_url)) {
+    
$uri = array(
+     
'path' => [SOME URI INPUT FROM A FORM INPUT TEXTBOX (STORED IN THE DATABASE?) OR AN URL GIVEN BY THE LINK MODULE] /** file_create_url($item['uri']),*/
+       'options' => array(),
+     );
    }
   
$element[$delta] = array(
     
'#theme' => 'image_formatter',
     
'#item' => $item,
     
'#image_style' => $display['settings']['image_style'],
     
'#path' => isset($uri) ? $uri : '',
    );
  }
  return
$element;
}
?>

Did you ever figure out the problem and commit this code, or do you know if this feature was ever implemented. I would really like this feature to be added.

Thanks.

Hi there, thanks for the article on Gallery. I have got a problem that the images appear one below the other where I've selected for them to stand one next to each other. I've been implementing this through choosing rows and columns (essentially 1 row many columns). Where am I going wrong? Thanks Elke

Hi Elkem,

Support questions are handled in the support forums, e.g. the one for "post-installation" questions.

I state: I'm not a coder.
In D6 I used the usefull submodule image-galley ( http://drupal.org/project/image )
In D7 this submodule seems to be lost.
I miss it so much.
I love its way to manage the galleries (and mostly the subgalleries) by taxonomy.
Expecially in the community website it was a fast and simple way to let people upload images in a well ordered way without users (the dummies too) ask for a non-stop help about pubblishing images.

to admin galleries:
/admin/settings/image/image_gallery

to manage galleries:
/admin/content/image

a sample url of a gallery:
/image/tid/5

In the new content page there was a tree with the structure of the galleries and mostly the subgalleries.

Now in D7 the module (the features) they say it is implemented. I trust, but I don't find the way to do what I need for.
I tried the 7dev version of the module
http://drupal.org/node/3256/release?api_version%5B%5D=103
but it give a lot of errors and problems, and the galleries they aren't available.

So now I got 2 wayout:
1. I downgrade to D6 (with a lot of time wasted and a bad protocol followed)
2. I try to emulate the gallery system via Taxonomy + View in D7 (in this case I ask if can I use the feature import/export of view from D6 to D7)

Every help will be appreciated

fab
---
The gratest and best man, alone, never will overbear two perfect idiots well organized

Doing an image gallery in Drupal 7 is ridiculous. It requires dozens of modules, hours of messing around, and in the end you go back to D6 and hope that D7 is finished one day.

A gallery is the most basic requirement of 90% of websites. You should not need a BSc in Computer Science (which I have) to be able to add a gallery of photos to a website.

If Drupal hopes to compete with WordPress, then there should be a Gallery module that is core. Image Galleries wasn't perfect, but it pretty much worked out the box.

There are 10 kinds of people in the world, those who understand binary and those who don't!
InterComm South Africa (www.intercomm.co.za)

Media Gallery (withe media module) is the only one soultion, But I believe that it's impossible to do subgalleries

fab
---
The gratest and best man, alone, never will overbear two perfect idiots well organized

Hi,
I am new to druple however worked with core PHP since 2 years. I chose responsive theme for my project where in I would like to upload images on run time (for the slider), there is no option to do so.
So, I am looking for a module which can upload images and gives me the path with file name so that I can save it in the slider image path and show them.

here is code for one of the image of slider. I dont need href so I can use same path for image source.
In this theme image path (for slider) is hard coded which I would like to customize as per my project requirement.

<a href="<?php print url($url7); ?>"><img src="<?php print base_path() . drupal_get_path('theme', 'responsive') . '/images/slide-image-7.jpg'; ?>"/></a>
                             <?php if ($cap7): ?> <div class="flex-caption"> <h3> <?php print $cap7; ?> </h3> </div> <?php endif; ?>

I hope I am clear to my concern. If you need any more clarification then please let me know.
Thank you in advance!

Jag

I have enabled the alt tags but i see nowhere to add them when using an Image Field in a content type.

the image alt tage is added but just "alt>" at the end of the image tag.

removed

Just an old guy. "When I learned programming we were punching cards...uphill...in the snow."