1

I have some images uploaded with a post which I now want to inset in the body text. It is a Wygwam field so I can use the built in integration but is it possible to add a custom class to the images when I do this without having to look at the source? I want to add class="img-responsive".

1

One approach is to define a custom style for the "Styles" toolbar menu in Wygwam. When the user applies the style (just a couple clicks) Wygwam applies your css class to the images as desired. The class is applied without the user needing to manually edit in source mode. The following snippet would do the trick (See the docs):

{name:'Responsive Image',element:'img',attributes:{'class': 'img-responsive'}}

The other approach (assuming you want to apply a style to all images in the wygwam field), is to just wrap your Wygwam custom field with a div that you can use as a descendant selector...

<div class="wygwam-field">
    {your_wygwam_custom_field}
</div>

...and then in your CSS, use .wygwam-field img as your selector instead of .img-responsive. Again, this only works if you'd consistently want this style applied to all images in the Wygwam field.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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