Jak dodać atrybut CSS do obrazu generowanego za pomocą stylu obrazu

Prawie wszystko w tytule. Chciałbym dodać klasy CSS do obrazów generowanych za pomocą funkcji motywu stylu obrazu, aby dane wyjściowe wyglądały następująco:

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

Czy jest coś takiego?

Jeśli nie masz nic przeciwko zastępowaniu funkcji motywu w szablonie motywu. Php, możesz po prostu utworzyć funkcję YOURTHEME_image_style ():

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

Oto kod oparty na odpowiedzi Ryana .

1. Skopiuj i wklej kod z theme_image_style do swojego szablonu template.php.
2. zastąpić themew theme_image_stylenazwą Twojego motywu.

3. dodaj następujące wiersze do funkcji

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

Zamiast 'my-class'chciałem użyć rzeczywistej nazwy stylu, więc użyłem $variables['style_name']zamiast tego. Nazwy stylu obrazu są zawsze prawidłowymi nazwami klas css, więc nie powinno być problemu z tym podejściem. Funkcja powinna wyglądać następująco:

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

Użyj funkcji wstępnego przetwarzania

Chcesz, aby ta klasa na rzeczywistym obrazie, dodawanie przez JS / jQuery było niechlujne i pęka, jeśli zawartość jest ładowana przez 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';

        }

    }

}

Dlaczego nie używam do tego theme_image_style ()

Problem z robieniem tego za pomocą theme_image_style () polega na tym, że zastępuje on funkcję wyjściową tylko dla jednego pola, co jeśli masz wiele pól w różnych miejscach ... zbyt wiele THEME_field__field_photo__team($variables)osiągających to samo co powyżej przy użyciu theme_image_style () wyglądałoby tak:

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

}

Jeśli chcesz dodać klasę, aby zapewnić dodatkowe css dla obrazów, możesz to obejść, przechodząc na wyższy poziom w drzewie dom. Twoje obrazy powinny być zawarte w polu div, który ma klasę podobną .field-type-image. Mając to na uwadze, możesz napisać selektor, który wybiera obrazy, na przykład:
div.field-type-image img {border: 1px solid #ccc }

lub bardziej szczegółowy, taki jak:

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

Myślę, że chcesz użyć tego do podpisów. Po wielu polowaniach użyj Jquery. To jest dla Drupala 7.

utwórz plik js. Nazwij to caption.js. Możesz to nazwać czymś innym. Umieść go gdzieś w swoim motywie.

Upewnij się, że skrypt zostanie wywołany, edytując plik theme.info i dodając skrypty [] = pathtoyourfile / caption.js

caption.js powinien zawierać następujący kod

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

Zastąp .views-field-field-useimage img dla własnego selektora.

Naciśnij pusty przycisk pamięci podręcznej i spróbuj.

Sugestia dla tej odpowiedzi .

Zmienić

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

do

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

więc nazwa stylu obrazu jest dołączana do tablicy klas i nic nie zostaje przypadkowo zgniecione.

Pełny fragment kodu:

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