Image field and links not showing in view block template

Question

I have a CT team_members with the following fields.

field_team_member_image

field_team_member_name

field_member_designation

field_social_media_links(Multiple values with links to twitter, instagram, fb and linkedin)

I created a view block out of it and placed it in my desired region.

Now when I templated this,

in the block template(block--theme-name-views-block--team-members-block-block-1.html.twig), I gave the outline with the title and label as follows:

<section id="team" class="team">
    <div class="container" data-aos="fade-up">
        <div class="section-title">
            <h2>Team</h2>
            <p> {{ label }} </p>
        </div>
        <div class="row">
            {{ content }}
        </div>
    </div>
</section>

and for each repeating field(views-view-fields--team-members-block.html.twig) template:

<div class="col-lg-3 col-md-6 d-flex align-items-stretch">
    <div class="member" data-aos="fade-up" data-aos-delay="100">
        <div class="member-img">
            <img src="{{ fields.field_team_member_image.content }}" class="img-fluid" alt="">
            <div class="social">
                {% for item in fields.field_social_media_links %}
                    <a href="{{ item.url }}"><i class="bi bi- {{ item.title }}"></i></a>
                {% endfor %}
            </div>
        </div>
        <div class="member-info">
            <h4>{{ fields.field_team_member_name.content }}</h4>
            <span>{{ fields.field_member_designation.content }}</span>
        </div>
    </div>
</div>

But the image is not displaying at all (name and designation coming). I changed the image to URL to image in the view field formatter. Also, the social media links are not iterating and not displaying the links I need. Any help is appreciated.

UPDATE

Image worked with directly given the field and applying the image style from the view settings.

Now the problem is with displaying the links

When I did the kint on the links field (

{{ kint(fields.field_social_media_links.content) }}

) I got it as follows:

protected string -> string (427) " <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_field' --> <!-- BEGIN OUT...
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_field' -->
<!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' -->
<a href="https://www.twitter.com">twitter</a>, <a href="https://www.facebook.com">facebook</a>, <a href="https://www.instagram.com">instagram</a>, <a href="https://www.linkedin.com">linkedIn</a>
<!-- END OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' -->

Hope somebody got insight on this.

Answer 1

Usually in the view twigs template you should be focus on view templates and not use "block" unless you really need.

Twig order for views are:

1. views-view--[viewID]--[page/blockID].html.twig
2. views-view--unformatted--[viewID]--[page/blockID].html.twig
3. views-view-fields--[viewID]--[page/blockID].html.twig

On the first level it's your wrapper, where you call header, footer, content and "high level" elements of your view

Second level is where you can create a wrapper for each group of fields

Third and last level is where you can call each fields.

About your problem with images, you have 2 type of fields, "image" and "media".

If you are using image field, in your view under the "formatter" you need to set "URL to image", then you ca use on your tag , it is also possible to choose an image style for your image.

If you are using "media" field, first you need to go to "manage display" of your media type "image" and create a new view mode, let's say "view url", activate view mode you just created and under "format" of your image field choose "URL to image" and an image style if needed.

Then, in your view you need to choose "rendered entity" under formatter and choose view mode you created "view url", with this way you will be able to output URL to your image and use tag .