Error when adding title

[groudse]

Hello i want to add title to my image but with the dawn theme the title is not there so i'm trying to add id manually but i'm getting the error : 

Liquid syntax error (snippets/product-media-gallery line 234): Expected end_of_string but found colon in "{{ title: featured_media.alt | escape, featured_media.preview_image | image_url: width: 416 | image_tag: loading: 'lazy', sizes: sizes, widths: '54, 74, 104, 162, 208, 324, 416', id: thumbnail_id, alt: featured_media.alt | escape }}"

The code: 

<button
              class="thumbnail global-media-settings global-media-settings--no-shadow"
              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
              aria-current="true"
              aria-controls="GalleryViewer-{{ section.id }}"
              aria-describedby="{{ thumbnail_id }}"
            >
              {{
//this part -----------
                title: featured_media.alt | escape,
------------
                featured_media.preview_image
                | image_url: width: 416
                | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: featured_media.alt | escape
              }}
            </button>

[vinh0225]

@groudse 

Using image_tag, it will be difficult to add title attribute. Instead, you can use <img> tag directly. So the above code can be like this:

<button
              class="thumbnail global-media-settings global-media-settings--no-shadow"
              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
              aria-current="true"
              aria-controls="GalleryViewer-{{ section.id }}"
              aria-describedby="{{ thumbnail_id }}"
            >
              <img
                loading="lazy"
                sizes="{{ sizes }}"
                widths="{{ '54, 74, 104, 162, 208, 324, 416' }}"
                id="{{ thumbnail_id }}"
                alt="{{ featured_media.alt | escape }}"
                title="{{ featured_media.alt | escape }}"
                src="{{ featured_media.preview_image | image_url: width: 416 }}"
                width="416"
                height="416"
              >
            </button>

If you want to add the title attribute to all slide images, you need to do the same thing in "{%- for media in product.media -%}" loop.

Hope it will help you.

Regards,

Vinh

[Sweans]

Hi @groudse ,

The Liquid syntax error occurred because you added title for the image before calling the image. You can fix the issue by replacing the below code instead of your current one:

<button
        class="thumbnail global-media-settings global-media-settings--no-shadow"
        aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
        aria-current="true"
        aria-controls="GalleryViewer-{{ section.id }}"
        aria-describedby="{{ thumbnail_id }}"
      >
        {{
          featured_media.preview_image
          | image_url: width: 416
          | image_tag:
          loading: 'lazy',
          sizes: sizes,
          widths: '54, 74, 104, 162, 208, 324, 416',
          id: thumbnail_id,
          alt: featured_media.alt | escape,
          title: featured_media.alt | escape
        }}
      </button>

Note: You need to call the title with the attributes like sizes, widths, alts, etc after defining the image.

I hope this helps! If not, please provide password of website.

If it does, please like it and mark it as a solution! 

If you need further assistance, feel free to reach out!

Regards,
Sweans