As shown in the picture, I have the teaser views of a taxonomy term Virtual Tour . The teaser shows me the node title, node summary, date submitted and an image uploaded from the 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 do it? enter image description here


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.



You should already have a template suggestions available like :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.