diff --git a/docs/directives.md b/docs/directives.md index 2ef32506..44aa7dc4 100644 --- a/docs/directives.md +++ b/docs/directives.md @@ -90,6 +90,19 @@ ___ When both a `width` and `height` are provided, this directive can be used to specify the method by which the image should **fit**. +___ + +### Position +• **Keyword**: `position` +• **Type**: _top_ \| _right top_ \| _right_ \| _right bottom_ \| _bottom_ \| _left bottom_ \| _left_ \| _left top_ \| + _north_ \| _northeast_ \| _east_ \| _southeast_ \| _south_ \| _southwest_ \| _west_ \| _northwest_ \| _center_ \| _centre_ \| + _cover_ \| _entropy_ \| _attention_ + +When both `width` and `height` are provided AND the fit is one of `fit` of `cover` or `contain`, +this directive can be used to set the position of the image. + +See sharps [resize options](https://sharp.pixelplumbing.com/api-resize#resize) for a detailed explanation of each. + ___ ### Rotate • **Keyword**: `rotate`
diff --git a/src/directives/position.ts b/src/directives/position.ts new file mode 100644 index 00000000..3adbaf4a --- /dev/null +++ b/src/directives/position.ts @@ -0,0 +1,14 @@ +import { DirectiveContext, DirectiveOptions } from "../types"; + +export const position = ({ position }: DirectiveOptions, ctx: DirectiveContext) => { + if (!position || !positionValues.includes(position)) return null + + ctx.useParam('position') + ctx.setMetadata('position', position) + + return position +} + +const positionValues = ['top', 'right top', 'right', 'right bottom', 'bottom', 'left bottom', 'left', 'left top', + 'north', 'northeast', 'east', 'southeast', 'south', 'southwest', 'west', 'northwest', 'center', 'centre', + 'cover', 'entropy', 'attention'] \ No newline at end of file