Image picker selected image urls always return gifs instead jpgs

Shopify Discussion
1

I have created a custom section and for some reason, when I use image picker section to select uploaded jpg images, it always returns gif images instead and it doesn’t render images in the component.

Do you know why this is happening?

Here is the code I wrote:

<section class="media-history-section">
  <div class="container">
    {% for block in section.blocks %}
      <div class="media-cont">
        <div class="media-image-cont">
          <img
            src="{{ block.settings.image | img_url: 'master' }}"
            alt="{{ block.settings.image.alt | default: block.settings.title }}"
          />
        </div>
        <div class="media-title">{{ block.settings.title }}</div>
      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
  {
    "name": "Media History",
    "tag": "section",
    "settings": [],
    "blocks": [
      {
        "type": "media",
        "name": "メディア掲載",
        "settings": [
          {
            "type": "image_picker",
            "id": "media_image",
            "label": "掲載画像"
          },
          {
            "type": "text",
            "id": "title",
            "label": "タイトル"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Media History"
      }
    ]
  }
{% endschema %}

JFYI,

{{ block.settings.title }}

renders titles just fine.

2

HI @Takahero
We found your solution, You need to change it a little bit .
You can try this code


{% schema %}
  {
    "name": "Media History",
    "tag": "section",
    "settings": [],
    "blocks": [
      {
        "type": "media",
        "name": "メディア掲載",
        "settings": [
          {
            "type": "image_picker",
            "id": "media_image",
            "label": "掲載画像"
          },
          {
            "type": "text",
            "id": "title",
            "label": "タイトル"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Media History"
      }
    ]
  }
{% endschema %}

It work perfectly

iamge gif.png
iamge gif.png1870×233 33 KB

Accept, Like, and reply to reach you further

Joy Matubber | Brain Station 23

  • Was my reply helpful? Click Like to let me know!
  • Was your question answered? Mark it as an Accepted Solution
3

Hi @Takahero you can try to use image_url filter instead of img_url, but i think issue in image itself (wrong extension or else).

4

Thanks!

5

Thanks so much @BrainStation23 !