« More on Images in Drupal | Main | Related content in Drupal »

March 18, 2010

Inserting images in Drupal Blogs

How to build the ability to insert photos into text bodies, quickly resize them and give the end-user the ability to see the full size image in a slick manner.

These steps are best used with these videos:

MustardSeed has a great video on the Insert module which covers one way to insert photos into blogs and other text bodies.

Lullabot has a good video (quality is so-so) on the Image Resize Filter.

1) Download (if necessary) and enable the following modules to /sites/all/modules:

- A third-party editor for WYSIWYG: FCKeditor or CKeditor
- CCK FileField
- ImageField
- Insert module
- Image Resize Filter Module
- Lightbox2
- Blog module

2) Setup WYSIWYG.
- Download and install fckeditor. Note, at first I tried ckeditor which is not compatible with image resizing.
$ sudo mkdir /blah/sites/all/libraries
$ sudo mkdir /blah/sites/all/libraries/fckeditor
$ sudo tar -xzf fckeditor_3.2.tar.gz
$ sudo cp -rf fckeditor/* /blah/sites/all/libraries/fckeditor/

- Go to admin/settings/wysiwyg and set CKeditor to be used in Filtered HTML settings. I didn't mess with the "Edit" section at all.

3) Configure Lightbox2 at admin/settings/lightbox2/
- I didn't change anything here

4) Setup HTML Input filter for Lightbox2 and Image Resize Filter (admin/settings/filters/)
- Edit: Check Lightbox2 and Image Resize Filter
- Configure: Add <img> to allowed tags; Check "Link to the Original" and add the word "lightbox" (no quotes) to 'rel attribute' box.

5) Create a directory for blog images.
$ sudo mkdir /blah/sites/default/files/images
$ sudo mkdir /blah/sites/default/files/images/blogs
$ sudo chmod 777 /blah/sites/default/files/images/blogs/

6) Add an Image field to the Blog content type (admin/content/node-type/blog/fields)
- field_blog_image; Type = File; Form element = Image
- File Path: images/blogs
- Enable Title Text; Default = "Complete this field for accessibility purposes"
- Enable Alt Text; Default = "Complete this field for search engine purposes"
- Enable Insert button

- In the Display settings, set the image field to hidden. This means the image will only appear when inserted into text.

7) Create a post, upload an image and resize it. If it is resized from the original, when you click on the image Lightbox should pop up and takeover.

Posted by kkwaiser at March 18, 2010 11:06 AM


Login to leave a comment. Create a new account.