How do I theme the teaser?

Question

As shown in the picture, I have the teaser view of a taxonomy term (Virtual Tour) which shows the node title, the node summary, the submission date, and an image added in an image field.

What I would like to achieve is to let the image float to the left of the summary. Is there a way to achieve it?

Answer 1

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

Answer 2

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;
}

Answer 3

In the template file, you can render the teaser in view mode.

{% if view_mode == 'teaser' %}
  <!-- Start Display article for teaser page -->
  <div class="portfolio-v1">      
    {{ content.field_some_portfolio_images }}
  </div>
{% elseif view_mode == 'teaser_2' %}
  <!-- Start Display article for teaser 2 page -->
  <div class="portfolio-v2">      
    {{ content.field_some_portfolio_images }}
  </div>
{% else %}
  <!-- Start Display article for detail page -->
  <article{{ attributes.addClass(classes).addClass('node-detail') }}>
    <div class="post-block portfolio-single">
      {% if content.field_some_portfolio_images %}
        {{ content.field_some_portfolio_images }} 
      {% endif %}
    </div>
  </article>
{% endif %}