This is a component of Astro JS, for minimalistic art direction.
MIT License
This component utilizes the getImage
function from astro:assets
to generate optimized images from the src directory and implements a simple art direction.
By specifying the file, width, and height in the src
object, it outputs responsive images and art direction.
npm install astro-simple-art-direction
You can set the following environment variables in the .env
file created at the root of the project.
DEFAULT_IMAGE_DIRECTORY=assets # default : images
The image files to be optimized default to referencing the "images" directory within the "src" directory. By assigning a directory name to this variable, you can change the reference location for the images.
MAX_RESOLUTION_MULTIPLIER=4 # default : 2
This environment variable determines the range of sizes to output in the srcset attribute based on the width and height. The output is up to the specified maximum multiplier. The default value is 2. The value must be an integer between 1 and 4. Decimal points will be truncated.
FALLBACK_FORMAT=webp # default : undefined
Type: "jpg" | "jpeg" | "png" | "webp" | "gif"
;
This environment variable defines the image format to be output as fallback. If undefined, the original image format is retained.
DEFAULT_GENERATE_FORMAT=avif webp # default : avif webp
Type: (| "heic" | "heif" | "avif" | "jpg" | "jpeg" | "png" | "tiff" | "webp" | "gif" | "svg" )[]
;
This environment variable specifies the output format of the images used in the project as an array. There must be a space between words.
[!NOTE] If the environment variable FALLBACK_FORMAT is defined, the DEFAULT_GENERATE_FORMAT array must contain the image format defined there.
Addition of two environment variables.
Add position
parameter to BackgroundPicture component.