{"_id":"@11tyrocks/eleventy-plugin-objectfit-focalpoint","_rev":"1-9b56042c4da21784cfe69e4e0d6604fa","name":"@11tyrocks/eleventy-plugin-objectfit-focalpoint","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@11tyrocks/eleventy-plugin-objectfit-focalpoint","version":"1.0.0","description":"An Eleventy Nunjucks shortcode to provide the functionality of generating an image's `object-position` value in order to keep the focal point in view.","homepage":"https://github.com/5t3ph/eleventy-plugin-objectfit-focalpoint","main":".eleventy.js","scripts":{"start":"eleventy --serve","build":"eleventy","bump":"npm --no-git-tag-version version"},"repository":{"type":"git","url":"git+https://github.com/5t3ph/eleventy-plugin-objectfit-focalpoint.git"},"keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","object-fit","focal-point","image-focus"],"author":{"name":"5t3ph","url":"https://11ty.rocks"},"license":"ISC","bugs":{"url":"https://github.com/5t3ph/eleventy-plugin-objectfit-focalpoint/issues"},"devDependencies":{"@11ty/eleventy":"^0.12.1"},"dependencies":{"node-fetch":"^2.6.1","sharp":"^0.28.3"},"gitHead":"167acdb9b16e0d7f35772c0e20093cc00836f944","_id":"@11tyrocks/eleventy-plugin-objectfit-focalpoint@1.0.0","_nodeVersion":"12.19.0","_npmVersion":"7.6.0","dist":{"integrity":"sha512-iNKzEWMrRhKYucHKxiTYG3uwScmxT+38Qy7A99aVz3aihA2WyIsXMcltsqncteDlyJGWQpklmtPRKA5x7wXAWA==","shasum":"56e210aab74f390245c80c944d5a21915903cf65","tarball":"https://registry.npmjs.org/@11tyrocks/eleventy-plugin-objectfit-focalpoint/-/eleventy-plugin-objectfit-focalpoint-1.0.0.tgz","fileCount":3,"unpackedSize":7867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDe8FCRA9TVsSAnZWagAA0ToP/iQk4WQUwhd6GmCTcrnj\n61ipDNjcsF73wyBoZOHnJ9fUA7HdTgh0kPt/MaVN1BKST2bI4fQ66nvxLkda\npXq4N/2RKXYwAqSgMLGCnkv2SR/8FqgxvwhINUKAKgukUw/qO9lI9GjgRuGO\n1F+ZkWBJDvNXq5qTpVO+I1YwpNcUowvBiZHAd4DoLvYx7ziUv+7kBkJIE4iX\nd/b0XKcti19kJ7e6P54XW3xXLfksFHGayHXqkt1kvqkSwsV63tysCgLexyrn\nAVIgcR3MSQ4JXXZLN3M64QfZjB58RgLPhmq4iFQnpQb+gD19z7ENwHFC2bvL\najTANPs58pbObyZ1zO8O85lHq6DJVlEcktACBir3JwZfARTYhVUpd036q1mc\nmVF7M2O13rHlHqmiKGH62TYnWvKjwAMmegAbcpnD7ZcoEm506OjIUNbSwS/r\nbsmkcqhKdaOnSYWAw4cyxVsShok9GmFqVCBs4P5LYlohZvhErMDnQM0X5cpL\nNX+ZiPGx+4EeIN+e7/Gvv5VqSCfChkRhb2LoQmolSlPeww/ofmu5cHSAUZGY\nBLNCBzAKMrX/OpIHQfh45Laigry9gmmiF9Eu4m2f4mQUD23FZl5elhrYTVol\nl8XLNllIPsW4dE0HfHbl9TaAHSfezlXwQEnmjIWqYh2RrZLCmNPOyoPab17U\n6kke\r\n=ypeE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHiJUEtHjOeJo1KLyNbxmY9u3E9N0Vam28Odi2iG14AUAiEAvTyle53Sc/ZTOWX96D+PESWv8v9RC8Cq4zwfXnJnipw="}]},"_npmUser":{"name":"5t3ph","email":"webdev5t3ph@gmail.com"},"directories":{},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/eleventy-plugin-objectfit-focalpoint_1.0.0_1628303109751_0.32947358621163825"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-07T02:25:09.708Z","1.0.0":"2021-08-07T02:25:09.967Z","modified":"2022-04-04T10:30:52.950Z"},"maintainers":[{"name":"5t3ph","email":"webdev5t3ph@gmail.com"}],"description":"An Eleventy Nunjucks shortcode to provide the functionality of generating an image's `object-position` value in order to keep the focal point in view.","homepage":"https://github.com/5t3ph/eleventy-plugin-objectfit-focalpoint","keywords":["11ty","11ty-plugin","eleventy","eleventy-plugin","object-fit","focal-point","image-focus"],"repository":{"type":"git","url":"git+https://github.com/5t3ph/eleventy-plugin-objectfit-focalpoint.git"},"author":{"name":"5t3ph","url":"https://11ty.rocks"},"bugs":{"url":"https://github.com/5t3ph/eleventy-plugin-objectfit-focalpoint/issues"},"license":"ISC","readme":"## Eleventy Plugin: Object-Fit Focal Point\n\n> An Eleventy Nunjucks shortcode to provide the functionality of generating an image's `object-position` value in order to keep the focal point in view. [Test drive the results by using the utilty app](https://objectfit-focalpoint.netlify.app/).\n\nThis shortcode works in combination with the CSS property `object-fit` which makes an `img` act as it's own container. When assigned the value of `cover`, the image behaves similar to `background-size: cover`.\n\n**Unfamilar with `object-fit`?** [Check out my 2 minute free egghead video >](https://egghead.io/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit?af=2s65ms)\n\nThe shortcode uses the [sharp package resize API](https://sharp.pixelplumbing.com/api-resize) to determine the focal point of an image with [Shannon entropy](https://en.wikipedia.org/wiki/Entropy_%28information_theory%29). It then applies the calculated point as a percentage based on the image's aspect ratio as the value of `object-position`. **When your image container is resized, the focal point is less likely\\* to be cropped out of view**.\n\nFor best results, an aspect-ratio should be similar to the natural image orientation. For example, `5/3` for an image naturally `1024x768` will have better results than for an image `600x1200`.\n\n\\* _Entropy is imperfect and you may not achieve the desired results with every image, particularly with strong light/dark areas_.\n\n## Usage\n\nInstall the plugin:\n\n```bash\nnpm install @11tyrocks/eleventy-plugin-objectfit-focalpoint\n```\n\nThen, include it in your `.eleventy.js` config file:\n\n```js\nconst objectFitFocalPoint = require(\"@11tyrocks/eleventy-plugin-objectfit-focalpoint\");\n\nmodule.exports = (eleventyConfig) => {\n  eleventyConfig.addPlugin(objectFitFocalPoint);\n};\n```\n\n### Required Image Styles\n\nFor the shortcode to fully work, you will need to include the following styles for the related images. The default class is `image` which can be changed by passing a new string to `imageClasses` within the plugin config.\n\n```css\n.image {\n  /* Required */\n  object-fit: cover;\n\n  /* Recommended but not required */\n  display: block;\n  max-width: 100%;\n\n  /* Optional: Force images to fill their parent container's width */\n  width: 100%;\n}\n```\n\n## Using the Shortcode\n\n**Because the shortcode is async, it is only available for Nunjucks**. If you typically write in Markdown, you can add the following to your frontmatter to be able to use both:\n\n```md\ntemplateEngineOverride: njk, md\n```\n\nTo use the shortcode, pass in an image path and optionally `width` and `height` values, or an aspect `ratio`.\n\n```js\n// Local file - must start with `/`\n{% objectFitFocalPoint image=\"/img/my-image.png\", ratio=\"4/3\" %}\n\n// External file - must begin with http or https\n// ⚠️ Note that the extra processing may slow down your build\n{% objectFitFocalPoint image=\"https://source.unsplash.com/0kCrlrs8gXg/700x900\", width=\"400\", height=\"300\" %}\n```\n\n_Note_: It's recommended to always pass in width and height since [browsers now create space while the image loads](https://www.youtube.com/watch?v=4-d_SoCHeWE) based on the expected aspect-ratio created from those values. This helps alleviate jumping of page content, and improves your [Cumulative Layout Shift Core Web Vitals](https://web.dev/cls/) score.\n\n## Config Options\n\n| Option             | Type   | Default   |\n| ------------------ | ------ | --------- |\n| defaultAspectRatio | string | `'5/3'`   |\n| defaultWidth       | int    | `800`     |\n| defaultHeight      | int    | `480`     |\n| imageClasses       | string | `'image'` |\n| siteInputPath      | string | `'.'`     |\n\nAt minimum, you may need to update the `siteInputPath` if you have customized your input directory within your Eleventy config. This value _should not_ end with `/`.\n\nHere's an example if your input directory is `src`:\n\n```js\neleventyConfig.addPlugin(objectFitFocalPoint, {\n  siteInputPath: \"./src\",\n});\n```\n\n## New to Eleventy?\n\nCheck out my additional resources at [11ty.Rocks](https://11ty.rocks)\n","readmeFilename":"README.md"}