Override image-formatter.html.twig

Question

I'm looking for an option to override the image-formatter.html.twig template in my own theme. But in the HTML page output (twig debug is set to true) there's no option listed to override the formatter template. The only thing I see is:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' -->

I need to place a rel attribute for the link which surrounds the image.

I found a solution which uses the option that you can write your own field formatter in your own module. But that seems to be too complex for this simple task.

Answer 1

In your .theme file, add this suggestions alter hook (and flush caches so the new hook definition is picked up):

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function MYTHEME_theme_suggestions_image_formatter_alter(array &$suggestions, array $variables) {
  $entity = $variables['item']->getEntity();
  $field_name = $variables['item']->getParent()->getName();
  $suggestions[] = 'image_formatter__' . $entity->getEntityTypeId() . '__' . $entity->bundle() . '__' . $field_name;
}

Then if you look at the twig_debug output, you should see something like:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'image_formatter' -->
<!-- FILE NAME SUGGESTIONS:
   * image-formatter--node--article--field-image.html.twig
   x image-formatter.html.twig
-->

Once that is done, you can create your template file called image-formatter--node--article--field-image.html.twig in the templates directory of your theme, flush caches again so the template is picked up, and override the template with any changes you'd like.

This should include a caveat that the code hasn't been thoroughly tested :)