Drupal How to: Get inline images on your Drupal site.

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

Inline images on your site

As we saw in part 1, the Drupal 7 defaults for image handling are pretty flexible. But they don’t suit all situations. What if your content editors want to be able to put in images of all sizes- *willy nilly*- through a large block of text and don’t want to be restricted to one image field? This is where you probably want inline images.

Some of your more HTML saavy content editors might try to upload their file elsewhere, and then use an <img /%gt; tag to place an image in the body field. By default, Drupal doesn’t allow the image tag to display. Effectively, the image tags are filtered out. If you have trusted users uploading content onto the site, you can confidently add the <img /%gt; tag to the set of allowed HTML tags. Go to Configuration » Content authoring » Text formats and “Configure” the Filtered HTML text format.

However, some of your content editors might not be so HTML saavy. And besides, another disadvantage of that way of managing inline images is that they wouldn’t be able to your Views module to list in other ways on your site.

Try the Insert module http://drupal.org/project/insert

The Insert module allows your content editor to place an image directly into the flow of their content, and gives you the balance of control using image fields and pre-set styles.

To use the Insert module, editors upload the image in a specified field; click where within the text they want the image to appear; then choose which image style suits. When they click “Insert” this places the HTML right in the body field with a specified pre-set size.

You can watch a full tutorial on the Insert module at Mustardseed media. But you might be able to figure it out on your own. There are a few “gotchas”, however.

1. Set your Insert image style options. After you enable the module, go to your image field settings, and locate the new “INSERT” options (click to expand). You can select which image styles are available to your content editors.

By using Image styles you will be able to resize images later, for example, by changing a thumbnail max width from from 100px to 200px. BUT, the Insert module will have used HTML attributes to set the height and width.

<img src="/nl/sites/test29.localhost/files/styles/thumbnail/public/field/image/peacock.jpg" width="66" height="100" alt="Pretty bird" class="image-thumbnail" />

2. Hide your image field from display. Don’t forget to hide your image field from display in any “view mode” such as teaser or default. Otherwise you’ll appear to get a repeated image.

Go to Configuration > Content types and choose "manage display" for your chosen content type. Check your view modes and hide the image field from display.

WYSIWYG and Inline Images

One problem with that method using the bare naked Insert module is that you’ll still be presenting your content editors with HTML. This might be off-putting for some folks who prefer a WYSIWYG editor.

As I wrote out this blog post, I discovered Pure Web Media has written out a tutorial for two good options for configuring inline images on your site. That's very thorough! There are certainly other ways to approach this, these are two popular options.

Option 1: IMCE & IMCE Wysiwyg bridge

The IMCE module works well with WYSWIYG editors using the IMCE Wysiwyg bridge. If your content editors are not experienced with code, this is a user interface they can more quickly relate to. IMCE also provides a file browser to see previously uploaded images.

More info:

• Watch a tutorial from LevelUpTuts on IMCE module & WYSIWYG bridge: http://www.youtube.com/watch?v=ddH34QJmWR0

Option 2: The Media module http://drupal.org/project/media

Media module aims to be an all-in-one solution for media. If you want to see a great demonstration of a tight configuration of Media module, check out DrupalGardens.com. There you can see Media module configured with multiple file upload and the "Embed.ly" service to allow media to be inserted from a variety of sources.

More info:

• Check out the Daily dose of Drupal Media module screencast
• How to create a Gallery with media module http://www.pfvdw.com/blog/creating-drupal-7-video-gallery-media-module
• Modules that extend the media module

OK, so now we have the basics down. In the next step, we can see the options available for responsive images in Drupal 7.