Drupal How-To: Adding Images to Your Site. The Basics, and How to Tweak the Defaults

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.

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.

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 doing 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.

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.

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.

You can add the same image field to other content types. You can also add a totally new image field and have completely 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.

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.

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.