Inserting Inline images with the body text can be approached by different methods which will give various levels of flexibility. Although there are at least half a dozen techniques, this article talks about just two, one quick but less flexible, while the other one is not as quick but offers the greatest flexibility. What it boils down to is this: if you use a field to upload and place your image instead of just a WYSIWYG button to insert your image, you will have more flexibility overall.
Neither of these approaches allows client use of Full HTML as a text-format, a critical factor is you want to keep your site easy to use and secure (see this article by the Drupal security team to learn more). I've seen many sites that allowed use of Full HTML mainly because the developers either forgot or couldn't be bothered to put in proper safeguards, which often led to clients pasting in code they've found on the web - complete with inline scripts - and who then run into broken pages or unexpected results. Be safe and smart about what you allow your users to input. Note these approaches both use the WYSIWYG module in conjunction with an external editor. CKEditor (3.6.x) is nice because you can double click on an inserted image to align, while TinyMCE has more options but also has the caveat of making you first click on an image and then click the alignment button in the toolbar. Both editors have their pros and cons so choose your preference and read on...
(Feb 25, 2015 Note: See our article on 'Responsive Inline Images with the Picture module and CKEditor 4' for a more current information on responsive image handling in Drupal 7.)
- Quick & Dirty: Media Module and the WYSIWYG media browser button
- Pros: Uses Media Browser toolbar button; Uses fewest modules and also supports expansion for video insertion; Has file browser; Good for single or few-user sites.
- Cons: Uses Media Browser toolbar button (yes, it can be a curse too); All media is thrown into the files directory without a means to organize; Since a field is not used to insert the image, there's no way to refer to an image later (by Views in a gallery, for example); Resizing options severly limited; Using a Media field does not allow easy insertion into text, so you have to use the WYSIWYG.
- Most Flexibility: IMCE, WYSIWYG, Filefield Sources, Insert, Float Filter
- Pros: Most flexibility and universality. Image location highly customizable; Using a field means the CMS can easily reference image for use elsewhere (Views Slideshow, Colorbox, etc); File browser integration with IMCE; WYSIWYG toolbar for alignment and potentially, resize; Can be used with Video Filter button which also allows floating left or right within text.
- Cons: Not super user-friendly b/c users expect to use the toolbar. Lengthy setup; Most amount of modules needed;
1. Float Inline Images with Media & WYSIWYG Modules:
- Necessary Modules:
- http://drupal.org/project/media
- http://drupal.org/project/wysiwyg
- Editor:
- http://tinymce.com or http://ckeditor.com/ (3.6.x)
- Optional:
- http://drupal.org/project/pathologic
Why This Way?:
It's quick and dirty. The Media module is probably the simplest way to get inline images into the body of your text and be able to float them. Also, it goes beyond just image insertion - involving also videos and other media (although the media_youtube module doesn't allow floating of videos). The drawbacks are that there's no organization to the files - they are all dumped into your public files directory (usually: /default/files). This may not be an issue if the site has only a few authenticated users. (Note: if you use the Media module as a field, you get a chance to declare a folder for uploads, but not with just the toolbar button. I believe this has more to do with the editor chosen rather than the Media module itself.CKEditor allows for alignment, while TinyMCE so far doesn't.)
Using this approach, we can still use 'Limit allowed HTML tags' filtering to prevent our users from inserting unwanted html tags which they may not understand, especially if they have copied content from another site without realizing there potentially hazardous code is contained within it, but the security caveat is that the Media tags filter has to come after the HTML filter.
How to:
References:
- Installation Guide for the Media module
- Configuration instructions
- Creating a Media field on a content type
A. Install the necessary modules and activate, then go to your Text Formats and create a custom format for your users. It is rarely a good idea to allow users to use Full HTML, so it's best to make your own format to give you better control over what goes into your content. Check the following so they are activated:
- Limit allowed HTML tags
- Convert URLs into links
- Converts Media tags to Markup
- Correct faulty and chopped off HTML
B. The Filter processing order is important and I have mine set to:
+ Convert URLs into links + Limit allowed HTML tags + Converts Media tags to Markup + Correct faulty and chopped off HTML + (optional) Correct URLs with Pathologic
C. For the Limit Allowed HTML Tags, add in whatever is appropriate for your site. I use at least the following:
<h2> <h3> <h4> <img> <span> <p> <div> <br>
...so your full allowed HTML tags are:
<a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <img> <figure> <figcaption> <span> <p> <div> <br>
Optional:
Since the Media module uses absolute paths for your images, you might want to use the Pathologic module to maintain consistency when moving from a dev environment to a live environment. If you use this, uncheck the option:
Output full absolute URLs.
You're done here.
D. Next, go the the WYSIWYG Profile, select TinyMCE for the Text Format you just made, edit and activate the matching buttons (Buttons and Plugins section) for the tags you specified in 'Limit allowed HTML tags' section previously. You'll also want to activate the button 'Media Browser'.
When you go to create content for a Content Type that is allowed to use your Text Format, you'll see a Media Browser button in the toolbar. Clicking it will allow you to find and upload an image. Once inserted, drag the image to where you want to place it within the text then double-click on the image to set the alignment to left or right. Save and your image is floated. That is basically it but check out the references above for more details on extra configuring. As mentioned, what is not so great about this method is that all images and media are tossed into one directory.
To add padding around the floated elements you can use css attribute selectors, such as:
img[style*=left] {
clear: both;
padding-right: 10px;
}
img[style*=right] {
clear: both;
padding-left: 10px;
}
2. Float Inline Images with the IMCE, WYSIWYG, Filefield Sources, Insert, Float Filter Modules:
- Necessary Modules:
- http://drupal.org/project/imce
- http://drupal.org/project/wysiwyg
- http://drupal.org/project/filefield_sources
- http://drupal.org/project/insert
- http://drupal.org/project/float_filter
- Editor:
- http://tinymce.com or http://ckeditor.com/ (3.6.x)
- Optional:
- http://drupal.org/project/video_filter
- http://drupal.org/project/pathologic
- http://drupal.org/project/image_resize_filter
Why This Way?:
You have the greatest range of flexibility by being able to use a field to select your image (giving you control over where it's kept), but also have a browsable repository so users can see othe image they have uploaded (or perhaps a shared directory?), and finally you can insert, resize and float left or right as needed. It really depends on the type of site you're making. Is it a community site with dozens or hundreds of users, or one with only one or two users? This tutorial will cover both situations.
How to:
A. Install and activate the necessary modules, then go to your Text Formats and create a custom format for your users. It is rarely a good idea to allow users to use Full HTML, so it's best to make your own format to give you better control over what goes into your content. Check the following so they are activated:
- Limit allowed HTML tags
- Convert URLs into links
- Float Filter
- Correct faulty and chopped off HTML
- (optional) Correct URLs with Pathologic
B. The Filter processing order is important and I have mine set to:
+ Float filter + (optional) Image Resize Filter + Convert URLs into links + Limit allowed HTML tags + Correct faulty and chopped off HTML + (optional) Correct URLs with Pathologic
C. For the Limit Allowed HTML Tags, add in whatever is appropriate for your site. I use at least the following:
<h2> <h3> <h4> <img> <span> <p> <div> <br>
...so your full allowed HTML tags are:
<a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <img> <figure> <figcaption> <span> <p> <div> <br>
D. Save this page and then go to the WYSIWYG configuration page, select CKEditor or TinyMCE as your editor and configure. Activate the buttons that match your allowed HTML tags, including Image (you'll need that for floating/alignment options). Make any other settings you want for the editor and click Save at the bottom.
E. Set up IMCE. The point of using IMCE is that we want to give users a chance to reuse items they've already uploaded. If that's not important to you, you can skip this IMCE section and head to F below. For those interested in having a browsing capability, read on. Go to the IMCE configuration screen and create a new profile called 'Authenticated Profile' and set the Directory Path to:
<root>/users/%uid
My goal here is for a large site with potentially hundreds of users, and their respective uploads will go into their own user directory. If you check the 'Including subdirectories' checkbox, then these users can see all the directories and files info inside their own. Again, it depends on your needs. Since the files in here are uploaded through content type fields, I will only allow them to Browse, possibly Resize but nothing else. I don't want to allow Uploads through IMCE, nor do I want users to Delete from here because the point is to make all the files in here accessible by Views, or other modules that need field-based data. IMCE's uploader feature doesn't give Drupal awareness of those files elsewhere in the system.
Now, if you also want a shared directory where perhaps a dozen users with a role of Editor can view common files, then you can also create:
<root>/users/shared
...and check the 'Including subdirectories' checkbox. In any case, once you're done here but don't forget to set on the main IMCE configuration page (/admin/config/media/imce) which roles can use the profile(s) you just created. You're done with IMCE.
F. Now, for the actual content type(s) that you want be able to insert images into text areas, add an image field (field type: image; widget: image) and with both Insert and Filefield Sources enabled, you'll now have extra options for this field. Taking the example of a Basic Page, I'm going to set my file directory for this image to:
users/[current-user:uid]/page/image (or use tokens if you prefer)
See how it matches up with the IMCE path? Now if you want users to upload all to one common directory then you'd set this field to:
users/shared/page/image
I prefer to set a 'Maximum image resolution' to prevent users from uploading gigantic images 5MB images, so something like 1200 x 1200 as a max height and width should do. On this same page, when you see the INSERT option fieldset, open it and at least check 'enable insert button' which will allow you insert your uploaded image into the text body. For FILE SOURCES, enable the 'IMCE file browser' and in the IMCE FILE BROWSER SETTINGS, choose one of the two options (I prefer the default first option). If appropriate, set the Number of Values field to Unlimited but regardless, once you've saved any additional settings for this image field, go to 'Manage Display' for this content type and set the label and format to 'hidden'. Remember, we want the image to show in the body, not also as a separate field.
Create a new node, select or upload an image, insert it into the text body and then use the image button in the toolbar to set the alignment to the left or right. (Note: if you are using the Image Resize Filter, you will also have a chance to resize the image in the body with the image corners. This assumes you have enabled and set up Image Resize Filter according to the Readme.txt in that module's directory.)
When you save the node, thanks to the Float Filter, span tags are now put around your image with a class of "floatright;" or "floatleft;". All you need to do now is write a CSS style or two to actually float based on this class and you're done. For example:
.floatleft {
clear: both;
float: left;
padding: 4px 10px 4px 0;
}
.floatright {
clear: both;
float: right;
padding: 4px 0 4px 10px;
}
Optional:
- The Image Resize Filter is a wonderful tool that creates and manages a resized inline image. However, note that it creates a new image based on the altered size and maintains an absolute path for an image. To compensate for this if you are working on local or staged development environment where you might move the site to a different location, download and install Pathlogic and set your domain to the live domain (see docs on pathlogic). Also, you have to set the order of filters to have the Image Resize Filter called before the WYWIWYG Filter but after the Pathologic filter.
- The Video Filter module is excellent for inserting remotely hosted video (YouTube, Vimeo, etc) into the body content via the WYSIWYG toolbar. You can set the dimensions of the video and the alignment. For a video-only solution, I prefer it to the Media module. However, if you need to make a gallery of videos from a node, you are limited because the video is not using a field.
As I mentioned, there are many modules that can be used and I've named two methods using a variety. My suggestion is to use the latter method because it will give you flexibility for down the road, for example when a client wants an image gallery of all the first images showing in a node. Since they're uploaded via a field, you'll be able to do this.
Feb 25, 2015 Note: See our article on 'Responsive Inline Images with the Picture module and CKEditor 4' for a more current information on responsive image handling in Drupal 7.