Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
There seems to be no way to target a specific image field deeper than the field template. When enabling Twig debug mode in Drupal 8 beta 1 and 2, there are no twig name suggestions that can replace the default output created by the image.html.twig file.
A possible use case would be to use the image as a css background image or to link the image file for a jquery lightbox script. This kind of regression is going to make themers and site-builders be at the mercy of having to use a custom image formatter module or something like the ds module. I, for one, don't like to have to rely on ds if it can be helped because I prefer to stick with core whenever possible.
Some twig logic within the image.html.twig file itself could be used to target a specific image field but seems like it would be too much of a hack. One of the things I love about Drupal 7 php templates is that you have better control of the image output from the theme layer without having to install field formatter modules.
I'm guessing that theme builders could work around this issue by using a hook to delegate the image template based on field name or image style. I am planning on learning how to implement my own image formatters for Drupal 8, but I still think it should be possible to manipulate the output of images in this way. It might turn off new Drupal users who are seeking flexible handling of image files using Twig.
Proposed resolution
A resolution would be for Drupal to recognize twig templates such as this :
<!-- FILE NAME SUGGESTIONS:
* image--node--field-field_name--page.html.twig
* image--node--field-field_name.html.twig
* image--node--page.html.twig
* image--field-field_name.html.twig
x image.html.twig (only template currently recognized)
-->
I don't know what the performance implications are regarding this, but I strongly suggest that an approach like this is considered because image handling is very important for Drupal's appeal to less tech savvy themers.
| Comment | File | Size | Author |
|---|
Comments
Comment #1
dmdewey CreditAttribution: dmdewey commentedComment #2
dmdewey CreditAttribution: dmdewey commentedComment #3
dmdewey CreditAttribution: dmdewey commentedI've just thought of another possibility for resolving the issue. How about allowing the creation of image/field formatters on the theme level? Image styles can be created in the theme layer so why not custom image/field formatters?This suggestion should probably be moved to a feature request.
Comment #4
dmdewey CreditAttribution: dmdewey commentedComment #5
star-szrThanks for the report! The "regression" part is not clear to me, can you show an example of how you would accomplish this in D7?
You may want to try implementing hook_theme_suggestions_HOOK_alter() for image templates, e.g., MYTHEME_theme_suggestions_image_alter(). More info here: https://www.drupal.org/node/2100775, but in general that's how you would add those extra template options. In general you're at the mercy of what the calling code passes in though, so unfortunately I'm not sure you would be able to grab the field information.
Edited to mention the correct suggestions hook.
Comment #6
dmdewey CreditAttribution: dmdewey commentedThis is how I normally would get the image url in a template :
This is usually how I format my images because I work on a lot of media sites that are using my own custom implementation of fancybox (a lightbox picture viewer).
Most of the time I'll set the image to not display in the display settings for a content type and use
print render($content);for just the body text. My way is probably not the "Drupal" way, though. I guess I'm going to have to learn more about the correct way to do these things.Comment #7
star-szrTo me that seems like a job for a field formatter, but you could probably accomplish it in a Twig template using #2361299: Twig image style filter/function.
Comment #8
star-szrIgnore the patch, I was showing a new contributor how to attach patches to an issue :)
Comment #10
star-szrComment #11
joelpittetMoving to -dev so we can work on this.
Comment #22
catchThis is a new feature.