Possible to add a height restriction as well?

Open
#338 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
javascript
Domain
tooling

Research direction

Start from the eleventyImageTransformPlugin configuration and trace how widths and sharpOptions are passed to the image resize step. Reproduce the example with an image larger than 1000px, then verify that the output is proportionally scaled with neither dimension exceeding 1000px and that existing width behavior remains intact.

Written by the indexing model from the issue text.

Description

I'm functionally attempting to replicate the behavior of an imagemagick -resize 1000x1000 command, where the output is just going to be a proportionately scaled image with the largest dimension being no more than 1000px. Sharp seems to be able to do this thanks to withoutEnlargement: true and fit: inside but I'm running into issues trying to pass sharp options.

I've tried a ton of permutations of the below (specifying widths instead of auto, using sharpResizeOptions, so on and so forth), but nothing seems to take. The sharp width and height options just seem to be fully ignored no matter what

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
   // output image formats
   formats: ["webp"],
   // output image widths
   widths: ["auto"],
   outputDir: "public_html/data/",
   urlPath: "/data/",
   sharpOptions: {
      resize: {
         width: 1000,
         height: 1000,
         fit: "inside",
         withoutEnlargement: true
      }
   },
});

At this point I'm not sure if I'm doing something wrong or if this is just unsupported behavior, and if it is the latter, would supporting it be a potential enhancement? I know most folks are doing something way more complicated than my use case, which is just a simple 1 size transform, but having the option to easily override the plugin's "widths" (assuming that is where the issue rests) and specify via sharpOptions instead would be handy here.

Dominant language
JavaScript
Stars
467
Forks
65
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from 11ty/image

All issues in 11ty/image

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.