Wiki for "how to handle images in Drupal"

Events happening in the community are now at Drupal community events on www.drupal.org.
You are viewing a wiki page. You are welcome to join the group and then edit it. Be bold!

For the Oct 2010 HKDUG meetup we will be talking about images. Below are the various use cases for images. Choose a use case, come up with a way to implement it, and then present your findings.

E-commerce

Description

Each product (node) must have an image. The product will show up in various lists (list of products by category, featured product on front page etc.). Derivatives of the image will be shown in different types of lists (ex. 150x75 for the front page feature).

Presenter

Implementation

Galleries

Description

Think Flickr. An image belongs to a gallery. Galleries are browsable. Opening a gallery allows you to browse through images in a lightbox overlay. Images have metadata (tags, license, comments, etc.).

Presenter

Implementation

Blog images

Description

Writers have the ability to insert an image in-line with blog text. The image could show in the teaser, or only in the full body. Ease-of-use is paramount; Anyone that can operate a word processor should be able to use this. The same image file should be able to be added to more than one node.

Presenter

Implementation

News Articles

Description

This is basically the e-commerce and blog use cases combined. A writer should have the ability to insert one or more images anywhere in-line with the text, but the primary image should be shown as a derivative wherever the article is presented in a list.

Presenter

Dave

Implementation

Recipe #1

http://drupal.org/project/cck - flexible content types
http://drupal.org/project/views - creates lists of content
http://drupal.org/project/filefield
http://drupal.org/project/imagefield - image formatter for file field
http://drupal.org/project/imageapi - low level image manipulation
http://drupal.org/project/imagecache - creates image derivatives for use in views.
http://drupal.org/project/filefield_sources - allows auto fetching of remote files, or reusing existing files.
http://drupal.org/project/wysiwyg
http://drupal.org/project/insert - allows inserting from a filefield into the wysiwyg.
http://drupal.org/project/image_resize_filter - allows content editors to resize images to whatever size within the wysiwyg, a proper derivative will automatically be created (note: compatibility issue with insert and CKEditor, must use TinyMCE).
http://drupal.org/project/wysiwyg_imagefield - optional - replaces the filefield with a wysiwyg button at the expense of some loss in functionality (can't re-order multiple files).

Recipe #2
http://drupal.org/project/cck - flexible content types (+ node_reference field)
http://drupal.org/project/views - creates lists of content
http://drupal.org/project/filefield
http://drupal.org/project/imagefield - image formatter for file field
http://drupal.org/project/imageapi - low level image manipulation
http://drupal.org/project/imagecache - creates image derivatives for use in views.
http://drupal.org/project/filefield_sources - allows auto fetching of remote files, or reusing existing files.
http://drupal.org/project/wysiwyg - with TinyMCE or CKEditor
http://drupal.org/project/jquery_ui - the jQueryUI library (tabs, popups, etc.)
http://drupal.org/project/jquery_update - update to jQuery 1.4
http://drupal.org/project/nrembrowser - Node Reference / Embeded Media Browser - allows easy insertion, or referencing with "Image", "Video" or "Embeded media" content types. Has views integration for easier management of lots of media.
http://drupal.org/project/image_resize_filter - allows content editors to resize images to whatever size within the wysiwyg, a proper derivative will automatically be created (note: no compatibility issue with nrembrowser, can use either CKEditor, must use TinyMCE).

The future

http://drupal.org/project/media

DrupalHK

Group categories

HKDUG Vocabulary

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: