Need help with display selected option key

Support
1

Hi friends, I’m making a modular page on the site to display social networks.
I created the social.yaml with next code:

title: Social links
'@extends': default

form:
  fields:
    tabs:
      fields:
        content:
          fields: 
            header.social_media:  
              name: features
              type: list
              label: My socila links
              fields:
                .title:
                  type: select
                  label: Name of network
                  default: one
                  options:
                    one: Facebook
                    two: Instagram
                    three: Telegram
                  use: keys
                .text:
                  type: text
                  label: Link to network
                  fields:
                .design:
                  type: select
                  label: Icon design 
                  default: Original
                  options:
                    one: Original
                    two: Custom

As planned, I want to output like this final code:

<ul class="social_media">
<li class="facebook"><a href="#"><i class="fa facebook"></i></a></li>
<li class="instagram"><a href="#"><i class="fa instagram"></i></a></li>
</ul>

In social.html.twig added this, but can display in class=“the name of selected options”

{% for header in page.header.social_media %}
   <ul class="socail_media">
 <li><a href="{{ header.text }}"><i class="fa  key/value of select option "></i></a></li>
 <li><a href="{{ header.text }}"><i class="fa  key/value of select option "></i></a></li>
   </ul>
{% endfor %}

Any ideas, please.

2

You could the following:

In social.yaml:

header.social_media:  
    name: social
    type: list
    label: My socila links
    fields:
      .title:
        type: select
        label: Name of network
        default: Facebook
        options:
          Facebook: 'Facebook'
          Instragram: 'Instagram'
          Telegram: 'Telegram'
      .link:
        type: text
        label: Link to network
      .icon:
        type: iconpicker
        label: Icon
      .icon_design:
        type: select
        label: Icon design 
        default: regular
        options:
          regular: Regular
          solid: Solid

In social.html.twig:

<ul class="social_media">
    {% for item in page.header.social_media %}
    <li>
        <a href="{{ item.link }}">
            <i class="{{item.icon}} {{item.icon_design}}"></i>
            {{item.title}}
        </a>
    </li>
    {% endfor %}
</ul>
1 Like
3

Hi, @pmoreno thank a lot for your reply and help! Have a good day!