A General Strategy for Images with Captions in Content

Question

This is a 'general direction' topic. I'm looking for some strategy and philosophical guidance, before marching over to the module development forum at Drupal.org.

I'm new to Drupal, and am very impressed by the architecture - the flexibility and power of the framework as a whole.

However, like many 'newcomers', I've quickly discovered that there's some planning and investment required in creating a new Drupal site (which is apparently the subject of many debates that are shaping the future of Drupal itself - http://www.lullabot.com/articles/understanding-8-where-drupal-and-where-...).

At the moment, for me at least, there's only one piece missing, and that's a non-Javascript method for allowing content creators (site owners) to insert one or more images with captions into the content of a node (like a news article, or blog post).

I also understand that in terms of semantic purity, it would be nice if the content of a node was clean and tidy, without a lot of additional markup - and so I'm looking for an eloquent way to solve the image/caption problem.

I poured over several other solutions - although as a new poster here I can only share two links in this post :(

and...

http://purewebmedia.biz/articles/2013-01-10/how-insert-and-float-inline-... - which is a great write-up describing the difference between using an Image field (with custom locations/folders for image stores), vs. Media Manager - although it doesn't address the caption problem.

I've also read a little about the new Entity model in DR7 - and I'm beginning to wonder of File Entities, with some kind of token replacement might be the right approach? (although I confess I don't entirely understand yet if a token can be placed into the free text/content field of a node - like the main text of an article or news story).

What I'm looking for is a method that will allow a user to insert one or more images into the content area of any content type (article, basic page, whatever - assuming the field/function has been defined for the content type), and that when they upload and insert that image, they are allowed to enter additional information like a title, copyright, caption, date etc.

They should be able to 'see' the image in their WYSIWYG editor (although maybe not the metadata), and then when the node is published, the required metadata is retrieved and inserted via a hook, pre-processor - for example, by surrounding the image in a div, and placing the required metadata above or below the image (perhaps in additional divs or elements) - requiring only CSS to style the title, caption, etc. as required.

I also really like Image Styles feature of Drupal and so I'm wondering how this could all be brought together.

To be clear, this is not a gallery module. The requirement here is to be able to insert one or more images with captions (and possibly other metadata fields) into a the content/body or a story, news article, blog post etc.; needing only CSS to style the result (format caption, float left or right etc.)

Thoughts?

Any pointers on how to start with this?

Answer 1

Your desire for a "non-Javascript" solution is in conflict with your desire to allow users to "see" the image in their WYSIWYG editor, as you need to run Javascript for those to work. So, you'll have to either drop the "non-Javascript" requirement, or be satisfied with image fields that may appear above or below the main body. [Note 1: Images "above" the node body can be set to float left or float right, and thereby appear to be inside the text. Note 2: If by "non-Javascript" you mean non-JS at render time, then no problem.]

Whichever way you go -- be it images embedded in a WYSIWYG editor, or images as file fields, you'll probably want to use the media module, as it can support either method.

There is a lot of information available on the media module, which is becoming "the way" to do images in Drupal. Many additional contrib modules are compatible with media. You'll want to take a look at the following two configuration guides:

Media 2.0 Quickstart

Configuring embedded images with media and wysiwyg modules

Here is the point where I remember to take a step back and point out that my experience is with media 2.0-unstable7. Depending on how comfortable you are with making adjustments to php code, you might prefer to use the stable release, which is currently 7.x-1.2. I didn't have too much trouble with 2.0-unstable7, except for the fact that it does not support editing of arbitrary image metadata on WYSIWYG images, so I am using only image file fields at the moment. If the only metadata you wish to attach to your images is a caption, then I expect that 7.x-1.2 should work for you, although I have not tried it myself.

In any event, I would recommend using the provided "title" field, and render that as a caption. Doing that is as easy as visiting admin/structure/file-types and clicking on "manage display" for the image file type. This page works just like the "manage display" page in cck; you can just drag the "title" field up so that it is under the "file" field, and use css to style it as a caption. You'll probably also want to download and enable the entity_view_mode module, which will allow you to define additional view modes for your image files.

As I said, I'm not embedding images in WYSIWYG editors at the moment, but the article you quoted gives good advice on that. If you're using the media module, you should still be able to format the title field as a caption regardless of whether you're using file fields or WYSIWYG.

Answer 2

Solved - using the new File Entity module, the new Media module (2.x) and the new Entity view modes module (http://drupal.org/project/entity_view_mode) - along with the basic instructions here... http://drupal.org/node/1699054 - it's possible to create custom Entity view modes for left, center, or right aligned images, along with matching CSS classes, and image styles.

Here's the result.

Answer 3

I too do not understand why most, if not all image caption modules require JavaScript. Scripting is fine for dynamic content. Here it just adds unnecessary complexity.

Drupal natively offer a filtering feature allowing to edit the HTML code content on-the-fly on server-side before it is delivered to the client. IMO this is the most natural place to turn image's title into caption, and it is even very easy to do!

1. Create a module in which you will define two functions as the ones shown below:

   /**
    * Implements hook_filter_info().
    * Add a new text filter implementing images captions.
    */
   function my_module_filter_info() {
     $filters = array();
     $filters['image_caption'] = array(
       'title' => t('Display image title as caption'),
       'process callback' => 'filter_image_caption_callback',
     );    
     return $filters;
   }
   
   /**
    * Callback for my_module_filter_info().
    * Takes a content text as input, edit all <IMG> tags and reuse the  `title'
    * parameter as caption.
    */
   function filter_image_caption_callback($text, $filter, $format, $langcode, $cache, $cache_id) {
     $text = preg_replace(
       '%<img ([^>]*(?:(style="[^"]+")[^>]*)?title="([^"]+)"[^>]*(?:(style="[^"]+")[^>]*)?)/?>(?:</img>)?%iU',
       '<div class="image" $2$4><img $1/><div class="caption">$3</div></div>',
       $text       
     );    
     return $text;
   }
   

   These functions will add a new text filter labeled "Display image title as caption." which will take the content images' title attribute to generate the captions.

   The image and caption become encapsulated in CSS-styleable <DIV> containers, the outer-most inheriting the original <IMG> tag style (float attribute, etc.).

   You may want to personalize the produced <DIV> tag classes, or maybe replace them with the HTML5 <FIGURE> and <FIGCAPTION> tags.

2. Refresh your Drupal cache to take these new function into account,

3. Go in Configuration > Texts formats to edit your text format,
4. Add the newly created text filter:
   • After any other filter which could generate <IMG> tags needing captions,
   • Before any security and file structure checking filter.