twigfiddle.com - Fiddle eaorgi v2 - Created on August 18, 2017 14:06

File

<div class="responsive-embed">
  <iframe src="https://www.youtube.com/embed/{{url["query"]|replace({'v=': ''})}}" allowfullscreen></iframe>
  {% if preview_image is defined %}
  <div class="responsive-embed--overlay" style="background-image: url({{preview_image}})">
  </div>
  {% endif %}
  {% if caption is defined %}
  <div class="responsive-embed--caption">
    {{caption}}
  </div>
  {% endif %}
</div>
{%include "some_icons.twig"%}

File

<ul class="nav-items">
  {%for some in social_media_icons%}
  <li class="nav-item">
    <a class="svg-icon svg-icon--rounded" href="some.so_me_url" target="_blank">
      {#{%include 'logo_'~some.so_me_name~'.twig'%} should be .svg#}
    </a>
  </li>
  {%endfor%}
</ul>

File

<div class="price-label columns small-2 min">{{slider.slider_min}} {{slider.slider_suffix}}</div>
 {%for sh in slider.slider_handles%}
 {% if sh.acf_fc_layout == 'range_handle'%}
 <div class="slider columns small-8" data-slider data-start="{{slider.slider_min}}" data-end="{{slider.slider_max}}" data-initial-start="{{sh.initial_value_min}}" data-initial-end="{{sh.initial_value_max}}">
    
    <span class="slider-handle min" data-slider-handle role="slider" tabindex="1"><div class="value-label">{{sh.initial_value_min}} {{slider.slider_suffix}}</div></span>
    <span class="slider-fill" data-slider-fill></span>
    <span class="slider-handle max" data-slider-handle role="slider" tabindex="1"><div class="value-label">{{sh.initial_value_max}} {{slider.slider_suffix}}</div></span>
    <input class="no-name min" type="hidden">
    <input class="no-name max" type="hidden">
  
  </div>
 {% else %}
     <div class="slider columns small-8" data-slider data-initial-start="{{sh.initial_value_handle}}" data-end="{{slider.slider_max}}" data-start="{{slider.slider_min}}">
     <span class="slider-handle min"  data-slider-handle role="slider" tabindex="1"><div class="value-label">{{sh.initial_value_handle}} {{slider.slider_suffix}}</div></span>
     <span class="slider-fill" data-slider-fill></span>
     <input class="no-name max" type="hidden">
</div>
 {% endif %}
 <div class="native-slider small-8">
    <div class="row row-slider">
      {% if sh.acf_fc_layout == 'range_handle'%}
      <div class="columns small-6">
        <input type="number" min="{{slider.slider_min}}" max="{{slider.slider_max}}" name="minprice" value="{{sh.initial_value_min}}"></input>
      </div>
      <div class="columns small-6">
        <input type="number" min="{{slider.slider_min}}" max="{{slider.slider_max}}" name="maxprice" value="{{sh.initial_value_max}}"></input>
      </div>
      {% else %}
            <div class="columns small-6">
                <input type="number" min="{{slider.slider_min}}" max="{{slider.slider_max}}" name="minprice" value="{{sh.initial_value_handle}}"></input>
          </div>
      {% endif %}
    </div>
  </div>
{%endfor%}
  <div class="price-label columns small-2 max">{{slider.slider_max}} {{slider.slider_suffix}}</div>

Format

caption: "Oh look it is a caption"
'url':
  scheme: https
  host: www.youtube.com
  path: /watch
  query: v=uxDAzVEgDdU
preview_image: "https://lorempixel.com/1700/800/nature/"

'social_media_icons':
  '0':
    so_me_url: 'www.facebook.com/foldercrate'
    so_me_name: facebook
  '1':
    so_me_url: 'www.twitter.com/foldercrate'
    so_me_name: twitter
  '2':
    so_me_url: 'www.xing.com/companies/foldercrate'
    so_me_name: xing
  
'slider':  
    slider_title: "Slider Titel"
    slider_min: 10
    slider_max: 300
    'slider_handles':
      '0':
        acf_fc_layout: 'range_handle'
        initial_value_min: 50
        initial_value_max: 200
    slider_suffix: CHF