Drupal: How to wrap inline images into additional markup

Question

Howdy,

i need to wrap images into additional markup for further css styling. I would like to have something like that: <p><span><img src="path/to/image" alt="alt"/></span></p>.

The images are added directly on the specific node using following modules:

1. http://drupal.org/project/insert
2. http://drupal.org/project/image
3. http://drupal.org/project/cck -> ImageField

Here is the content of my node-[type].tpl.php:

<div id="article">
    <div id="article-header">
        <h2><?php print $title; ?></h2>
        <?php if ($submitted): ?>
            <p class="created"><?php echo date("d. F Y - H:i", $created).t(' von ').$name; ?></p>
        <?php endif; ?>
    </div>

    <div class="article-body">
        <?php print $content; ?>
    </div>

    <?php if ($links): ?>
        <div class="extra-links">
            <?php print $links; ?>
        </div>
    <?php endif; ?>
</div>

<?php if($node->comment == 0 && isset($node->comment_count) && $node->comment_count < 1): ?>
    <div id="comments">
        <p class="note">Kommentare geschlossen</p>
    </div>
<?php endif; ?>

I think i have to do something with $content. But i really have no idea. Any suggestions?

Answer 1

If you are using the insert module then there is an option to add "Additional CSS classes" to the image in the settings for insert in the imagefield.

This will add a class to <img> (but it will not wrap a span around <img> like you want). Using this class you can do custom css you want.

This approach has some caveats

1. You will need to use the WYSIWYG filter module (http://drupal.org/project/wysiwyg_filter) to prevent classes from being stripped out from the img tag (or you will need to use the full html format which is obviously not a good idea if non administrators are entering content on the site)
2. You need to allow the class attribute for the tag in the WYSIWYG settings. However under advanced options make sure you allow the classes that are allowed.
3. You should disable the HTML Filter as you are now using the WYSIWYG filter

so your rule for tag will look something like img[!src|title|alt|class]. Make sure the class you want e.g. custom-css-class is whitelisted under the advanced rules section for WYSIWYG

Edit: Ok I understand your requirement better now.

1. For imagefields that are NOT inline (i.e. in content areas) you can override the content-field.tpl.php by renaming it to content-field-[FIELD_NAME].tpl.php You can wrap the imagefield with whatever tags you want in this file. Please see http://www.advantagelabs.com/drupal-colonoscopy-or-how-theme-cck-field-drupal-6

2. For images that are inline and you still want to add some wrapping HTML you can use http://drupal.org/project/customfilter This is an awesome module (tricky to use but it works!!). You can search for the tag and add arbitrary stuff around it. See http://drupal.org/node/210551 for documentation