Force Download Image & Video From Metafield

drsw
Visitor
2 0 0

Trying to figure out how to force download a video I uploaded to metafield.

 

PDF download works as expected, it's just videos and images, they just open and play on new tab instead (I tried removing target="_blank" but they just play on the same tab instead).

 

I've appended download attribute to the link, but it didn't do anything.

<a class="button" target="_blank" download="{{ file_name }}" title="{{ file_name }}" href="{{ list.sources[1].url }}">DOWNLOAD</a>

 

Any little bits of help is appreciated.

Replies 3 (3)

ZenoPageBuilder
Shopify Partner
1052 203 219

Hello @drsw 

The download attribute only works if the image/video URLs are in the same domain of your store.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
drsw
Visitor
2 0 0

I see. Is there a way to force the url to come from the same domain then?

I tried to use asset_url filter but it's not working.

 

I can get the link for pdfs simply by using .url param, but it doesn't work with images and videos. This is how I 'hack' the loop:

{% for list in product.metafields.productDetails.customer_files.value %}
    {% capture indicator %}{{ list }}{% endcapture %}
...
<a class="button" target="_blank" download={{ file_name }} title={{ file_name }} href="
            {% case indicator %}
                {% when 'GenericFileDrop' %}
                    {{ list.url }}
                {% when 'VideoDrop' %}
                    {{ list.sources[1].url }}
                {% else %}
                    https://cdn.shopify.com/s/files/1/0775/6306/8702/{{ list }}
            {% endcase %}
        ">DOWNLOAD</a>
...
{% endfor %}

 

Actually looking at it again, I don't understand why the pdfs can output the same domain as my store, while the videos get cdn.shopify.com.

ZenoPageBuilder
Shopify Partner
1052 203 219

That is how Shopify stores and distributes assets. PDF files are saved on your store, while images/videos are served on Shopify global CDN.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com