-
Notifications
You must be signed in to change notification settings - Fork 253
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Shopify Provider #667
Comments
@danielroe I'm going to attempt to tackle this, it looks like under the hood they are using Cloudflare, so we probably can extend that provider. |
@joshistoast In the meantime, you might be able to extend the Cloudlfare provider, and override the base URL to Shopify's CDN: https://cdn.shopify.com/ |
Locally, this works really well for me: import { joinURL, encodeQueryItem } from 'ufo'
import { type ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'
const shopifyBaseURL = 'https://cdn.shopify.com'
const operationsGenerator = createOperationsGenerator({
keyMap: {
width: 'w',
height: 'h',
dpr: 'dpr',
fit: 'fit',
gravity: 'g',
quality: 'q',
format: 'f',
sharpen: 'sharpen'
},
valueMap: {
fit: {
cover: 'cover',
contain: 'contain',
fill: 'scale-down',
outside: 'crop',
inside: 'pad'
},
gravity: {
auto: 'auto',
side: 'side'
}
},
joinWith: ',',
formatter: (key, val) => encodeQueryItem(key, val)
})
const defaultModifiers = {}
// https://developers.cloudflare.com/images/image-resizing/url-format/
export const getImage: ProviderGetImage = (src, {
modifiers = {},
baseURL = shopifyBaseURL
} = {}) => {
const mergeModifiers = { ...defaultModifiers, ...modifiers }
const operations = operationsGenerator(mergeModifiers as any)
// e.g., https://cdn.shopify.com/static/
const url = operations ? joinURL(baseURL, src.replace(shopifyBaseURL, ''), operations) : joinURL(baseURL, src.replace(shopifyBaseURL, ''))
return {
url
}
} One thing I am confused about, is the baseURL property and where that comes from. Here, I set it to the Shopify CDN base URL, but is this the correct way to instantiate this? I'm not sure why the baseURL is set to |
Here are all the available Shopify transformations https://cdn.shopify.com/ |
Here is a more complete list (the |
It would be very handy to have a Shopify Provider, they have a very flexible image cdn and lots of sizing and cropping options via the image image url.
The text was updated successfully, but these errors were encountered: