5

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?

1 Answer 1

3

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

3
  • Thank you for your answer but this is not what i need to do. I can select my image simply with #article img {} in my css file and do some solid css styling on it. But i need additional markup to solve my layout problem. You should probably know that i need to use multiple css background images. Css 3 and Javascript (jQuery) are not an option. Sep 17, 2010 at 17:08
  • You can override content-field.tpl.php for imagefields and use custom filter (see edited answer above) Sep 17, 2010 at 17:29
  • NoParrots, the custom filter module is a great suggestion but to comlicated for me :) I found a other way. drupal.org/project/wysiwyg_imageupload Added custom HTML by default. I changed the module for my concerns and it works well now. Thank again very much :) Sep 18, 2010 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.