Home / Comment permalink

Drupal How-To: Basics, tweak the defaults for adding images to your site

By Heather

In this 3 part Drupal How to series, I'm going to show you how various options for configuring images on your site. Here, in Part 1, we'll see how to tweak the default image options. In Part 2, we'll see ways to allow WYSIWYG and inline images. In Part 3, we'll see the latest options for responsive images.

What can Drupal do with images out of the box?

I first sat down to write a tutorial (and some Drupal.org documentation) about the many new ways you can manage responsive images with Drupal. Then I woefully remembered seeing a client site in Drupal 7 where they were requiring users to upload both a fixed-size “thumbnail” and “fullsize” image for display on the site. I realized that before we go into any advanced tips, many new Drupal users are probably missing tricks on how to just tweak the defaults. You can get all these configurations with just the Drupal 7 core image handling.

Image handling defaults

1. The default article content type example.
2. Let Drupal resize and crop the image.
3. Allow authors to upload multiple images. Use CSS in your theme to change how they align.
4. Add another image field among other text fields. Let Drupal resize the images.

So in part 1 here, I just want to establish how you can tweak the defaults for image handling in Drupal 7. In part 2, I will show alternative solutions for inline images, and in part 3, we’ll see how to set responsive images for your site.

The defaults

In Drupal 7, you can upload images to your site when you add articles. The article content type has an image field, which appears below the body field when you add or edit articles.

Image upload

When the image appears in the published article it’s below the title and above the body text using an image style preset called “large”. The “large” image style is pre-set to a maximum height or width of 480px. It’s important to know, all of this is tweak-able.

The official documentation on Images in Drupal 7 is very thorough, but somehow I still see users resizing images with CSS or do other weird workarounds.

Tweak the defaults

You can display the image as a thumbnail on the front page, and then as a larger image on the front page. Go to Structure > Content types and “manage display”. Click the "Teaser" view mode and change the image setting.
manage display

You can re-order where the image shows up in the flow of content, such as under or below other fields. The placement on the editing page doesn’t have to match where it shows when published, though that can help editors. Go to Structure > Content types and “manage display” for any content type you want to tweak.

You can change the image style presets, changing the size, adding crop, or even a rotation. Go to Configuration > Media > Image styles.
Style presets

You can allow users to upload more than one image. For example, articles could have 3 images uploaded with them. Go to Structure > Content types > and choose “manage fields”. Then edit your image field settings.
Set number of values

You can add the same image field to other content types. You can also add a totally new image field and have completly different base settings. Go to Structure > Content types > and choose “manage fields” for any content type. Then “Add existing field” and select the image field. Or add a new field.

File upload configuration

Anytime you add a new image field to a specific content type, make sure to set the “File directory”. By setting the subdirectory it can make it easier for you to manage and migrate images in the future.

File directory

You should also install and configure the Transliteration module when you're processing images. This is important so your filenames are sanitized and your server will be able to access the file. (Thanks to thedavidmeister in the comments for the reminder!)

For example, if your content editor uploaded an image with a space in the file name, you'll end up with a path such as: 2013-01-01%2010.27.45.jpg

After you install Transliteration, you can configure the options under Configuration » Media » File system. The default options ensure your files get transliterated when they're uploaded, and any uppercase characters are converted to lowercase.
Transliteration config

If you have existing files with problems you can also process them on the "Transliteration" tab.

These are just some of the basics - but even with these settings you may have found the limits of Drupal’s core system. In Part 2 we’ll see how to manage inline images. And then, we can have some fun with responsive images.

Sign up to get notified

Sign up to my training newsletter for updates about training events and more tutorials.

Also in this series

  1. Drupal How-To: Basics, tweak the defaults for adding images to your site
  2. Drupal How-To: Responsive or adaptive images
  3. Drupal How to: Get inline images on your Drupal site.
In this eBook, we show you how to optimize performance of your Drupal site without any knowledge of coding, server configuration, or the command line.


Posted on by thedavidmeister (not verified).

You should also use the Transliteration module to ensure that the images uploaded by your users won't have file names that can break PHP image processing - http://drupal.org/pro ject/transliteration

Posted on by heather.

Thanks, davidmeister! I added that to the list of tips. ;)

Posted on by elly (not verified).

Your tutorial is good but I have not seen where Image captions are being talked about

Posted on by heather.

This article just talked about what Drupal does out of the box with images. A simple way to manage captions for an image field would be to add a field. then you could display them together. And that would work with the core set of modules.

However, if you have multiple images and multiple captions within an article, then you will want to turn to a contributed module.

A lightweight solution is this jQuery module - jCaption - which turns the "alt" or "title" attribute into a caption.
http://drupal.org/project/jc aption

Posted on by BC (not verified).

Very useful tutorial. But I have a question. How does one add a site-wide default image to a Drupal site. For instance when I copy and paste an article from my site to FaceBook, the accompanying default image is a banner ad from my site! How do I have the site logo accompany the URL?

Posted on by heather.

Facebook uses a meta tag called Open graph meta tags (e.G. For facebook sharing) You can actually use a module which allows you to select an image per post. https://drupal.org/pr oject/opengraph_meta

Otherwise you could set the meta tag in your themes header?

Posted on by [Not Provided].

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.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.