Как добавить атрибут CSS к изображению, созданному с помощью стиля изображения

Почти все в названии. Я хотел бы добавить классы CSS к изображениям, сгенерированным с помощью функции темы стиля изображения, чтобы результат выглядел следующим образом:

<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image"> 

Есть ли способ сделать это?

Если вам удобно переопределять функции темы в template.php вашей темы, вы можете просто создать функцию YOURTHEME_image_style ():

http://api.drupal.org/api/drupal/modules--image--image.module/function/theme_image_style/7

Вот код, основанный на ответе Райана .

1. Скопируйте и вставьте код из theme_image_style в template.php вашей темы.
2. заменить themeв theme_image_styleс именем вашей темы.

3. добавьте следующие строки в функцию

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

Вместо того, 'my-class'чтобы использовать имя фактического стиля, я использовал $variables['style_name']вместо этого. Имена стилей изображения всегда являются допустимыми именами классов CSS, поэтому с этим подходом не должно возникнуть никаких проблем. Функция должна выглядеть так:

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);
}

Используйте функцию предварительной обработки

Вы хотите, чтобы этот класс на реальном изображении, добавление через JS / jQuery является грязным и ломается, если контент загружен ajax.

function THEMENAME_preprocess_field(&$variables) {


    if($variables['element']['#field_name'] == 'field_photo'){

        foreach($variables['items'] as $key => $item){

            $variables['items'][ $key ]['#item']['attributes']['class'][] = 'img-circle';

        }

    }

}

Почему я не использую theme_image_style () для этого

Проблема, связанная с выполнением этого с помощью theme_image_style (), заключается в том, что он переопределяет функцию вывода только для одного поля, а что, если у вас есть несколько полей в разных местах ... слишком много для THEME_field__field_photo__team($variables)достижения того же, что и выше с использованием theme_image_style (), будет выглядеть так:

// Override the field 'field_photo' on the content type 'team'
function THEMENAME_field__field_photo__team($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['img-circle'],
    );

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

}

Если причина, по которой вы хотите добавить класс, состоит в том, чтобы предоставить некоторые дополнительные CSS для изображений, то вы можете обойти это, перейдя на верхний уровень в дереве dom. Ваши изображения должны быть включены в поле div, которое имеет класс как .field-type-image. Имея это в виду, вы можете написать селектор, который выбирает изображения, что-то вроде:
div.field-type-image img {border: 1px solid #ccc }

или более конкретный, такой как:

div.field-type-image div.field-items div.field-item img {border: 1px solid #ccc }

Я думаю, что вы хотите использовать это для подписей. После долгой охоты используйте Jquery. Этот материал для Drupal 7.

создайте свой JS-файл. Назовите это caption.js. Вы можете назвать это как-то еще. Храните это в своей теме где-нибудь.

Убедитесь, что скрипт вызывается, отредактировав файл theme.info и добавив scripts [] = pathtoyourfile / caption.js

caption.js должен содержать следующий код

(function ($) {
Drupal.behaviors.caption = {
attach: function(context, settings) {
$('.views-field-field-useimage img').addClass('caption');
  }}})
(jQuery);

Замените .views-field-field-useimage img на ваш собственный селектор.

Нажмите пустую кнопку кэша и попробуйте.

Предложение для этого ответа .

Изменить

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

в

$variables['attributes']['class'][] = $variables['style_name'];

таким образом, имя стиля изображения добавляется к массиву классов, и ничего случайно не сдавливается.

Полный фрагмент:

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']['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);
}