nate-v
6/22/2016 - 2:10 PM

Custom Section w/ Theme Settings

Custom Section w/ Theme Settings

[
  {
    "name": "Home page - featured partners",
    "settings": [
      {
        "type": "header",
        "content": "Featured Partners"
      },
      {
        "type": "text",
        "id": "homepage_partners_title",
        "label": "Section Title"
      },
      {
        "type": "text",
        "id": "homepage_partners_subtitle",
        "label": "Section Subtitle"
      },
      {
        "type": "header",
        "content": "Partner 1"
      },
      {
        "type": "text",
        "id": "indv_partner_title_1",
        "label": "Partner 1 Name"
      },
      {
        "type": "page",
        "id": "indv_partner_link_1",
        "label": "Partner 1 Link"
      },
      {
        "type": "image",
        "id": "indv_partner_image_1.jpg",
        "label": "Partner 1 Image",
        "info": "460px x 700px .jpg recommended",
        "max-width": 2800,
        "max-height": 2800
      },
      {
        "type": "header",
        "content": "Partner 2"
      },
      {
        "type": "text",
        "id": "indv_partner_title_2",
        "label": "Partner 2 Name"
      },
      {
        "type": "page",
        "id": "indv_partner_link_2",
        "label": "Partner 2 Link"
      },
      {
        "type": "image",
        "id": "indv_partner_image_2.jpg",
        "label": "Partner 2 Image",
        "info": "460px x 700px .jpg recommended",
        "max-width": 2800,
        "max-height": 2800
      },
      {
        "type": "header",
        "content": "Partner 3"
      },
      {
        "type": "text",
        "id": "indv_partner_title_3",
        "label": "Partner 3 Name"
      },
      {
        "type": "page",
        "id": "indv_partner_link_3",
        "label": "Partner 3 Link"
      },
      {
        "type": "image",
        "id": "indv_partner_image_3.jpg",
        "label": "Partner 3 Image",
        "info": "460px x 700px .jpg recommended",
        "max-width": 2800,
        "max-height": 2800
      },
      {
        "type": "header",
        "content": "Partner 4"
      },
      {
        "type": "text",
        "id": "indv_partner_title_4",
        "label": "Partner 4 Name"
      },
      {
        "type": "page",
        "id": "indv_partner_link_4",
        "label": "Partner 4 Link"
      },
      {
        "type": "image",
        "id": "indv_partner_image_4.jpg",
        "label": "Partner 4 Image",
        "info": "460px x 700px .jpg recommended",
        "max-width": 2800,
        "max-height": 2800
      },
      {
        "type": "header",
        "content": "Partner 5"
      },
      {
        "type": "text",
        "id": "indv_partner_title_5",
        "label": "Partner 5 Name"
      },
      {
        "type": "page",
        "id": "indv_partner_link_5",
        "label": "Partner 5 Link"
      },
      {
        "type": "image",
        "id": "indv_partner_image_5.jpg",
        "label": "Partner 5 Image",
        "info": "460px x 700px .jpg recommended",
        "max-width": 2800,
        "max-height": 2800
      }
    ]
  }
]
<div class="homepage-featured-partners {{ settings.homepage_collection_color }}">
  <div class="wrapper">
    <h4 class="home__subtitle home__subtitle--with-sub">{{ settings.homepage_partners_title }}</h4>
    <h5 class="home__subtitle-sub">{{ settings.homepage_partners_subtitle }}</h5>
  </div>
  
  <div class="featured-partners-wrapper">
    <div class="grid">
      
      {% for i in (1..5) %}

        {% capture partner-title %}indv_partner_title_{{ i }}{% endcapture %}
        {% capture partner-link %}indv_partner_link_{{ i }}{% endcapture %}
        {% capture partner-image %}indv_partner_image_{{ i }}.jpg{% endcapture %}

        <div class="grid__item large--one-fifth one-half">
          <div class="indv-partner" style="background: url('{{ partner-image | asset_url }}') no-repeat;">
            <a href="{{ settings[partner-link] }}" title="{{ settings[partner-title] }}">
              <h3>{{ settings[partner-title] }}</h3>
            </a>
          </div>
        </div>
      
      {% endfor %}
      
    </div>
  </div>

</div>