Want to contact me by voice?
(720) 254-1546

Drupal Basics: Insert Module

Posted Wed, 2010-01-20 23:01 by matthew

When I was working on the California Watch site, we needed an easy way to allow non-technical folks to add photos to the bodies of articles. There was a fair bit of effort put into setting up alternate solutions prior to settling on using quicksketch's fabulous Insert module.

A few housekeeping items.

  • You need cck 2.5
  • You need to have WYSIWYG setup
  • It helps to have FileField
  • and ImageField
  • and ImageCache
  • and of course the Insert Module itself

Unpack the module in your sites/all/modules directory (I like creating a contrib directory inside the modules directory so I can separate out various kinds of non-core modules.) Enable the module at admin/build/modules

I added a new field to my page content type by going here: admin/content/node-type/page/fields and added a field image_uploads

added field

You'll then want to pop over to the configuration page for you node, admin/content/node-type/page/fields/field_image in my case, and scroll down. You should notice a new collapsed field set labeled "Insert". Uncollapse the field set and you should see the following:

insert - with cck

  • Check off "Enable Insert Button"
  • If you are using imagecache you should see your presets here. In my case that would be "small" and "Medium". I'm going to choose to check off "Small", "Medium", and "Original Image" for the enabled styles.
  • Next, I will choose "Medium" as the Default insert style.

Scroll to the bottom and click on "Save Field Settings".

Now when you go to node/add/page you should see the image field you added to the content type.

Add text to your form and switch your input filter to full HTML.

Place your cursor where you would like the image to sit. Scroll down to the image upload field. Browse for your image and click on upload. Choose what style you'd like to use and click "insert".

upload image

The image should now show up where you placed the cursor, but the alignment will be wonky.

The next step is to use the WYSIWIG to fix your alignment. Click on your image and choose the image icon in your WYSIWYG and adjust the settings. In my case, I set the image to align left.

align left

Go to the bottom of the page and click save. Your image should now be sitting on the page aligned where you wanted it to live with the size governed by imagecache.

Bookmark/Search this post with:
  • del.icio.us
  • Digg
  • Facebook
  • LinkedIn
  • Ping This!
  • StumbleUpon
  • Twitter

Comments

by Anonymous - 2010-01-21 10:57

I have actually found that allowing only the 'original' image and using Input Resize Filter and not imagecache allows our editors the freedom to do maniuplate images how they want without serious performance problems (i.e. using attributes to force the size of the image to be 173 x 173 when it is actually 1000 X 1000).

In conjunction with this, I actually use the "Maximum Image insert width" to make sure that the inserted item doesn't break the layout of the site.

by matthew - 2010-01-21 13:46

Thanks for your input! I like imagecache simply because it standardizes the image size across pages.

by matthew - 2010-01-21 10:22

I just noticed that comment settings on this post were not allowing comments! Sorry about that.

A professional acquaintance, Benjamin Melançon, rightly points out that the Insert Module creates absolute paths for an image when you use it. That leads to problems when you are developing a site and then need to move it from as stage to it's real location. You can use the Pathologic module to fix these paths.

Thanks for the tip Benjamin! I'll write about Pathologic another time in another post.