Pregunta:
Estoy tratando de agregar una clase CSS a un estilo de imagen en particular, en Drupal 8. Para este propósito, estoy tratando de configurar una plantilla, pero estoy abierto a todas las soluciones porque sé que me falta conocimiento (he estado enseñándome estas cosas durante los últimos meses).
Específicamente, quiero que todas las imágenes con el nombre de máquina de estilo 'feature_main_960_x_640_' y el nombre de máquina de campo de 'field_image' incluyan la siguiente clase durante el modo de visualización de 'Contenido completo'. Me gustaría que esta clase se agregara a la etiqueta img.
El propósito: que las imágenes destacadas de mis artículos estén centradas cuando se visualiza el contenido completo.
Especificaciones: Drupal 8, el tema es Bootstrap 3, usando el módulo Display Suite.
He usado Display Suite para agregar la clase de 'bloque central' de Bootstrap 3. La clase se agrega antes de la etiqueta img, en un div. Esto no centra la imagen. Solo pude hacer que la imagen se centrara cuando agregué manualmente 'bloque central' dentro de img. También utilicé el módulo Field Formatter Class para este propósito y también agregué la clase a un div en lugar de img: por lo que el problema persiste.
Hasta ahora, he abordado el problema con un mazo y he utilizado la siguiente plantilla para aplicar la clase a todas las imágenes, pero me gustaría ser preciso en la aplicación, como se mencionó anteriormente. Esta es la plantilla que utilicé:
image.html.twig
{% set classes = [
theme.settings.image_shape ? theme.settings.image_shape,
theme.settings.image_responsive ? 'img-responsive',
'center-block',
] %}
<img{{ attributes.addClass(classes) }} />
¿Alguna solución?
Respuesta:
En Drupal 8 puedes hacer esto con hook_preprocess_image en tu archivo de temas mytheme.theme .
/**
* Implements hook_preprocess_image().
*/
function mytheme_preprocess_image(&$variables) {
if ($variables['style_name'] == 'my_custom_image_style') {
$variables['attributes']['class'][] = 'my_css_class';
}
}