@danielroe

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 '/' for most providers, and is this necessary for Shopify?

Add Shopify Provider #667

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions