Skip to content

Image converter

Variants images are generates by sharp module and require installation:

sh
npm install sharp
sh
pnpm install sharp
sh
yarn add sharp

Configuration

typescript
// config/attachment.ts
const attachmentConfig = defineConfig({
  converters: {
    large: { 
      converter: () => import('@jrmc/adonis-attachment/converters/image_converter'), 
      resize: 1280,
    }
  }
})

Format

The default format is webp, for change, use options format:

typescript
const attachmentConfig = defineConfig({
  converters: {
    thumbnail: { 
      converter: () => import('@jrmc/adonis-attachment/converters/image_converter'),
      resize: 300,
      format: 'jpeg', 
    }
  }
})

Options format is string or object [ format, options ] details in documentation : sharp api outpout

Sample for personalize image quality:

typescript
const attachmentConfig = defineConfig({
  converters: {
    thumbnail: { 
      converter: () => import('@jrmc/adonis-attachment/converters/image_converter'),
      resize: 300,
      format: {
        format: 'jpeg',
        options: {
          quality: 80
        }
      }
    }
  }
})

ReSize

Options resize is number or object(options) details in documentation : sharp api resize

Sample:

typescript
import { defineConfig } from '@jrmc/adonis-attachment'
import { InferConverters } from '@jrmc/adonis-attachment/types/config'
import sharp from 'sharp'

const attachmentConfig = defineConfig({
  converters: {
    thumbnail: {
      converter: () => import('@jrmc/adonis-attachment/converters/image_converter'),
      format: 'jpeg',
      resize: { // https://sharp.pixelplumbing.com/api-resize
        width: 400,
        height: 400,
        fit: sharp.fit.cover,
        position: 'top'
      },
    }
  }
})

export default attachmentConfig

declare module '@jrmc/adonis-attachment' {
  interface AttachmentVariants extends InferConverters<typeof attachmentConfig> {}
}

BlurHash

The blurhash option is used to enable, disable, and customise the generation of blurhashes (https://blurha.sh/) for the variants. Blurhash generation is disabled by default.

typescript
const attachmentConfig = defineConfig({
  converters: {
    thumbnail: { 
      converter: () => import('@jrmc/adonis-attachment/converters/image_converter'), 
      blurhash: true
      // or
      // blurhash: {
      //   enabled: true,
      //   componentX: 4,
      //   componentY: 4
      // }
    }
  }
})

For more about componentX and componentY properties read here.