How to call subfields in Twig (from .yaml file)

1

Hello there.

I’m changing a particle of Gantry framework, with Grav. I have the .yaml file with the following code:

items:
      type: collection.list
      array: true
      label: Tab Items
      description: Create each tab to display.
      value: name
      ajax: true
      fields:
        .member:
          type: input.imagepicker
          label: Member Image
        .position:
          type: input.text
          label: Position
        .socials:
          type: collection.list
          label: Social Links
          array: true
          value: name
          ajax: true
          fields:
            .social_text:
              type: input.text
              label: Social Text
            .social_link:
              type: input.text
              label: Social Link

In Twig template I have:

{% for item in particle.items %} 
     <div class="person-name">
         <h3>{{item.name_member}}
     </div>
     <div class="person-position">
        {{item.position}}
    </div>
    <div class="person-social">
        {% for item in particle.socials %}
           <a target="_blank" href="{{item.link}} aria-label="{{item.text}}"><i class="{{item.icon}}"></i></a>
         {% endfor %}
    </div>

In Layout.yaml file I have:

items:
        -
          member: 'gantry-media://member-man..png'
          position: Something
          name_member: Anybody
          socials:
            -
              social_text: Facebook
              social_link: 'https://facebook.com'
              social_icon: 'fa fa-facebook'
              name: facebook
          name: Anybody

The question is How can I call to socials items from Twig template?. I’ve tried some alternatives (for item in particle.socials, for item in particle[’.socials’], for social in socials). I don’t know how can I do it.

Can anybody help me?
Thanks in advance.

2

Did you find a solution for this query?

4

It looks to me like there are a number of problems with @pmoreno’s code there. It was long time ago!

Not sure what output they got, but I’m sure using the Twig loop variable item in the same scope wasn’t helpful. The loops are pretty messed up actually. There seem to be several mistakes.

You want one loop for the items and one inside it for the socials list. Changing the last to something like {% for social in item.socials %} should get you a long way to figuring it out. Also the social fields should be referenced more like social.social_link etc :confused:

5

This was a long time ago, and now I can’t even find that code in any of my projects, but I was able to implement something similar in the Editorial theme, specifically in the Team modular template. Something like that:

{#Teamcontainer#}
<div class="team">

     {# Members list #}
     {% for member in page.header.team %}
     <div class="member {{ columns }}">
         <div class="text">
             {% set member_image = page.media[member.image] %}
             {{ member_image.html(member.name, member.name,'')|raw }}
             <h3>{{ member.name|raw }}</h3>
             <p>{{ member.position|raw }}</p>
             <p>{{ member.details|raw }}</p>
         </div>
         <div class="links">
             {% for item in member.social_media %}
             {# Fontawesome icons only work with brands family #}
             <a class="icon brands fa-{{ item.name|lower|raw }}"
             target="_blank"
             href="{{ item.url }}"
             alt="{{ item.name|raw }}"
             title="{{ item.name|raw }}">
             </a>
             {% endfor %}
         </div>
     </div>
     {% endfor %}
</div>
1 Like
6

Thank you for your suggestions but I still can’t get my setup to work. To clarify, I’m creating an accordion particle with Q&A and inside each answer I want to add links to references. The backend code works and I can call each Q&A in the frontend, but I can’t get the references part to show in the frontend.

yaml file

name: Accordion
description: Display Accordion.
type: particle

form:
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable to the particles.
      default: true

    tabs:
      type: container.tabs
      fields:
        tab_main:
          label: Contents
          fields:
            accordions:
              type: collection.list
              array: true
              label: Accordion Items
              description: Create each accordion item to display.
              value: name
              ajax: true

              fields:
                .question:
                  type: input.text
                  label: Question
                .answer:
                  type: textarea.textarea
                  label: Answer

                references:    
                  type: collection.list
                  array: true
                  label: Links
                  description: Create links
                  value: name
                  ajax: true  

                  fields:
                    .reference_link:
                      type: input.text
                      label: Link
                      description: Input the item link.
                    .reference_linktext:
                      type: input.text
                      label: Link Text
                      description: Input the text for the item link.

The html.twig

{% extends '@nucleus/partials/particle.html.twig' %}

{% block particle %}

   {% for accordion in particle.accordions %}

        {{ accordion.question|raw }} 

        {{ accordion.answer|raw }} 

 

        {% for item in particle.references %}

            {{ item.reference_link|raw }} {{ item.reference_linktext|raw }} 

        {% endfor %}


   {% endfor %}

{% endblock %}

Thank you for any help.

Solved
Change {% for item in particle.references %} to
{% for item in accordion.references %}

7

Did you finally solve the problem with this code?

8

Yes it solved it. Thanks.