[How to] Fred slider loop variable variables example

Support Extras
1

Hi All,

I believe that this can be useful for a lot of people.
Suppose that you have a slider to define how many slides you want, and for each slide (with a maximum of 5), you want to be able to adjust individual settings per slide:

Fred Optionset:

{
  "remote": true,
  "settings": [
    {
      "name": "slides",
      "label": "Slides",
      "type": "slider",
      "value": 1,
      "min": 1,
      "max": 5
    },
      "settings": [
        {
          "name": "home_location_slider_page_1",
		  "label": "Item 1 Page Link",
		  "type": "page",
		  "clearButton": true,
		  "parents": "0",
		  "value": ""
        },
		{
          "name": "home_location_slider_page_2",
		  "label": "Item 2 Page Link",
		  "type": "page",
		  "clearButton": true,
		  "parents": "0",
		  "value": ""
        },
		{
          "name": "home_location_slider_page_3",
		  "label": "Item 3 Page Link",
		  "type": "page",
		  "clearButton": true,
		  "parents": "0",
		  "value": ""
        },
		{
          "name": "home_location_slider_page_4",
		  "label": "Item 4 Page Link",
		  "type": "page",
		  "clearButton": true,
		  "parents": "0",
		  "value": ""
        },
		{
          "name": "home_location_slider_page_5",
		  "label": "Item 5 Page Link",
		  "type": "page",
		  "clearButton": true,
		  "parents": "0",
		  "value": ""
        }
      ]
    }
  ]
}

Then the Fred element:

				  <div class="carousel-inner" role="listbox">
				  
					{% for i in 0..(slides - 1) %}
					<div class="carousel-item{% if i == 0 %} active{% endif %}">
						<div class="row text-center text-md-left">
							<div class="col-12 col-md-6 map_img">
								<img src="[[++project.theme_dir]]images/image_location_about.png" width="960" height="500" alt="Map Image" title="[[!%project.fred.change_this_title? &language=`[[++cultureKey]]` &namespace=`project` &topic=`fred`]]" data-fred-name="slider_image_{{i}}" data-fred-attrs="title">
							</div>
							
							<div class="col-12 col-md-6 mt-0 mt-md-5 mb-5 mb-md-0 mx-0 {{ panel_bkgd_color }}">
								<img class="mt-5 mb-3" src="[[++project.theme_dir]]images/icon_location.png" />
								
								<h5 class="mb-3 font-weight-bold text-uppercase {% if show_main_title %}{% else %} d-none{% endif %}" data-fred-render="{% if show_main_title %}true{% else %}false{% endif %}">[[!%project.frontend.where_are_we? &language=`[[++cultureKey]]` &namespace=`project` &topic=`default`]]</h5>
								
								<h5 class="mt-5 font-weight-bold {{ sub_title_color }}{% if show_sub_title %}{% else %} d-none{% endif %}" data-fred-name="slider_subheader_{{i}}" data-fred-render="{% if show_sub_title %}true{% else %}false{% endif %}">[[!%project.frontend.change_your_text? &language=`[[++cultureKey]]` &namespace=`project` &topic=`default`]]</h5>
								
								<div class="text-muted font-weight-light mt-2 pr-0 pr-md-5" data-fred-name="slider_text_{{i}}">
									[[!%project.frontend.change_your_text? &language=`[[++cultureKey]]` &namespace=`project` &topic=`default`]]
								</div>
								
								<a class="d-inline-block text-center font-weight-bold px-3 py-2 mt-4 view-bigger-map" href="{{ home_location_slider_page_{{i+1}}.url }}">
									[[!%project.frontend.view_bigger_map? &language=`[[++cultureKey]]` &namespace=`project` &topic=`default`]]
								</a>
							</div>
							
						</div>
					</div>
					{% endfor %}
					
				  </div>

Here the idea is to generate the link dynamically.

After a lot of “try and fail”, the link cannot be generated like this:
{{ home_location_slider_page_{{i+1}}.url }}

The correct way to do this is the following:
{{ _context["home_location_slider_page_" ~ (i+1)]["url"] }}

This is applicable for Fred twig cycles in order to pick option-set settings dynamically.

Hope it helps the community.

Cheers all

6 Likes