Add different classes to the images that where uploaded with multi-upload

Question

I'm looking for the best solution to add different classes to images that where multi uploaded to one field.

So not a class to the field, but a possibility to add different classes to each single image...

So my client will be able to add for ex. the class 'right' that will let the image float to the right and be only 60% width. And then for a other image add the class 'left' for example...

So if you look at the image above, you see my client can add for each image a different alt and title. There should show up there a space where he can add for each image a different class.

Any tips, links or other sulotions to reach my goal are welcome! Thanks in advance.

Answer 1

Go to admin/structure/file-types/manage/image/fields. Add a text field for the class.

Now the difficult part is how you are going to get the class as an attribute into the img tag, or into a wrapper div.

If you are using Views you can easily 'rewrite the output of this field' and do it in there.

If you want to render by view mode you can use Display Suite and a custom field template, or you can just forego Display Suite and implement your own custom template file for the file display : Displaying Media

And perhaps rethink your methodology. You can let your client use CKEditor and set the classes to the images right there where he has a proper preview of how it is going to display. You can add your own custom predefined styles that is selectable from a select list. It is also possible to right click on an image and set the classes on.

Answer 2

I want to add what I did to help out anyone else looking for alternatives.

I used the function hook_preprocess_image. In it, I took the file name and added it to the attributes > class array. This way it shows up as <img class="img-responsive image-name" src="/path/to/image-name.png" width="300" height="400" alt="">.

function template_preprocess_image(&$variables)  {
  // take image path and save image file name
  $image_name = str_replace(array('public://', '.png', '.jpg', '.svg'), '', $variables['path']);

  // add name as class for image
  $variables['attributes']['class'][] = $image_name;
}