adjust Shopify variant image group

Question

we are running on shopify and we are running on theme Vision. There is feature which is showing the product picture based on variant selection - https://documentation.fuelthemes.net/kb/how-do-i-create-a-variant-image-set/

but now we found the problem. because we are using shopify in other languages so the option name and also variant name is in different language so it cannot match the images set. so i trying to find the solution and create the image set on variant with paramteter data-option-value-id="123456789" which is the same in every language.

now it works with alt-text : #color_black and this is causing problem with another languages so my idea is using alt-text of image with data-option-value-id like #1234567889.

i was trying to do it but never achieved it (i am jut a little familiar with coding) so i want to ask if anybody can help me to change the logic.

here is the code where is logic of image sets determined:

for product media:

{%- liquid
  assign image_set = false
  assign image_set_group = ''
  if media.alt contains '#'
    assign image_set_full = media.alt | split: '#' | last
    if image_set_full contains '_'
      assign image_set = true
      assign image_set_group = image_set_full | split: '_' | first
    endif
  endif

  assign is_active = false
  if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1
    assign is_active = true
  elsif product.selected_or_first_available_variant.featured_media.id == media.id
    assign is_active = true
  elsif variant_images contains media.src and product.selected_or_first_available_variant.featured_media.id != media.id
    assign is_active = false
  endif

  unless variant_images contains media.src
    assign is_active = true
  endunless

  unless hide_variants
    assign is_active = true
  endunless
-%}
<div
  id="Slide-{{ section.id }}-{{ media.id }}"
  class="product-images__slide{% if is_active %} is-active{% endif %}{% if variant_images contains media.src %} product-images__slide-item--variant{% endif %}"
  data-media-id="{{ section.id }}-{{ media.id }}"
  {% if image_set %}
    data-set-name="{{ image_set_group }}"
    data-group="{{ image_set_full }}"
  {% endif %}
>
  {%- case media.media_type -%}
    {% when 'image' %}
      {%- liquid
        assign ratio = 1
        if media_aspect_ratio == 'adapt'
          assign ratio = media.preview_image.aspect_ratio
        elsif media_aspect_ratio == 'portrait'
          assign ratio = 1 | divided_by: 1.25
        elsif media_aspect_ratio == 'landscape'
          assign ratio = 1 | divided_by: 0.75
        endif

        assign alt = media.preview_image.alt | split: '#' | first

      -%}
      <div class="product-single__media product-single__media-image aspect-ratio aspect-ratio--{{ media_aspect_ratio }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}" style="--padding-bottom: {{ 1 | divided_by: ratio | times: 100 }}%;">
        {%- if section.settings.lightbox != blank -%}
        <a
          href="{{ media.src | image_url }}"
          class="product-single__media-zoom"
          data-msrc="{{- media.src | image_url: width: 20 -}}"
          data-h="{{ media.height }}"
          data-w="{{ media.width }}"
          target="_blank"
          tabindex="-1"
          title="Zoom"
          {% if alt != blank and display_captions %}
          title="{{ alt | escape }}"
          {% endif %}
          data-index="{{ image_index }}"
        >{% render 'svg-icons' with 'zoom' %}</a>
        {%- endif -%}
        {%- render 'responsive-image', image: media.preview_image, sizes: sizes, priority: priority -%}
        {%- if alt != blank and display_captions -%}
        <span class="figcaption">{{ alt }}</span>
        {%- endif -%}
      </div>
    {% when 'external_video' %}
      <div class="product-single__media product-single__media-external-video" data-provider="{{ media.host }}" data-media-id="{{ media.id }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}" style="--aspect-ratio: {{ media.aspect_ratio }}">
        <div class="product-single__media-external-video--play">
          {%- render 'responsive-image', image: media.preview_image, sizes: sizes -%}
          <button>{% render 'svg-icons' with 'thb-icon-play' %}</button>
        </div>
        {{ media | external_video_tag: loading: "lazy", loop: section.settings.enable_video_looping, muted: 1 }}
      </div>
    {% when 'video' %}
      <div class="product-single__media product-single__media-native-video" data-media-id="{{ media.id }}" style="--aspect-ratio: {{ media.aspect_ratio }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}">
        {{ media | video_tag: controls: true, autoplay: true, loading: "lazy", loop: section.settings.enable_video_looping, image_size: '610x' }}
      </div>
    {% when 'model' %}
      <product-model class="product-single__media product-single__media-model" style="padding-top: 100%" data-media-id="{{ media.id }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}">
        <button id="Deferred-Poster-Modal-{{ media.id }}" class="product-single__media-model-button" type="button">
          {%- render 'svg-icons' with 'thb-icon-3d-model' -%}
        </button>
        {%- render 'responsive-image', image: media.preview_image, sizes: sizes -%}
        <template>
          {{ media | media_tag: image_size: "2048x", toggleable: true }}
        </template>
      </product-model>
      <button
        class="product__xr-close product-single__media-xr-close">
        {%- render 'svg-icons' with 'close' -%}
      </button>
      <button
        class="button product__xr-button"
        type="button"
        data-shopify-xr
        aria-label="{{ 'products.product.xr_button_label' | t }}"
        data-shopify-model3d-id="{{ media.id }}"
        data-shopify-xr-hidden
        data-shopify-title="{{ product.title | escape }}"
        >
        <span>
          {% render 'svg-icons' with 'thb-icon-3d-model' %}
          {{ 'products.product.xr_button' | t }}
        </span>
      </button>
  {% endcase %}
</div>

for product thumbnails :

{%- liquid
  assign image_set = false
  assign image_set_group = ''
  if media.alt contains '#'
    assign image_set_full = media.alt | split: '#' | last
    if image_set_full contains '_'
      assign image_set = true
      assign image_set_group = image_set_full | split: '_' | first
    endif
  endif

  assign is_active = false
  assign is_selected = false
  if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1
    assign is_active = true
    assign is_selected = true
  elsif product.selected_or_first_available_variant.featured_media.id == media.id
    assign is_active = true
    assign is_selected = true
  elsif variant_images contains media.src and product.selected_or_first_available_variant.featured_media.id != media.id
    assign is_active = false
  endif

  unless variant_images contains media.src
    assign is_active = true
  endunless

  unless hide_variants
    assign is_active = true
  endunless

  assign sizes = '160x160'
    if media_aspect_ratio == 'adapt'
        assign sizes = '160x0'
    elsif media_aspect_ratio == 'portrait'
        assign sizes = '160x200'
    elsif media_aspect_ratio == 'landscape'
        assign sizes = '160x95'
    endif
-%}
<div
  id="Thumb-{{ section.id }}-{{ media.id }}"
  class="product-thumbnail{% if is_active %} is-active{% endif %}{% if variant_images contains media.src %} product-images__slide-item--variant{% endif %}{% if is_selected %} is-initial-selected{% endif %}"
  {% if image_set %}
    data-set-name="{{ image_set_group }}"
    data-group="{{ image_set_full }}"
  {% endif %}
>
  {%- if media.media_type == 'model' -%}
  <div class="product-thumbnail-icon">
    {% render 'svg-icons' with 'thb-icon-3d-model' %}
  </div>
  {%- endif -%}
  {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
  <div class="product-thumbnail-icon">
    {% render 'svg-icons' with 'thb-icon-play' %}
  </div>
  {%- endif -%}
  {%- render 'responsive-image', image: media.preview_image, sizes: sizes -%}
</div>

i was trying to change the existing logic how is the product variant image sets dispalying and remove the logic based on language and change it to something universal in every language