<commit_before>{% set schema = bolt.data.components["@bolt-components-image"].schema %}

{% if enable_json_schema_validation %}
  {{ validate_data_schema(schema, _self) | raw }}
{% endif %}

{% set image_data_bolt = bolt.data.images[src] %} {# Data from Bolt Manifest #}
{% set image_data_twig = getImageData(src)  %} {# Data from processing image file #}

{% set display = display in display_options ? display : schema.properties.display.default %}
{% set height = height|default(image_data_twig.height) %}
{% set width = width|default(image_data_twig.width) %}
{% set lazyload = lazyload ?? true %}
{% set sizes = sizes|default("auto") %}
{% set srcset = srcset|default(src) %}

{% if image_data_bolt.srcset %}
  {% set srcset = image_data_bolt.srcset %}
{% endif %}

{# Set alt to null if missing, prevents empty alt tags #}
{% set alt = alt ? alt : null %}

{# Temp: prefix "ph" to preserve original value for web component, better pattern in the works #}
{% set ph_color = placeholder_color|default(image_data_twig.color|default(schema.properties.placeholder_color.default)) %}
{# Note: image-specific base64 data is only generated in production mode, default data is used for local development #}
{% set ph_image = placeholder_image|default(image_data_twig.base64|default(schema.properties.placeholder_image.default)) %}

{% set is_jpg = src|split('.')|last == "jpg" %}

{# 'ratio' should be a string, but boolean was previously supported. Boolean is now DEPRECATED. #}
{% if ratio is sameas(false) or ratio is sameas(true) %}
  {% set ratio_bool = ratio %}
{% else %}
  {% set ratio_string = ratio %}
  {% set ratio_split = ratio_string|split("/") %}
  {% if ratio_split|length == 2 %}
    {% set width = ratio_split[0] %}
    {% set height = ratio_split[1] %}
  {% endif %}
{% endif %}

{% set use_ratio = useAspectRatio or ratio_bool ?? true %}
{% set can_use_ratio = use_ratio is sameas(true) and ratio_string != "none" and width > 0 and height > 0 and not cover %}
{# Only JPGs allowed, PNGs can have transparency and may not look right layered over placeholder #}
{% set can_use_placeholder = can_use_ratio or cover %}

{# Setup inline styles that will be added to the custom element  #}
{% set inline_bg_color = can_use_placeholder and is_jpg ? "background-color: " ~ ph_color ~ "; " : "" %}
{% set inline_width = max_width ? "width: " ~ max_width ~ "; " : "" %}
{% set inline_max_width = max_width and "%" not in max_width ? "max-width: 100%; " : "" %}
{% set inline_style = inline_width ~ inline_max_width ~ inline_bg_color %}

{#--------------------#}
{# STOP!!!!!!!!!#}
{# The ONLY thing that can happen below here is creating and building the `attributes`, then calling the template - ALL data must be prepped by this point #}
{#--------------------#}

{% set attributes = create_attribute(attributes | default({})) %}

{% set image_classes = [
  "c-bolt-image__image"
] %}

{% set placeholder_classes = [
  "c-bolt-image__image-placeholder"
] %}

{% set lazyload_classes = [
  lazyload ? "c-bolt-image__lazyload",
  lazyload ? "c-bolt-image__lazyload--fade" : "",
  lazyload and is_jpg ? "c-bolt-image__lazyload--blur" : "",
  lazyload ? "js-lazyload" : ""
] %}

{% set image_attributes = create_attribute(imageAttributes | default({})).addClass(image_classes, lazyload_classes)
  .setAttribute('alt', alt)
  .setAttribute( (lazyload ? "data-" : null) ~ "srcset", srcset ? srcset : null)
  .setAttribute( (lazyload ? "data-" : null) ~ "sizes", sizes)
  .setAttribute('src', lazyload ? ph_image : src)
%}

{% if zoom %}
  {% set image_attributes = image_attributes.setAttribute("data-zoom", src) %}
{% endif %}

{% set image_fallback_attributes = create_attribute({}).addClass(image_classes)
  .setAttribute('alt', alt)
  .setAttribute('src', src)
  .setAttribute(srcset ? "srcset" : "", srcset ? srcset : null)
%}

{% if cover %}
  {% set image_attributes = image_attributes.addClass("c-bolt-image--cover") %}
  {% set image_fallback_attributes = image_fallback_attributes.addClass("c-bolt-image--cover") %}
{% endif %}

{% set image_tag %}
  <img {{ image_attributes }} />

  {# Only output noscript fallback if lazyloading, and ratio will be output #}
  {% if lazyload %}
    <noscript> <img {{ image_fallback_attributes }} /> </noscript>
  {% endif %}
{% endset %}

{% set image_placeholder %}
  <img {{ image_attributes.removeClass(image_classes, lazyload_classes).addClass(placeholder_classes)
  .removeAttribute("data-srcset")
  .removeAttribute("src")
  .removeAttribute("data-sizes")
  .removeAttribute("srcset")
  .setAttribute("src", ph_image)
  }} />
{% endset %}

<bolt-image
  {% if slot %}slot="{{ slot }}"{% endif %}
  {% if src %}src="{{ src }}"{% endif %}
  {% if srcset %}srcset="{{ srcset }}"{% endif %}
  {% if alt %}alt="{{ alt }}"{% endif %}
  {% if max_width %}max-width="{{ max_width }}"{% endif %}
  {% if sizes %}sizes="{{ sizes }}"{% endif %}
  {% if ratio_string %}ratio="{{ ratio_string }}"{% elseif not use_ratio %}ratio="none"{% elseif can_use_ratio %}ratio="{{ width * 1 }}/{{ height * 1 }}"{% endif %}
  {% if placeholder_color %}placeholder-color="{{ placeholder_color }}"{% endif %}
  {% if placeholder_image %}placeholder-image="{{ placeholder_image }}"{% endif %}
  {% if zoom %}zoom{% endif %}
  {% if cover %}cover{% endif %}
  {% if not lazyload %}no-lazy{% endif %}
  {% if inline_style %} style="{{ inline_style|trim }}"{% endif %}  
  {{ attributes }}
  >

  {% set children %}
    {{ is_jpg ? image_placeholder : "" }}
    {{ image_tag }}
  {% endset %}

  {% block image_content %}
    {% if can_use_ratio %}<commit_msg>refactor: use attributes object to add inline styles<commit_after>{% set schema = bolt.data.components["@bolt-components-image"].schema %}

{% if enable_json_schema_validation %}
  {{ validate_data_schema(schema, _self) | raw }}
{% endif %}

{% set image_data_bolt = bolt.data.images[src] %} {# Data from Bolt Manifest #}
{% set image_data_twig = getImageData(src)  %} {# Data from processing image file #}

{% set display = display in display_options ? display : schema.properties.display.default %}
{% set height = height|default(image_data_twig.height) %}
{% set width = width|default(image_data_twig.width) %}
{% set lazyload = lazyload ?? true %}
{% set sizes = sizes|default("auto") %}
{% set srcset = srcset|default(src) %}

{% if image_data_bolt.srcset %}
  {% set srcset = image_data_bolt.srcset %}
{% endif %}

{# Set alt to null if missing, prevents empty alt tags #}
{% set alt = alt ? alt : null %}

{# Temp: prefix "ph" to preserve original value for web component, better pattern in the works #}
{% set ph_color = placeholder_color|default(image_data_twig.color|default(schema.properties.placeholder_color.default)) %}
{# Note: image-specific base64 data is only generated in production mode, default data is used for local development #}
{% set ph_image = placeholder_image|default(image_data_twig.base64|default(schema.properties.placeholder_image.default)) %}

{% set is_jpg = src|split('.')|last == "jpg" %}

{# 'ratio' should be a string, but boolean was previously supported. Boolean is now DEPRECATED. #}
{% if ratio is sameas(false) or ratio is sameas(true) %}
  {% set ratio_bool = ratio %}
{% else %}
  {% set ratio_string = ratio %}
  {% set ratio_split = ratio_string|split("/") %}
  {% if ratio_split|length == 2 %}
    {% set width = ratio_split[0] %}
    {% set height = ratio_split[1] %}
  {% endif %}
{% endif %}

{% set use_ratio = useAspectRatio or ratio_bool ?? true %}
{% set can_use_ratio = use_ratio is sameas(true) and ratio_string != "none" and width > 0 and height > 0 and not cover %}
{# Only JPGs allowed, PNGs can have transparency and may not look right layered over placeholder #}
{% set can_use_placeholder = can_use_ratio or cover %}

{# Setup inline styles that will be added to the custom element  #}
{% set inline_bg_color = can_use_placeholder and is_jpg ? "background-color: " ~ ph_color ~ "; " : "" %}
{% set inline_width = max_width ? "width: " ~ max_width ~ "; " : "" %}
{% set inline_max_width = max_width and "%" not in max_width ? "max-width: 100%; " : "" %}
{% set inline_style = inline_bg_color ~ inline_width ~ inline_max_width %}

{# Add inline styles to attributes object #}
{% set attributes = attributes|default({})|merge({
  style: attributes.style ~ inline_style|trim
}) %}

{#--------------------#}
{# STOP!!!!!!!!!#}
{# The ONLY thing that can happen below here is creating and building the `attributes`, then calling the template - ALL data must be prepped by this point #}
{#--------------------#}

{% set attributes = create_attribute(attributes | default({})) %}

{% set image_classes = [
  "c-bolt-image__image"
] %}

{% set placeholder_classes = [
  "c-bolt-image__image-placeholder"
] %}

{% set lazyload_classes = [
  lazyload ? "c-bolt-image__lazyload",
  lazyload ? "c-bolt-image__lazyload--fade" : "",
  lazyload and is_jpg ? "c-bolt-image__lazyload--blur" : "",
  lazyload ? "js-lazyload" : ""
] %}

{% set image_attributes = create_attribute(imageAttributes | default({})).addClass(image_classes, lazyload_classes)
  .setAttribute('alt', alt)
  .setAttribute( (lazyload ? "data-" : null) ~ "srcset", srcset ? srcset : null)
  .setAttribute( (lazyload ? "data-" : null) ~ "sizes", sizes)
  .setAttribute('src', lazyload ? ph_image : src)
%}

{% if zoom %}
  {% set image_attributes = image_attributes.setAttribute("data-zoom", src) %}
{% endif %}

{% set image_fallback_attributes = create_attribute({}).addClass(image_classes)
  .setAttribute('alt', alt)
  .setAttribute('src', src)
  .setAttribute(srcset ? "srcset" : "", srcset ? srcset : null)
%}

{% if cover %}
  {% set image_attributes = image_attributes.addClass("c-bolt-image--cover") %}
  {% set image_fallback_attributes = image_fallback_attributes.addClass("c-bolt-image--cover") %}
{% endif %}

{% set image_tag %}
  <img {{ image_attributes }} />

  {# Only output noscript fallback if lazyloading, and ratio will be output #}
  {% if lazyload %}
    <noscript> <img {{ image_fallback_attributes }} /> </noscript>
  {% endif %}
{% endset %}

{% set image_placeholder %}
  <img {{ image_attributes.removeClass(image_classes, lazyload_classes).addClass(placeholder_classes)
  .removeAttribute("data-srcset")
  .removeAttribute("src")
  .removeAttribute("data-sizes")
  .removeAttribute("srcset")
  .setAttribute("src", ph_image)
  }} />
{% endset %}

<bolt-image
  {% if slot %}slot="{{ slot }}"{% endif %}
  {% if src %}src="{{ src }}"{% endif %}
  {% if srcset %}srcset="{{ srcset }}"{% endif %}
  {% if alt %}alt="{{ alt }}"{% endif %}
  {% if max_width %}max-width="{{ max_width }}"{% endif %}
  {% if sizes %}sizes="{{ sizes }}"{% endif %}
  {% if ratio_string %}ratio="{{ ratio_string }}"{% elseif not use_ratio %}ratio="none"{% elseif can_use_ratio %}ratio="{{ width * 1 }}/{{ height * 1 }}"{% endif %}
  {% if placeholder_color %}placeholder-color="{{ placeholder_color }}"{% endif %}
  {% if placeholder_image %}placeholder-image="{{ placeholder_image }}"{% endif %}
  {% if zoom %}zoom{% endif %}
  {% if cover %}cover{% endif %}
  {% if not lazyload %}no-lazy{% endif %}
  {{ attributes }}
  >

  {% set children %}
    {{ is_jpg ? image_placeholder : "" }}
    {{ image_tag }}
  {% endset %}

  {% block image_content %}
    {% if can_use_ratio %}
{'fraction_non_alphanumeric': 0.176309028085408, 'fraction_numerical': 0.0024807300434127755, 'mean_word_length': 4.354838709677419, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '124830', 'n_tokens_mistral': 3937, 'n_tokens_neox': 3583, 'n_words': 928}