Cómo agregar un atributo CSS a la imagen generada con estilo de imagen


10

Casi todo en el título. Me gustaría agregar clases de CSS a las imágenes generadas a través de una función de tema de estilo de imagen, para que la salida se vea así:

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

Hay alguna manera de hacerlo ?

Respuestas:


4

Si se siente cómodo anulando las funciones de tema en template.php de su tema, puede crear una función YOURTHEME_image_style ():

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


Bueno, tengo que decir que la función del tema todavía es muy confusa para mí en este momento. ¿Por casualidad tendrías algún enlace a recursos que pudieran aclarar eso?
silkAdmin

Entonces, la idea es copiar el código de la página vinculada en el archivo template.php de su tema (si su tema no tiene uno, hágalo) y luego cambie la palabra "tema" en theme_image_style por el nombre de su tema, lo que podría be zen_image_style or garland_image_style, etc.
Ryan Price

4

Aquí hay un código basado en la respuesta de Ryan .

  1. Copie y pegue el código de theme_image_style en el template.php de su tema.
  2. sustituir themeen theme_image_styleel nombre de su tema.
  3. agregue las siguientes líneas a la función

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

En lugar de 'my-class'querer usar el nombre del estilo real, entonces usé en su $variables['style_name']lugar. Los nombres de estilo de imagen son siempre nombres de clase CSS válidos, por lo que no debería haber ningún problema con este enfoque. La función debería verse así:

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

Usar la función de preproceso

Desea esa clase en la imagen real, agregar a través de JS / jQuery es desordenado y se rompe si el contenido se carga 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 qué no uso theme_image_style () para esto?

El problema al hacer esto a través de theme_image_style () es que anula la función de salida para un solo campo, ¿qué pasa si tiene múltiples campos en diferentes lugares ... demasiados THEME_field__field_photo__team($variables)logrando lo mismo que el anterior usando theme_image_style () se vería así:

// 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
De acuerdo, usar un preprocesador es una buena manera de ir aquí. Dado que el preprocesador de campo se puede llamar muchas veces por página, ¿qué pasa con el uso de un preprocesador de nodo en su lugar? Para un campo 'field_images', puede agregar las clases a través de $variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class].
mesch

Tiene razón, quizás llamar a esto usando un preprocesador de nodo sería más eficiente.
Duncanmoo

1
Esto me ayudó a agregar una propiedad para cumplir con los metadatos de Schema.org. ¡Gracias!
Patrick

1

Si la razón por la que desea agregar la clase es para proporcionar un poco de CSS adicional para las imágenes, puede evitar esto yendo a un nivel superior en el árbol de dom. Sus imágenes deben incluirse en un campo div que tenga una clase como .field-type-image. Con esto en mente, puede escribir un selector que elija las imágenes, algo así como:
div.field-type-image img {border: 1px solid #ccc }

o uno más específico como:

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


1

Creo que quieres usar esto para los subtítulos. Después de buscar mucho, usa Jquery. Esto es para Drupal 7.

crea tu archivo js. Llámalo caption.js. Puedes llamarlo de otra manera. Guárdelo dentro de su tema en algún lugar.

Asegúrese de que se llama al script editando su archivo theme.info y agregando scripts [] = pathtoyourfile / caption.js

caption.js debe contener el siguiente código

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

Sustituya .views-field-field-useimage img por su propio selector.

Presiona el botón de caché vacío y pruébalo.


0

Una sugerencia para esta respuesta .

Cambiar el

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

a

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

por lo que el nombre del estilo de imagen se agrega a la matriz de clase y nada se aplasta inadvertidamente.

Fragmento 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);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.