Getting InLine with the images and Drupal

Getting images to play nicely is not always easy. A content management system like Drupal has so many advantages, and so many options, and so many ideas. The options around images is no joke. Lots of options, lots of solutions, and benefits to many different choices. This blogthingee is to discuss one of those options, specifically, displaying images inline in Drupal 6.
[inline:inspiration.jpg]
One of the topics discussed on a recent podcast from geeks and god was their new tutorial section. The issue they had was the ability to include images inline. While I too was unable to find a perfect solution. I have decided to go with inline module. Here is a short walk through of how I got it working here at blogthingee.

Gathering the Modules

• Download Inline Module
• I decided to also install imagecache and the support modules also to simplify my inline module use (I really like the idea of using imagecache as often as I can)
• Copy the modules to your modules directory (i.e. /sites/all/modules)
• I enabled imagecache modules, the imagecache support modules, and unload module that comes with core
• Don't forget to enable our featured module as well :)

[inline:modulescreen.jpg]

Start Configurations

• I configured my blog content type to accept uploads
• I created an imagecache preset that would fit my blog size
• Next I configured the lnline Module (admin/settings/inline) to use my imagecache preset, as well as to set the display to link to the full size image

[inline:linkconfig.jpg]

• Next I needed to make the filter available to the blog post (like the php filter works in core). I decided to just add it to the "Filtered HTML" from the input formats screen (admin/settings/filters)

[inline:inputformats.jpg]

• By selecting the link that says "Configure" I then enabled "Inline filter" as one of the input formats usable by my system, and specifically by that filter.

[inline:filteredbox.jpg]

Some CSS For My Needs


img.inline {
background:#F4F5DE none repeat scroll 0% 50%;
border:thin solid #CCCCCC;
margin:5px 0px;
padding:12px;
}


Now Time To Use It

• Created my post (this one)
• Uploaded an image using the upload module
• The first file I uploaded is considered by the module as "1" as well as its "filename"
• When I wanted to insert the image I had two options for how to type it in


option 1: ["inline:1"]
option 2: ["inline:filename"]

!!! IMPORTANT NOTE !!!
DON'T USE THE QUOTES, IT'S JUST SO I CAN DISPLAY IT PROPERLY)))


• So for the sample code above you would change all of the characters in - "inline:filename" - to read - inline:sample.jpg - which would be within the brackets [] (sample below)

Here it is in action

[inline:somecode.jpg]

The Proof Is In The Putting

Once I completed this post I proceeded to use it on the previous post, as well as post I am completing for next week. One note... the module comes with some pretty clear documentation and I am very pleased to see the nice work and give kudos the the current maintainer Daniel F. Kudwien (sun)