Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

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

Solved by Claudio Fernandes View solution

Started by Pedro M 6 years ago · 6 replies · 669 views

6 years ago

Hello there.

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

YAML

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:

TWIG

{% 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:

YAML

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 years ago

Did you find a solution for this query?

Hugh Barnes Regular

Grav Forum Moderators Veteran First Post Conversation Starter Well Liked 577 posts

2 years ago

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 :/

2 years ago

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:

TWIG

{#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>

2 years ago Solution

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

YAML

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

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 %}

last edited 03/18/24 by Claudio Fernandes

2 years ago

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

Did you finally solve the problem with this code?

2 years ago

Yes it solved it. Thanks.

Topic	Replies	Views	Activity
Well done Grav Team General · by Jerry Hunt, 4 days ago	2	104	18 hours ago
Grav 2, Admin Next, API and Migrate are now in production! General · by pamtbaau, 23 hours ago	1	88	23 hours ago
Welcome to the new Grav Forums! General · by Andy Miller, 1 day ago	0	53	1 day ago
How active is Grav? General · by Marcel, 12 months ago	6	381	5 days ago
Contents in bin folder delete itself during core updates General · by Duc , 6 days ago	3	69	6 days ago

Suggested topics