A technique for adding custom alt tags to images displayed by Drupal's image.module. If no alt text is provided, the node title will be used instead.
Requirements:
- Drupal 5
- Content Construction Kit (CCK) module
- Image module
Step 1. Add a Custom Alt Text Field
Use CCK to add a custom alt text field to image node types by navigating to Administer >> Content types > Edit [Image] > Add Field, or jump right to it at admin/content/types/image/add_field.
Name the new field alt_tag.
Check Field type: Text: Text Field
Press the create field.
Set your Widget settings as desired. If you are going for 508 compliance, or similar, you might want to set this to be a required field. Text processing should be left as plain text, because the output will be going into the alt attribute of the image. You can also provide a nicer label to be shown on the image submission and editing form.
Save your field settings. This should take you to the Manage fields pane (admin/content/types/image/fields) for image nodes.
Go to the Display fields pane (admin/content/types/image/display) and set the Label, Teaser, and Full views to <hidden>. We are doing this because we don't want this field to be displayed as normal.
2. Modify template.php
SFTP or otherwise connect to your server and navigate to the directory of the theme to which you want to add this functionality. Create the file template.php, if necessary, and add the following function:
<span style="color: #369;"><?php</span><span style="color: #000;">
</span><span style="color: #555;">/**
* Add custom alt tags when displaying an image.
*
*/</span><span style="color: #000;">
</span><span style="color: #00C;">function</span><span style="color: #000;"> </span><span style="color: #000;">phptemplate_image_display</span><span style="color: #000;">(</span><span style="color: #000;">$node</span><span style="color: #000;">, </span><span style="color: #000;">$label</span><span style="color: #000;">, </span><span style="color: #000;">$url</span><span style="color: #000;">, </span><span style="color: #000;">$attributes</span><span style="color: #000;">) {
</span><span style="color: #555;">// If alt text is set, add it to the <img> tag,
</span><span style="color: #000;"> </span><span style="color: #555;">// Else use the title.
</span><span style="color: #000;"> </span><span style="color: #00C;">if</span><span style="color: #000;"> (</span><span style="color: #000;">$node</span><span style="color: #000;">-></span><span style="color: #000;">field_alt_text</span><span style="color: #000;">[</span><span style="color: #000;">0</span><span style="color: #000;">][</span><span style="color: #F39;">'value'</span><span style="color: #000;">]) {
</span><span style="color: #555;">// Clean the output, just in case.
</span><span style="color: #000;"> </span><span style="color: #000;">$alt</span><span style="color: #000;"> = </span><span style="color: #000;">t</span><span style="color: #000;">(</span><span style="color: #00C;">htmlentities</span><span style="color: #000;">(</span><span style="color: #000;">$node</span><span style="color: #000;">-></span><span style="color: #000;">field_alt_text</span><span style="color: #000;">[</span><span style="color: #000;">0</span><span style="color: #000;">][</span><span style="color: #F39;">'value'</span><span style="color: #000;">],</span><span style="color: #00C;">ENT_QUOTES</span><span style="color: #000;">));
} </span><span style="color: #00C;">else</span><span style="color: #000;"> {
</span><span style="color: #000;">$alt</span><span style="color: #000;"> = </span><span style="color: #000;">$node</span><span style="color: #000;">-></span><span style="color: #000;">title</span><span style="color: #000;">;
}
</span><span style="color: #00C;">return</span><span style="color: #000;"> </span><span style="color: #000;">theme</span><span style="color: #000;">(</span><span style="color: #F39;">'image'</span><span style="color: #000;">, </span><span style="color: #000;">$url</span><span style="color: #000;">, </span><span style="color: #000;">$alt</span><span style="color: #000;">, </span><span style="color: #000;">$node</span><span style="color: #000;">-></span><span style="color: #000;">title</span><span style="color: #000;">, </span><span style="color: #000;">$attributes</span><span style="color: #000;">, </span><span style="color: #00C;">FALSE</span><span style="color: #000;">);
}</span>