Re-Learning How To Insert Images Inline in Drupal 7

published by Nathan on Fri, 01/28/2011 - 15:10

I recently rebuilt this site using Drupal 7, and ran into the issue of how to insert images inline, so pictures appear anywhere I want them within the body of my content.

Drupal 7 now has image handling in core, making me re-think the way I include pictures in my sites. The CCK and ImageField modules were moved to Core in Drupal 7, and the Image module that I used in Drupal 6 seems to be deprecated (outdated method). It appears that ImageField is becoming the official way to handle all images, so that's the direction I want to go with all my new sites.

I thought since Drupal 7 has image support built into Core that I could just click a button and insert an image anywhere. It's not quite that easy, but with just one module and two or three configuration steps, it becomes possible.

The new Media module shows promise of becoming the future of all inline images (plus all media, videos, and Flash). However the module is still in beta at the moment and depends on the Styles module that is still in alpha. Meanwhile I will use the Insert module and switch over to the Media module later when it is ready. Since both modules use images in an ImageField, there shouldn't be a problem changing over later.

The first step is to add an image field to the content type you want to add pictures to. I headed over to the Content Types (admin/structure/types) page and selected "manage fields" for the content type where I wanted to enable images. I used the "Add existing field" form to add an image field to my content type. That immediately gave me the ability to upload images to my nodes using just the features included in Drupal 7 Core. Images uploaded this way only display above or below the entire body of text depending on where you position the field in the "Manage Display" settings. If showing images this way suits your needs, you can stop at this step and live happily ever after. If not, read on...

Second, I went back to the "Manage Display" settings and set my image field and title to be "hidden." Now I can have images uploaded to my nodes, but they won't show up anywhere until I insert them inline using another module.

Third, I installed the Insert module (I used Drupal 7's awesome new "install new module" feature). Once the Insert module was installed and enabled, I headed back to the "Manage Fields" page, selected "edit" for the image field I just created, and found the "Insert" options (slightly hidden in a drop down section). I checked the "Enable insert button" and enabled the "insert styles" I wanted.

Done! Now, I can edit any node I want to add an image to, upload a picture, and insert it inline anywhere in the text simply by placing my cursor and clicking the "Insert" button. This method uses the default css image attributes of whatever theme you are using. If you want to override the theme's default css and make the text wrap around the image, you will need to add the float and margin styles manually to the img tag.

UPDATE: I started experimenting with the WYSIWYG module and the CKeditor plugin which allows you to set the float and margin styles without entering any code. I'll have to make my next blog entry about the WYSIWYG module and how I set it up.

Nathan's blog

Comments

Samat (not verified)

Wed, 04/06/2011 - 14:13

Main menu

You are here

Re-Learning How To Insert Images Inline in Drupal 7

Comments

Add new comment

Plain text