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 ?
Aquí hay un código basado en la respuesta de Ryan .
theme
entheme_image_style
el nombre de su tema.agregue las siguientes líneas a la función
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í:fuente
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.
¿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í:fuente
$variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class]
.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 }
fuente
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
Sustituya .views-field-field-useimage img por su propio selector.
Presiona el botón de caché vacío y pruébalo.
fuente
Una sugerencia para esta respuesta .
Cambiar el
a
por lo que el nombre del estilo de imagen se agrega a la matriz de clase y nada se aplasta inadvertidamente.
Fragmento completo:
fuente