이미지 스타일로 생성 된 이미지에 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

Ryan의 답변을 기반으로 한 코드가 있습니다.

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를 통해 추가하는 것은 실제 이미지에서 해당 클래스를 원하고 콘텐츠가 아약스로드되면 중단됩니다.

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 파일을 편집하고 스크립트를 추가하여 스크립트가 호출되는지 확인하십시오 [] = 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);
}