Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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.</p> <p>This will add a class to <code>&lt;img&gt;</code> (but it will not wrap a span around <code>&lt;img&gt;</code> like you want). Using this class you can do custom css you want.</p> <p>This approach has some caveats</p> <ol> <li>You will need to use the WYSIWYG filter module (<a href="http://drupal.org/project/wysiwyg_filter" rel="nofollow noreferrer">http://drupal.org/project/wysiwyg_filter</a>) 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)</li> <li>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.</li> <li>You should disable the HTML Filter as you are now using the WYSIWYG filter</li> </ol> <p>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</p> <p><strong>Edit:</strong> Ok I understand your requirement better now. </p> <ol> <li><p>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 <a href="http://www.advantagelabs.com/drupal-colonoscopy-or-how-theme-cck-field-drupal-6" rel="nofollow noreferrer">http://www.advantagelabs.com/drupal-colonoscopy-or-how-theme-cck-field-drupal-6</a></p></li> <li><p>For images that are inline and you still want to add some wrapping HTML you can use <a href="http://drupal.org/project/customfilter" rel="nofollow noreferrer">http://drupal.org/project/customfilter</a> This is an awesome module (tricky to use but it works!!). You can search for the tag and add arbitrary stuff around it. See <a href="http://drupal.org/node/210551" rel="nofollow noreferrer">http://drupal.org/node/210551</a> for documentation</p></li> </ol>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload