Drupal - How do I theme the teaser?
You should already have a template suggestions available like :
<!-- FILE NAME SUGGESTIONS:
* node--2--teaser.html.twig
* node--2.html.twig
x node--BUNDLE--full.html.twig
* node--BUNDLE.html.twig
* node--teaser.html.twig
* node.html.twig
-->
Make sure you have settings.yml set to twig.config: { debug: true ...
and you will see the suggestions
in the source.
You can set suggestions for any hook like:
function MODULE_theme_suggestions_node_alter(array &$suggestions, array $variables, $hook) {
$node = $variables['elements']['#node'];
$type = $node->bundle();
$view_mode = $variables['elements']['#view_mode'];
$suggestions[] = 'node__'.$type;
$suggestions[] = 'node__'.$type.'__'.$view_mode;
}
The teaser view mode display is controlled on the display modes of the given entity type, in this case, node. You can control the field order and formatters used there, and other modules like Display Suite can enhance the options here.
With that, you can also provide a twig template to change the markup and classes of this view mode being displayed for the node. From there, you can style it all you want once you have the markup and fields the way you want them.
More:
- https://www.drupal.org/docs/8/api/entity-api/display-modes-view-modes-and-form-modes
- https://drupalize.me/blog/201403/exploring-new-drupal-8-display-modes