

{%- doc -%}
  Renders the blog article image block for use within featured blog posts cards.

  @param {object} image - The image object
  @param {string} parent_block_id - The block.id of the parent blog post card
{%- enddoc -%}

{% comment %} Render using unified resource image component {% endcomment %}
{% render 'resource-image',
  content_type: 'articles',
  image_source: image,
  parent_block_id: parent_block_id,
  block_settings: block.settings,
  section_settings: section.settings,
  block_attributes: block.shopify_attributes
%}

{% stylesheet %}
  .featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.image",
  "tag": null,
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "label": "t:settings.aspect_ratio",
      "info": "t:info.aspect_ratio_adjusted",
      "options": [
        {
          "value": "adapt",
          "label": "t:options.auto"
        },
        {
          "value": "portrait",
          "label": "t:options.portrait"
        },
        {
          "value": "square",
          "label": "t:options.square"
        },
        {
          "value": "landscape",
          "label": "t:options.landscape"
        }
      ],
      "default": "square"
    },
    {
      "type": "header",
      "content": "t:content.borders"
    },
    {
      "type": "select",
      "id": "border",
      "label": "t:settings.style",
      "options": [
        {
          "value": "none",
          "label": "t:options.none"
        },
        {
          "value": "solid",
          "label": "t:options.solid"
        }
      ],
      "default": "none"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:settings.thickness",
      "default": 1,
      "visible_if": "{{ block.settings.border != 'none' }}"
    },
    {
      "type": "range",
      "id": "border_opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:settings.opacity",
      "default": 100,
      "visible_if": "{{ block.settings.border != 'none' }}"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "t:settings.border_radius",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 0
    }
  ]
}
{% endschema %}
