Adding a different class for each image styles

I think this would be wonderful to include in the module!

(In my case, I'm using responsive images and have full-width image styles for each breaking point, but due to slight inconsistencies between browsers, the image might switch slightly before or after the breakpoint and having a class specifically for my full-width responsive images has allowed me to apply styles (width: 100%) that hide those inconsistencies.)

Good idea. Can be very useful. Though I think this should also cover files uploaded to and rendered from a file field. I wonder if this should handed in file_entity?

I needed this and found some code on Drupal stackexchange. http://drupal.stackexchange.com/a/40483to

It uses a theme function to automatically creates a class name based on the image style name. All you do is paste this code at the bottom of your theme's template.php file and change the MYTHEME to the name of the theme. ex. if you use bartik it would be bartik_image_style.

function MYTHEME_image_style($variables) {
// Determine the dimensions of the styled image.
$dimensions = array(
'width' => $variables['width'],
'height' => $variables['height'],
);

image_style_transform_dimensions($variables['style_name'], $dimensions);

$variables['width'] = $dimensions['width'];
$variables['height'] = $dimensions['height'];

$variables['attributes'] = array(
'class' => $variables['style_name'],
);

// Determine the url for the styled image.
$variables['path'] = image_style_url($variables['style_name'], $variables['path']);
return theme('image', $variables);
}

There is a hook available to alter wysiwyg media markup. I've been using this code in a module:

/**
 * Implements hook_media_token_to_markup_alter().
 */
function mymodule_media_token_to_markup_alter(&$element, $tag_info, $settings) {
  if (!isset($element['content']) || $element['content']['#entity_type'] != 'file' || $element['content']['#bundle'] != 'image') {
    return;
  }
  
  // Add the image style to classes.
  $element['content']['file']['#attributes']['class'][] = 'image-style-' . $element['content']['file']['#style_name'];
}

By default media now adds these classes to files inserted that have these classes: media, media-element-container, and media-$view_mode. Otherwise you can use the media_token_to_markup_alter() mentioned in #5

@arthur - I think does normally, but it doesn't seem to be working on when using media_vimeo

Here is the output from a media_vimeo-2.x-dev insert:

<div class="media-vimeo-video media-vimeo-1">
  <div class="fluid-width-video-wrapper" style="padding-top: 56.25%;"><iframe class="media-vimeo-player" src="http://player.vimeo.com/video/22439234?color=" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid787471"></iframe></div>
</div>

Here is the output from a media_youtube-2.x-dev insert:
Note: notice the file-4-x-3-video, that is the view mode

<div class="media-youtube-video media-element file-4-x-3-video media-youtube-1">
  <div class="fluid-width-video-wrapper" style="padding-top: 75%;"><iframe class="media-youtube-player" title="Cat Man Do - Simon's Cat" src="//www.youtube-nocookie.com/embed/w0ffwDYo00Q?wmode=opaque&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen="" id="fitvid618069">Video of Cat Man Do - Simon&amp;amp;#039;s Cat</iframe></div>
</div>

I will post an issue for media_vimeo. I just wanted to point out that some provider modules might not be updated yet.

Here is the issue for media_vimeo #1934632: Use the standard embedded media module output if you want the fix.

Adding a class to Article body iframe for youtube embed code using jQuery drupal7

$(document).ready(function() {
	var src = $('.node-type-article .field-name-body iframe',this).attr('src');  // Getting the current src of an Iframe.
    	var res = src.match(/youtube.com/);  // Search the text "youtube.com" in source.
        if (res == 'youtube.com') {$("iframe").addClass("youtube_embed");}	 // add the class to the article body iframe.
});