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.

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

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.

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.

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?

Neuen Kommentar schreiben

Plain text

Keine HTML-Tags erlaubt.

Internet- und E-Mail-Adressen werden automatisch umgewandelt.

HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

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.