Processing images with buttercms - for more details refer to https://buttercms.com/docs/api/#image-api

butterImageProcessing.js

/* example options:

teaserImageConfig: [
            {
              resize:
                {
                  width: '420',
                  height: '420',
                  fit: 'crop'
                },
              quality: {value: 80}
            },
            {
              resize:
                {
                  width: '768'
                },
              quality: {value: 80}
            },
            {
              resize:
                {
                  width: '1024'
                },
              quality: {value: 80}
            }
          ]
          
Another example:
thumbnailOptions: {
            resize: {
              width: '380',
              height: '380',
              fit: 'crop'
            },
            monochrome: {}
          }
          
Example call: getProcessedImageUrl('URL_FROM_BUTTERCMS_API', thumbnailOptions);
this will return the URL to the image processed with the given options.

 */

function getImageIdFromUrl (url) {
  return url.substr(url.lastIndexOf('/') + 1)
}

function buildUrlParametersFromImageOptions (options) {
  let imageUrl = ''
  Object.keys(options).forEach(function (optionGroup) {
    imageUrl += '/' + optionGroup + '='
    Object.keys(options[optionGroup]).forEach(function (option, index) {
      imageUrl += option + ':' + options[optionGroup][option]
      if (Object.keys(options[optionGroup]).length - 1 > index) {
        imageUrl += ','
      }
    })
    imageUrl += '/'
  })
  return imageUrl
}

export function getProcessedImageUrl (imageUrl, processingOptions) {
  if (!imageUrl) {
    return ''
  }
  const imageId = getImageIdFromUrl(imageUrl)
  const urlParameters = buildUrlParametersFromImageOptions(processingOptions)
  return  "https://fs.buttercms.com + urlParameters" + imageId
}