I have more than thousand images on my site. adding a class to each image manually is very time consuming process is there any way to add the class "adaptive-image" to all images already uploaded automatically.

  • How are you displaying these images? How did you upload them - through something like IMCE or image fields? Commented Mar 3, 2016 at 12:26
  • You add the class to the template that displays the images. Else target the images and surrounding html with appropriate CSS selectors and duplicate the adaptive-image CSS. Commented Mar 3, 2016 at 12:42
  • @AramBoyajyan Some images are displayed using direct link in html and others using image fields
    – Fawad
    Commented Mar 4, 2016 at 15:37

2 Answers 2


Few ways to do this:

  1. JavaScript. Not the best one, but fastest:

  2. For styling field images, see the response by Manoj Bisht.

  3. For styling images added through WYSIWYG you will have to write a custom text filter and add classes. Depending on the WYSIWYG editor you use, you might be able to create a plugin / set configuration so that all images inserted automatically get certain CSS class.

  4. Ultimately, you can just adjust the CSS of .adaptive-image, or clone the styles and apply them for all img tags.
    Example source:

    .adaptive-image {
      /* Whatever. */

    Change to, or add this:

    img {
      /* Copy styles from .adaptive-image. */

You can write function theme_preprocess_image, like the one give below

theme_preprocess_image(&$variables) {
  $variables['class']['adaptive-image'][] = "true";

It will apply adaptive-image class to all images irrespective of style.

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.