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

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.

Inline image

Some of your more HTML saavy content editors might try to upload their file elsewhere, and then use an <img /> 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 /> tag to the set of allowed HTML tags. Go to Configuration » Content authoring » Text formats and “Configure” the Filtered HTML text format.

IMG tag in HTML filter

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

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.

image styles

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="/de/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.

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

View modes- hiding image

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:

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:

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

Sign up for my training newsletter!

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.

Kommentare

Posted on by Anonymous (nicht überprüft).

Seriously, the "<img /%gt;" tag? I think you meant "&gt;" otherwise a pretty good post.

Posted on by Martin (nicht überprüft).

My previous comment was not published. I wonder why?

Posted on by Dave Myburgh.

It's entirely possible your comment got tagged as spam. We have spam removed automatically due to the massive amount we get, so my apologies if yours got snagged by the filter. Feel free to re-post it.

Posted on by Elias (nicht überprüft).

I am curious about knowing how to add a caption to the image. Many thanks to this post.

Posted on by Wreckage (nicht überprüft).

Can you supply a direct link to this demo? I can't find any 'demonstrations' on the Drupal Gardens site. Thanks.

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

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.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
By submitting this form, you accept the Mollom privacy policy.