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.

Files: 

Comments

dmdewey’s picture

Issue summary: View changes
dmdewey’s picture

Issue summary: View changes
dmdewey’s picture

I'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.

dmdewey’s picture

Issue summary: View changes
Cottser’s picture

Thanks 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.

dmdewey’s picture

This is how I normally would get the image url in a template :

if (isset($node) && $node->field_image) {
    $img_uri = $node->field_image['und'][0]['uri'];
    $img_caption = $node->field_image['und'][0]['title'];
    $img_url_large = image_style_url("large", $img_uri);
    $img_url_thumbnail = image_style_url("thumbnail", $img_uri);
}

<a href="<?php print $img_url_thumbnail; ?>" title="<?php print $img_caption; ?>" class="fancybox"><img src="<?php print $img_url_large; ?>" /></a>

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.

Cottser’s picture

Status: Active » Needs review
Related issues: +#2361299: Twig image style filter/function
FileSize
18.54 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Setup environment: Test cancelled by admin prior to completion. View

To 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.

Cottser’s picture

Status: Needs review » Active

Ignore the patch, I was showing a new contributor how to attach patches to an issue :)

Status: Active » Needs work

The last submitted patch, 7: 2291449-27.patch, failed testing.

Cottser’s picture

Status: Needs work » Active
joelpittet’s picture

Version: 8.0.0-beta2 » 8.0.x-dev

Moving to -dev so we can work on this.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.