0

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.

4
  • Is this a view block? I am asking that because on your first twig it seems not being view twig, but your second it is a view your image field its private or public? have you tried to kint that field? if so, what did come up?
    – Pedro
    Sep 28, 2023 at 14:56
  • Yes its a view block. Actually suggestions hierarchy first give me the block template and then the view fields template. Image is saved in sites/default/files
    – KTM
    Sep 29, 2023 at 16:15
  • your social links, what type of field it is? its a plain text? its a link field? It seems only using item.url will not work, use devel and kint to output twig variable and check where URL is comming from
    – Pedro
    Oct 2, 2023 at 10:19
  • @pedro It's a link field that will have multiple entries
    – KTM
    Oct 3, 2023 at 13:13

1 Answer 1

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 .

2
  • The image render issue is solved by directly giving ` {{ fields.field_team_member_image.content }}` and applied an image style that was done from the views UI itself. Now the issue is with the links. I will post it as an update in the question. And i am using the third template you mentioned.
    – KTM
    Oct 4, 2023 at 16:33
  • if you remove the "kint" option, you will be have rendered links, twitter and facebook. On your view, in link field options you can remove the separator under "multiple field settings, and you will have both links
    – Pedro
    Oct 6, 2023 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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