Features by tag

features_by_tag.liquid

{% include 'section_style' %}

{% capture large_size_class %}{% if section.settings.columns == '2' %}half{% elsif section.settings.columns == '3' %}third{% elsif section.settings.columns == '4' %}quarter{% else %}fifth{% endif %}{% endcapture %}

{% include 'opening_section_tag', section_type: 'features' %}
  <div class="wrapper wrapper--padded">
    {% include 'section_header_text' %}

    <div class="grid grid--margins">
      {% for block in section.blocks %}
        {% assign skip = true %}
        {% assign tags = block.settings.tags | split: "," %}
        {% if tags.size == 0 %}
          {% assign skip = false %}
        {% else %}
          {% for tag in tags %}
            {% assign tag_stripped = tag | strip %}
            {% if customer.tag_names contains tag_stripped %}
              {% assign skip = false %}
            {% endif %}
          {% endfor %}
        {% endif %}
        {% if render_mode == "live_edit" %}
          {% assign skip = false %}
        {% endif %}
        {% unless skip %}  
          <div class="feature grid__item lg--one-{{ large_size_class }} md--one-half feature--image-placement-{{ section.settings.image_placement }}" {{ block.simplero_attrs }}>
            <div class="feature__image">
              {% unless block.settings.image_url == blank %}<a href="{{ block.settings.image_url }}">{% endunless -%}
              {% unless block.settings.image == blank %}
                {{ block.settings.image | media_tag: width: 400, height: 400, alt: "" }}
              {% else %}
                {% include 'placeholder' with 'image' %}
              {% endunless %}
              {%- unless block.settings.image_url == blank %}</a>{% endunless %}
            </div>
  
            {{ block.settings.text }}
          </div>
        {% endunless %}
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Features by tag",
    "settings": [
      {
        "type": "wysiwyg",
        "id": "header_text",
        "label": "Header text",
        "inline": true,
        "default": "<h2 style=\"text-align: center\">Features</h2><p style=\"text-align: center\">Use this section to highlight specific details about your company or products.</p>"
      },
      {
        "type": "select",
        "id": "columns",
        "label": "Number of columns",
        "default": "3",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          }
        ]
      },
      {
        "type": "header",
        "content": "Appearance"
      },
      {
        "type": "select",
        "id": "style",
        "label": "Style",
        "options": [
          {
            "value": "default",
            "label": "Default"
          },
          {
            "value": "alternate",
            "label": "Alternate"
          },
          {
            "value": "custom",
            "label": "Custom"
          }
        ],
        "default": "alternate"
      },
      {
        "type": "select",
        "id": "image_placement",
        "label": "Image placement",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "left",
            "label": "Left"
          }
        ],
        "default": "top"
      },
      {
        "type": "image",
        "label": "Custom background image",
        "id": "background_image",
        "info": "Recommended dimensions: 2880 × 1200"
      },
      {
        "type": "video",
        "label": "Custom background video",
        "id": "background_video"
      },
      {
        "type": "color",
        "label": "Custom background overlay color",
        "id": "background_overlay_color",
        "default": "rgba(0, 0, 0, 0.5)"
      },
      {
        "type": "color",
        "label": "Custom heading color",
        "id": "heading_color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "label": "Custom text color",
        "id": "text_color",
        "default": "#eeeeee"
      }
    ],
    "blocks": [
      {
        "type": "feature",
        "name": "Feature",
        "settings": [
          {
            "type": "wysiwyg",
            "id": "text",
            "label": "Text",
            "inline": true,
            "default": "<h4 style=\"text-align: center\">Feature title</h4><p style=\"text-align: center\">Describe the feature in more detail here.</p>"
          },
          {
            "type": "paragraph",
            "content": "Edit the text of the feature by editing it directly in the preview on the right."
          },
          {
            "type": "image",
            "id": "image",
            "label": "Image",
            "info": "Recommended dimensions: At least 800x800. We'll scale to fit within a 400x400 square, but in double resolution for retina displays."
          },
          {
            "type": "url",
            "id": "image_url",
            "label": "Image link"
          },
          {
            "type": "text",
            "id": "tags",
            "label": "Only show to contacts who have these tags. Can be a comma-separated list of tags."
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Features by tag",
        "category": "Content",
        "blocks": [
          {
            "type": "feature"
          },
          {
            "type": "feature"
          },
          {
            "type": "feature"
          }
        ]
      }
    ]
  }
{% endschema %}