Drupal ImageCache - Display Alt Text as Caption
While building the Archdiocese of Saint Louis' website (launching Feb. 22, 2010), I needed an easy and quick way to allow users to caption images, without much hassle. On the old Joomla version of the website, users would have to upload an image, then insert it, then click on it, then click another button to add an image caption, set border properties, add padding, etc.
To cut through most of that mess, I set up an ImageField with Drupal's Insert module, which helps save a few clicks (and eliminates any need for users to navigate through directories and manage yet another set of files on the server itself—this approach is not altogether bad, but can be harder to teach to many people). But how to do image captions?
Easy! Just create an ImageCache preset that can be used by the Insert module when an image is inserted, and use a theme function (inside your Drupal theme's template.php file) to grab the Alternate text and convert it to a caption.
<?php
/**
* Add a caption to imagefield pictures with an 'alt' tag
*/
function archstl_imagecache($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
if ($path) {
$attributes = drupal_attributes($attributes);
$imagecache_path = file_create_url(file_directory_path() .'/imagecache/'. $namespace .'/'. $path);
$output = '<img src="http://www.opensourcecatholic.com/%27%3C/span%3E%3Cspan%20style%3D"color: #007700">. $imagecache_path .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .' />';
$output .= '<div class="caption">'. check_plain($alt) .'</div>';
return $output;
}
}
?>One downside to this approach is the fact that users won't be able to see the caption while they're editing the page... but I might figure out something to fix that, perhaps with a JavaScript plugin for the TinyMCE editor (we use the WYSIWYG module to set up editor profiles on the new site).
[UPDATE: This is not quite working for me right now... works great for imagecache-built CCK ImageFields, but not with inserted images... might have to resort to a JavaScript-only solution for the time being.]
The new Archdiocesan website will launch on Monday, February 22... stay tuned!
Comments
I have been looking for this for some time, now I only have to verify it works the way I think it do.
Please update if you find a way to do it with inserted images also! But I am happy enough if it works with imagecache-built CCK ImageFields.
Thanks for sharing and I must say that your work is really inspiring .
Thanks, swe_catholic! I'll keep this story updated if I find a way to do it with inserted images.
Advancing the faith.
Hi again, I must be missing something because it's not working for me.
(believe me I have tried ;-)
I know this isn't a support forum but I would be extremely thankful if you could help me out.
What I have is a cck-field “machine name=sport_image"
it's a image-field using imagecache (the name of the imagecache preset is “sport_330_scale”)
In the content type area, my settings are “Enable custom alternate text”
To get my text into the “alt” variable (is this right? This is one of the main problems where/how should I enter the “text for the image”)
I have also tried to check the Description field(for that image field), for the text to appear below the image.
Both of the solutions have not worked.
My CSS
.field-field-sport-image {my css}
.field-field-sport-image a {my css}
.field-field-sport-image div.caption {my css}
For the theme template.php I copied your code and replaced the
function archstl_imagecache
to be
function mytheme_imagecache
Also I changed the $output = '<img src="http://www.opensourcecatholic.com/' To '<img src="http://localhost/mysite'
I know I am missing something obvious (not to me though ;-) but probably/hopefully to you.
It's working, thanks a million (I had some trouble getting it to work, having both a copy and paste-error as well as a logical one)
Regards
Swe_catholic
I'm glad you could get it working! Sorry I couldn't respond sooner.
Advancing the faith.
Your code was excellent, my problem is that I am a robot programmer (one that have never come close to PHP or "web-terms" and the first time I heard about Drupal was 7-8 months ago.
But even as a robot programmer I should know to "not work" when tired. ;-)
Thanks again and I'll defenently sign up for this site.
(I guess my skills for PHP and web projects are very limited, but perhaps if someone would ever have to program a ABB Robot I could assist ;-)
I'll let you know if I ever need my robots programmed ;-)
Advancing the faith.
Post new comment