Building a Programmers Blog: Images

One of the surprising omissions from Drupal Core is that of image handling. There are plenty of modules that provide different kinds of image support. And that, strangely enough, is the core of the problem.

The sheer variety of image modules shows that there are many different ways that people think about image support.

For some, the image itself is the content - think of Flickr, built entirely around showcasing peoples photographs. For others, the image is central, but it is the commentary that give the photo context and makes it more interesting. And, for others, the image is an accessory - an addition to some other kind of content, in some cases providing more information, in others purely as decoration.

I've found that sometimes a good diagram or picture can really help me get my point across - and sometimes a well chosen image can improve the appearance of a long piece of text. To achieve this, I make use of the following modules.

Image module provides a new content type (Image) allowing images to be uploaded into your system.

Image Assist builds on Image module by providing a way to embed image nodes within other content. Image Assist requires the Views module to work.

After you've downloaded and installed these modules, go to Administer, Site Configuration, Images to configure which standard image sizes will be available. For clarity - and so I don't need to remember any criptic names - I include the size of the image in each name.

As you can see from the screenshot, I've configured three specific sizes for use when embedding images into my posts.

For "spot colour" in my posts, small images to accentuate my point, the Node Image (128 wide) size works well with my theme, and all images have a consistent width. Selecting Scale Image as the operation ensures the entire image remains visible.

For screenshots and other large details, the Node Image (512) size gives a nice large image where detail is easier to see. With both height and width specified, the image is scaled to maximum dimension of 512, limiting how tall an image might end up when displayed.

As an intermediate size, Node Image (256) provides an intermediate alternative, though one that I seldom use.

Once you've set up your sizes, press Save Configuration to save your changes.

Next, go to Administer, Site Configuration, Input Formats and configure your main input format. If you've been following along in this series, it will be "Markdown". Turn on the Inline Images input filter to allow Image Assist to embed a tag in your post. (Image assist can generate pure HTML if you want to go down that route, though I find the tag easier to maintain).

With basic configuration complete, everything should be up and running. You may want to review the settings under Administer, Site Configuration, Image Assist - I found the defaults to work well.

Next time you go to add a post to your site, you'll see a new icon just below the main text entry area. Pressing this button will bring up a new window, allowing you to select any existing image node to embed:

If the image you want is not already uploaded, press the Upload button. The form you'll see within the dialog will look somewhat familiar - it's the usual "Create Content" form, but for an Image node.

At minimum, you will need to select an image (press Browse) and enter a title. Press Save to save the image (you'll need to scroll to the bottom). Next you'll see a configuration dialog, on which you can select how to display the image.

After selecting your choices, press Insert to add the tag (or HTML code) into your post.