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

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.

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.

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.

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.

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.

Plain text

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.