Як додати атрибут 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. Скопіюйте та вставте код із теми_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 ()

Проблема з цим шляхом через topic_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. Ваші зображення повинні бути включені в поле поле, яке має клас .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. Ви можете назвати це ще чимось. Зберігайте її всередині своєї теми десь.

Переконайтеся, що скрипт викликається, відредагувавши файл topic.info та додавши скрипти [] = 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 для власного селектора.

Натисніть на порожню кнопку кешу і відпустіть її.

Пропозиція до цієї відповіді .

Змінити

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