How to add custom id attribute to product page image

[premiumpainting]

Hey everyone,

I need some help with an app i'm trying to install. The developer tells me i need to insert a custom id attribute to my product photo. I've already made a custom product template, however i'm not sure how and where to add this code. Would be great if someone can help me out! Here's the code of my product.custom.liquid;

{% section 'product-template' %}
{% section 'product-recommendations' %}
{% section 'recently-viewed' %}

<script type="application/json" class="ProductJson-{{ product.id }}">
 {{ product | json }}
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "url": {{ shop.url | append: product.url | json }},
  {%- if product.featured_media -%}
    {%- assign image_size = product.featured_media.preview_image.width | append: 'x' -%}
    "image": [
      {{ product.featured_media | img_url: image_size | prepend: "https:" | json }}
    ],
  {%- endif -%}
  "description": {{ product.description | strip_html | json }},
  {%- if current_variant.sku != blank -%}
    "sku": {{ current_variant.sku | json }},
  {%- endif -%}
  "brand": {
    "@type": "Thing",
    "name": {{ product.vendor | json }}
  },
  "offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": {{ variant.sku | json }},
        {%- endif -%}
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : {{ variant.price | divided_by: 100.00 | json }},
        "priceCurrency" : {{ cart.currency.iso_code | json }},
        "url" : {{ shop.url | append: variant.url | json }}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}
</script>

[gina-gregory]

Look in the 'product-template.liquid' section in the Sections folder and see if you can find where the product page photos are being output. It may be in a separate Snippet ({% include 'product-gallery-or-whatever' %}). Find the <img> tag and add an ID like this:

{% for media in product.media %}
<img id="photo-{{ forloop.index }}" src="{{ media | img_url: '600x600' }}" alt="{{ media.alt | escape }}">
{% endfor %}

This will output IDs of 'photo-1','photo-2', etc on each photo.

[premiumpainting]

Hi Gina, thank you for your help.

The problem is that I only need a custom id attribute for a single product image, not for all. The app that i'm using lets customers upload their own photo and i would like the product photo to be updated to the uploaded photo of the customer on the product page. Hope you can help me out! Thanks in advance.

Kind regards,

Robert

[gina-gregory]

Without knowing how your theme's product page is set up, it's hard to help. Can you just have the first image be the one updated? If that will work, just use the id 'photo-1' for your image app after adding the id as I instructed.

[premiumpainting]

Hi Gina,

I think this is the piece of code you mean, however i'm not sure where to place the code you suggested.

 {% if section.settings.media_layout contains 'thumbnails' and product.media.size > 1 %}
            <div class="product-detail__thumbnails">
              {% for media in product.media %}
                <a href="{{ featured_media.preview_image | img_url: 'master' }}"
                  class="product-detail__thumbnail global-border-radius-small media-thumbnail media-thumbnail--media-{{ media.media_type }}"
                  data-media-id="{{ media.id }}"
                  data-product-media-thumbnail>
                  {% render 'responsive-image', image: media.preview_image %}

Here's the product page if that helps; https://premiumpaintings.nl/products/diamond-painting-eigen-foto?_pos=1&_psq=eigen&_ss=e&_v=1.0. The photo of the egg should be replaced with the image uploaded when clicking on "Kies een afbeelding". Thanks again.

Robert