Como adicionar um atributo CSS à imagem gerada com estilo de imagem


10

Praticamente tudo no título. Gostaria de adicionar classes CSS às imagens geradas por uma função de tema no estilo de imagem, para que a saída se pareça com:

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

Existe alguma maneira de fazer isso?

Respostas:


4

Se você estiver confortável substituindo as funções do tema no template.php do seu tema, basta criar uma função YOURTHEME_image_style ():

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


Bem, eu tenho que dizer que a função do tema ainda é muito imprecisa para mim agora. De alguma forma, você teria algum link para recursos que poderiam esclarecer isso?
silkAdmin

Portanto, a idéia é copiar o código na página vinculada no arquivo template.php do seu tema (se o tema não tiver um, crie), altere a palavra "theme" em theme_image_style para o nome do tema, o que pode seja zen_image_style ou garland_image_style, etc.
Ryan Price

4

Aqui está um código com base na resposta de Ryan .

  1. Copie e cole o código de theme_image_style no template.php do seu tema.
  2. substituir themeno theme_image_stylecom o nome de seu tema.
  3. adicione as seguintes linhas à função

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

Em vez de 'my-class'querer usar o nome do estilo real, usei $variables['style_name']. Os nomes de estilo de imagem sempre são nomes de classe css válidos; portanto, não deve haver problemas com essa abordagem. A função deve ficar assim:

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

4

Use a função de pré-processo

Você deseja que essa classe na imagem real, a adição de JS / jQuery seja confusa e quebre se o conteúdo estiver carregado com 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';

        }

    }

}

Por que não uso theme_image_style () para isso

O problema de fazer isso por theme_image_style () é que ele substitui a função de saída para apenas um campo, e se você tiver vários campos em lugares diferentes ... muitos THEME_field__field_photo__team($variables)alcançando o mesmo que o descrito acima usando theme_image_style () ficaria assim:

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

}

1
Concordado, usar um pré-processador é uma boa maneira de seguir aqui. Como o pré-processador de campo pode ser chamado várias vezes por página, que tal usar um pré-processador de nó? Para um campo 'field_images', você pode adicionar as classes via $variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class].
Mesch

Você está certo, talvez chamar isso usando um pré-processador de nó seja mais eficiente.
Duncanmoo

1
Isso me ajudou a adicionar uma propriedade para estar em conformidade com os metadados do Schema.org. Obrigado!
Patrick

1

Se a razão pela qual você deseja adicionar a classe é fornecer um css extra para as imagens, você pode contornar isso indo para um nível superior na árvore do dom. Suas imagens devem ser incluídas em um campo div que tenha uma classe como .field-type-image. Com isso em mente, você pode escrever um seletor que escolha as imagens, algo como:
div.field-type-image img {border: 1px solid #ccc }

ou um mais específico como:

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


1

Eu acho que você deseja usar isso para legendas. Depois de muita procura, use o Jquery. Esse material é para o Drupal 7.

crie seu arquivo js. Chame de caption.js. Você pode chamar de outra coisa. Armazene-o dentro do seu tema em algum lugar.

Verifique se o script foi chamado editando seu arquivo theme.info e adicionando scripts [] = pathtoyourfile / caption.js

caption.js deve conter o seguinte código

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

Substitua .views-field-field-useimage img pelo seu próprio seletor.

Aperte o botão de cache vazio e tente.


0

Uma sugestão para esta resposta .

Mudar o

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

para

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

portanto, o nome do estilo da imagem é anexado à matriz da classe e nada é pressionado inadvertidamente.

Snippet completo:

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);
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.