How do I render a field template?

Question

I have problems with rendering twig templates inside my block theme. Is it possible to display default template for a field that I've fetched with entity manage query?

I've got a custom carousel slider module which uses 'Banner' node type. It has a banner image, link URI fields. Everything works fine, but I would like to display the responsive image template instead of building my own HTML.

Here's how I do it right now.

<div id="Carousel" class="glide">
    <div class="glide__arrows">
        <span class="glide__arrow prev" data-glide-dir="<">&lt;</span>
        <span class="glide__arrow next" data-glide-dir=">">&gt;</span>
    </div>

    <div class="glide__wrapper">
        <ul class="glide__track">
            {% for item in baners %}
                <li class="glide__slide">
                    <div class="box">
                        <img src="{{ file_url(item.field_baner.0.entity.uri.value)}}" alt="{{ item.field_baner.alt}}" />
                        <div class="box2">
                        {% if item.field_url.uri %}
                            <h2>
                                <a href="{{ item.field_url.uri }}">
                                    {% if (item.field_description.value) %}
                                        {{ item.field_description.value }}
                                    {% endif %}
                                    {% if (item.field_url.title) %}
                                        <br /><span class="goto">{{ item.field_url.title }} &gt;</span>
                                    {% endif %}
                                </a>
                            </h2>
                        {% endif %}
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="glide__bullets"></div>
</div>

I am fetching banners this way.

$storage = \Drupal::entityManager()->getStorage('node');
$nids = $storage->getQuery()
    ->condition('type', 'baner')
    ->condition('status', 1)
    ->execute();
return $storage->loadMultiple($nids);

What I would like is to find a way to display a responsive image, such as in the following way.

{{ responsive_image(item.field_baner) }}

Or render them in module class so I could display them in my template.

$banerBuildParams = [
      '#theme' => 'responsive_image',
      '#width' => $variables['width'],
      '#height' => $variables['height'],
      '#responsive_image_style_id' => $variables['responsive_image_style_id'],
      '#uri' => $variables['uri'],
  ];
  //render template
  $template = $this->getTemplate($banerBuildParams);

[edit]

I think I've found a solution to render all the view I can use this code to pretender nodes (not sure it's the best approach to the problem):

node_view($baner, 'teaser'); 

The problem I've still got is that I use external jquery library which requires some specific html formatting which not comply with the default generated tags. Maybe somebody more experienced with Drupal could suggest something? I know I can create my own plugin for field type. It seems a lot trouble for just one not reusable element. What if I need to group two fields in specific DIV and some others in different one? Using node_view I am loosing the way my code looks like:/

Answer 1

In general, you don't access templates directly as an API, you build render arrays. To get the render array of a field, each field item and item list class has a view method. That method accepts either the name of a view mode and uses that configuration or you can also directly pass in the configuration you want to use (Basically the array that you have in view display config entities for each component).

You can try calling that from twig directly, e.g. {{ item.view('teaser') }} or prepare it in preprocess of your template.