Last active
October 28, 2021 13:34
-
-
Save freakdesign/0eea719ee22f1cc863b0 to your computer and use it in GitHub Desktop.
Snippet and Theme Settings to for converting a Shopify CDN image path into an Imgix path. Snippet allows for the passing of Imgix filters.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "Imgix", | |
"settings": [ | |
{ | |
"type": "paragraph", | |
"content": "For more info on these theme settings refer to the original [blog post](http:\/\/freakdesign.com.au\/blogs\/news\/91099207)" | |
}, | |
{ | |
"type": "checkbox", | |
"id": "enableImgix", | |
"label": "Enable Imgix", | |
"info":"Toggle the imgix feature" | |
}, | |
{ | |
"type": "text", | |
"id": "imgixUrl", | |
"label": "Imgix Subdomain", | |
"info":"The subdomain you set within Imgix. eg: '//foo.imgix.net'." | |
}, | |
{ | |
"type": "text", | |
"id": "imgixShopifyUrl", | |
"label": "Shopify CDN domain", | |
"default":"//cdn.shopify.com", | |
"info":"No changes should be need here unless you have a proxy in place. Not sure? Leave as is." | |
} | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% capture IMGIX %} | |
{% comment %} | |
<!-- | |
_ _ | |
(_)_ __ ___ __ _(_)_ __ | |
| | '_ ` _ \ / _` | \ \/ / | |
| | | | | | | (_| | |> < | |
|_|_| |_| |_|\__, |_/_/\_\ | |
|___/ | |
Convert a Shopify CDN path into an Imgix path, with fiters. | |
Snippet by Jason @ freakdesign. | |
########################################### | |
Usage: | |
{% assign productImage = product | img_url: 'grande' %} | |
<img src="{% include 'imgix' src:productImage gam:100 con:23 shad:-100 %}" /> | |
Refer to the original blog post for more info about this: | |
http://freakdesign.com.au/blogs/news/91099207 | |
Also refer to the imgix docs for info on the filters available: | |
https://www.imgix.com/docs/reference | |
--> | |
{% endcomment %} | |
{% if settings.enableImgix %} | |
{% for i in (1..1) %} | |
{% comment %} | |
<!-- Check to make sure the src exists, and that imgix url theme settings is not blank. If blank, stop! --> | |
{% endcomment %} | |
{% unless src or settings.imgixUrl != blank %}{{ src }}{% break %}{% endunless %} | |
{% comment %} | |
<!-- Check to make sure the src has the Shopify CDN url in it. If it doesn't this does not need to run any further --> | |
{% endcomment %} | |
{% assign cdnUrl = settings.imgixShopifyUrl | strip %} | |
{% unless src contains cdnUrl %}{{ src }}{% break %}{% endunless %} | |
{% assign imgixUrl = settings.imgixUrl | strip %} | |
{% comment %} | |
<!-- Create a list of all the imgix filters we want to use --> | |
{% endcomment %} | |
{% assign filters = 'bri,con,exp,gam,high,hue,invert,sat,shad,sharp,usm,usmrad,vib,auto,bg,blend,bm,ba,balph,bp,bw,bh,bf,bc,bs,bx,by,border,pad,faceindex,facepad,faces,ch,chromasub,colorquant,dl,dpi,fm,lossless,q,mask,nr,nrs,colors,palette,prefix,dpr,flip,or,rot,crop,fit,h,rect,w,blur,htn,mono,px,sepia,txt,txtalign,txtclip,txtclr,txtfit,txtfont,txtline,txtlineclr,txtpad,txtshad,txtsize,txtwidth,trim,trimcolor,trimmd,trimsd,trimtol,mark,markalign,markalpha,markbase,markfit,markh,markpad,markscale,markw,markx,marky' | split:',' %} | |
{% comment %} | |
<!-- Build up the list of filters to add to the url --> | |
{% endcomment %} | |
{% assign imgWithQuerystring = "?" %} | |
{% if src contains '?' %}{% assign imgWithQuerystring = '&' %}{% endif %} | |
{% for _filter in filters %} | |
{% if [_filter] %} | |
{% assign imgWithQuerystring = imgWithQuerystring | append:_filter | append:'=' | append:[_filter] | append:'&' %} | |
{% endif %} | |
{% endfor %} | |
{% assign newSrc = src | strip | replace:cdnUrl,imgixUrl | append:imgWithQuerystring %} | |
{% endfor %} | |
{{ newSrc | default:src }} | |
{% else %} | |
{{ src }} | |
{% endif %} | |
{% endcapture %}{{ IMGIX | strip | replace:' ' | strip_newlines }} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment