{"_id":"@ameotoko/directus-extension-assets","_rev":"3-cdc4d26ba532b6af6b0d1f00c1e3913b","name":"@ameotoko/directus-extension-assets","dist-tags":{"latest":"2.0.1","rc":"2.0.0-rc.0"},"versions":{"1.0.0":{"name":"@ameotoko/directus-extension-assets","description":"Directus extension for resizing images preserving focal_point","author":{"name":"Andrey Vinichenko"},"homepage":"https://github.com/ameotoko/directus-extension-assets","bugs":{"url":"https://github.com/ameotoko/directus-extension-assets/issues"},"icon":"extension","version":"1.0.0","keywords":["directus","directus-extension","directus-custom-hook"],"type":"module","directus:extension":{"type":"hook","path":"dist/index.js","source":"src/index.js","host":"^10.1.14"},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link"},"devDependencies":{"@directus/extensions-sdk":"10.1.14"},"dependencies":{"clone":"^2.1.2"},"_id":"@ameotoko/directus-extension-assets@1.0.0","gitHead":"8d33b05db6e89920f41ee7e433e123dc9e4fbd02","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-BIYtfEi8EpfA1R0hCh88PjnMdnUHiL3KEdShzI0InfKi5XrCmJ6UQ8Szeg6e//yYIGsq3tVqHSTf976HrdoKvw==","shasum":"83d1988b6cbeddd039293caa7457f1fb05d62557","tarball":"https://registry.npmjs.org/@ameotoko/directus-extension-assets/-/directus-extension-assets-1.0.0.tgz","fileCount":7,"unpackedSize":221819,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRmzrCyM9hUrgYL04uyy7s3xdN4jtESqTf6Oz7d+SwCQIhAN/TXRlNsa+SIIri2atzFRseB+WzEDXVciBjaaLwjoFY"}]},"_npmUser":{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"},"directories":{},"maintainers":[{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/directus-extension-assets_1.0.0_1698974302226_0.4333367476520755"},"_hasShrinkwrap":false},"2.0.0-rc.0":{"name":"@ameotoko/directus-extension-assets","description":"Directus extension for resizing images preserving focal_point","author":{"name":"Andrey Vinichenko"},"homepage":"https://github.com/ameotoko/directus-extension-assets","bugs":{"url":"https://github.com/ameotoko/directus-extension-assets/issues"},"icon":"extension","version":"2.0.0-rc.0","keywords":["directus","directus-extension","directus-custom-bundle"],"type":"module","directus:extension":{"host":"^10.1.14","type":"bundle","path":{"app":"dist/app.js","api":"dist/api.js"},"entries":[{"type":"hook","name":"ameotoko-assets-hook","source":"src/hook/index.js"},{"type":"interface","name":"ameotoko-assets-interface","source":"src/interface/index.ts"}]},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link"},"devDependencies":{"@directus/api":"^14.0.2","@directus/extensions":"^0.1.1","@directus/extensions-sdk":"^10.1.14","@types/clone":"^2.1.4","typescript":"^5.2.2","vue":"^3.3.8"},"dependencies":{"clone":"^2.1.2","cropperjs":"^1.6.1","sharp":"^0.32.6"},"_id":"@ameotoko/directus-extension-assets@2.0.0-rc.0","readme":"# Directus Assets extension\n\nSmarter image resizing for [Directus][1].\n\nThis is a port of the \"Important part of an image\" feature from [Contao CMS][6].\n\n## Installation\n\nThe extension is available as NPM package:\n\n```bash\nnpm install @ameotoko/directus-extension-assets\n```\n\n\n## What does it do?\n\nThe extension allows you to mark an \"important part\" of any image in your\nFile Library. The selected area will always be preserved when image is\nautomatically cropped by Directus, i.e. when both new width and new height is set,\nand the resulting aspect ratio differs from the original aspect ratio.\n\n\n\n\n\nThe field is added only for images (MIME-type `image/*`).\n\nUsing the `Focal Point` field, you can set an important part (a\n\"focal point\") for each image in your file library individually.\n\nIf a focal point is set for an image, it will be preserved whenever\nthe image is [cropped][2].\n\nBelow is an example, how an image is processed with and without\nthe extension.\n\n- original image:\n\n\n\n- default thumbnail, and thumbnail with `focal_point` set to `Top`:\n\n\n\n\n## Use cases\n\n### Gallery\n\nThis allows you to easily implement such content as e.g. an image gallery\nof portraits of avatars, where each source file can have different aspect\nratio, but must be displayed at the same size and aspect ratio in the frontend.\n\nJust define your [image size preset][3] once in the Data Studio, and request it\nin your frontend component, for example in React:\n\n```jsx\n
\n```\n\nThen, all you or your editors have to do is set the focal point whenever new\nimage is uploaded.\n\n### HTML Responsive images\n\nAnother use-case might be implementing [responsive images][4] in your project.\nYou might want to define different image size presets for various breakpoints,\nand then use them in `srcset` attribute. Here's a rewritten [example][5] from the\nMDN article:\n\n```html\n\n```\n\n[1]: https://directus.io\n[2]: https://docs.directus.io/reference/files.html#requesting-a-thumbnail\n[3]: https://docs.directus.io/user-guide/settings/project-settings.html#files-storage\n[4]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\n[5]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes\n[6]: https://contao.org\n","readmeFilename":"README.md","gitHead":"b39b4518b89e69d5548b9831aa99e6939a241d4f","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-pf/mDhosoGxZ5loliGWGLv9DGyrOXRC6iF6xGBJcEBUitV795WMfG54ntZYvCftAzK4tVgo9OmMpf3v5PiqquA==","shasum":"5309e0ca4076f31b61d880571fff8850aec6a452","tarball":"https://registry.npmjs.org/@ameotoko/directus-extension-assets/-/directus-extension-assets-2.0.0-rc.0.tgz","fileCount":10,"unpackedSize":331755,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCucyhZUdvUxgynwBPn2wYtWPEIXiRJ0dj3wLd6Gw9SbAIhAMq1cOdUwdmymhyPn9d1OC7zpGCMk0xmDnyaTmbRFdba"}]},"_npmUser":{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"},"directories":{},"maintainers":[{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/directus-extension-assets_2.0.0-rc.0_1699793396541_0.2526187900162755"},"_hasShrinkwrap":false},"2.0.0":{"name":"@ameotoko/directus-extension-assets","description":"Directus extension for resizing images preserving focal_point","author":{"name":"Andrey Vinichenko"},"homepage":"https://github.com/ameotoko/directus-extension-assets","bugs":{"url":"https://github.com/ameotoko/directus-extension-assets/issues"},"icon":"extension","version":"2.0.0","keywords":["directus","directus-extension","directus-custom-bundle"],"type":"module","directus:extension":{"host":"^10.1.14","type":"bundle","path":{"app":"dist/app.js","api":"dist/api.js"},"entries":[{"type":"hook","name":"ameotoko-assets-hook","source":"src/hook/index.js"},{"type":"interface","name":"ameotoko-assets-interface","source":"src/interface/index.ts"}]},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link"},"devDependencies":{"@directus/api":"^14.0.2","@directus/extensions":"^0.1.1","@directus/extensions-sdk":"^10.1.14","@types/clone":"^2.1.4","typescript":"^5.2.2","vue":"^3.3.8"},"dependencies":{"clone":"^2.1.2","cropperjs":"^1.6.1","sharp":"^0.32.6"},"_id":"@ameotoko/directus-extension-assets@2.0.0","gitHead":"b19546421de88715f0c72cf58296cc3352f71fdc","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-PnSclUFVZmVvjJW0TNcAQ8HZjfw0GGtH/D7owNh22cvx+pOAgkmrBt3tbzaO6mAmF5nn6Z96G9EG0S2hJOM6Nw==","shasum":"7c7b1d1ab8bfa162da383b285f7c310629458c44","tarball":"https://registry.npmjs.org/@ameotoko/directus-extension-assets/-/directus-extension-assets-2.0.0.tgz","fileCount":11,"unpackedSize":1595554,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDBDAq/y7pDIk5ugdrgFuEOqhoorY0olh251OJN4RyQZAiEAub/rwR2KkuZzcFHhkSd16ecHwVZUBq4YYl+Y5CXNF+I="}]},"_npmUser":{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"},"directories":{},"maintainers":[{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/directus-extension-assets_2.0.0_1699799550096_0.10133174408664658"},"_hasShrinkwrap":false},"2.0.1":{"name":"@ameotoko/directus-extension-assets","description":"Directus extension for resizing images preserving focal_point","author":{"name":"Andrey Vinichenko"},"homepage":"https://github.com/ameotoko/directus-extension-assets","bugs":{"url":"https://github.com/ameotoko/directus-extension-assets/issues"},"icon":"extension","version":"2.0.1","keywords":["directus","directus-extension","directus-custom-bundle"],"type":"module","directus:extension":{"host":"^10.1.14","type":"bundle","path":{"app":"dist/app.js","api":"dist/api.js"},"entries":[{"type":"hook","name":"ameotoko-assets-hook","source":"src/hook/index.js"},{"type":"interface","name":"ameotoko-assets-interface","source":"src/interface/index.ts"}]},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link"},"devDependencies":{"@directus/api":"^14.0.2","@directus/extensions":"^0.1.1","@directus/extensions-sdk":"^10.1.14","@types/clone":"^2.1.4","typescript":"^5.2.2","vue":"^3.3.8"},"dependencies":{"clone":"^2.1.2","cropperjs":"^1.6.1","sharp":"^0.32.6"},"_id":"@ameotoko/directus-extension-assets@2.0.1","gitHead":"35dbf0562e72cf77483248ea998992c80f3fba0a","_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-PlRwfEP0wbOLzsqe4bAbmulJ0wGVzzZs5KXC9gk07Wp0Mv/35GbyA+QCtC17s+RMH06SZ89MLi5Q6z5gMJCgWg==","shasum":"d2c388b58cb4feb34554e0e632cf741da153e24d","tarball":"https://registry.npmjs.org/@ameotoko/directus-extension-assets/-/directus-extension-assets-2.0.1.tgz","fileCount":11,"unpackedSize":1595576,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQbbmErjNXN5nS5PDaqDMFcjnZ9MK5j2c0CXBm9sP8LgIgIbfaB3mtARcRoeynpKJs2cBobt6GFmcn6nkT0JVEwPA="}]},"_npmUser":{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"},"directories":{},"maintainers":[{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/directus-extension-assets_2.0.1_1699812069474_0.3976081740268944"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-03T01:18:22.086Z","1.0.0":"2023-11-03T01:18:22.456Z","modified":"2023-11-12T18:01:09.843Z","2.0.0-rc.0":"2023-11-12T12:49:56.707Z","2.0.0":"2023-11-12T14:32:30.353Z","2.0.1":"2023-11-12T18:01:09.664Z"},"maintainers":[{"name":"ameotoko","email":"andrey.vinichenko@gmail.com"}],"description":"Directus extension for resizing images preserving focal_point","homepage":"https://github.com/ameotoko/directus-extension-assets","keywords":["directus","directus-extension","directus-custom-bundle"],"author":{"name":"Andrey Vinichenko"},"bugs":{"url":"https://github.com/ameotoko/directus-extension-assets/issues"},"readme":"# Directus Assets extension\n\nSmarter image resizing for [Directus][1].\n\nThis is a port of the \"Important part of an image\" feature from [Contao CMS][6].\n\n## Installation\n\nThe extension is available as NPM package:\n\n```bash\nnpm install @ameotoko/directus-extension-assets\n```\n\n\n## What does it do?\n\nThe extension allows you to mark an \"important part\" of any image in your\nFile Library. The selected area will always be preserved when image is\nautomatically [cropped][2] by Directus, i.e. when both new width and new height is set,\nand the resulting aspect ratio differs from the original aspect ratio.\n\n**Original images:**\n\n![](\"docs/originals.png\")
\n\n**Default crop by Directus:**\n\n![](\"docs/default-crop.png\")
\n\n**Smart crop by the extension:**\n\n![](\"docs/smart-crop.png\")
\n\n\n## Usage\n\nTo enable smart cropping for an image, go to image editing screen and mark the\nimportant part of the image by mouse-dragging across the image preview:\n\n![](\"docs/usage.png\")
\n\nTo reset the selection, double-click inside the blue rectangle.\n\n## Use cases\n\n### Gallery\n\nThis allows you to easily implement such content as e.g. an image gallery\nof portraits of avatars, where each source file can have different aspect\nratio, but must be displayed at the same size and aspect ratio in the frontend.\n\nJust define your [image size preset][3] once in the Data Studio, and request it\nin your frontend component, for example in React:\n\n```jsx\n\n```\n\nThen, all you or your editors have to do is set the focal point whenever new\nimage is uploaded.\n\n### HTML Responsive images\n\nAnother use-case might be implementing [responsive images][4] in your project.\nYou might want to define different image size presets for various breakpoints,\nand then use them in `srcset` attribute. Here's a rewritten [example][5] from the\nMDN article:\n\n```html\n\n```\n\n## Previous version\n\nThis extension previously provided simpler functionality, where `focal_point` of\nan image could be set by a dropdown with 8 predefined options: \"Top\", \"Left\" etc.\n\nIf you need to use this functionality in your project, install the previous version\nof the extension:\n\n```bash\nnpm install @ameotoko/directus-extension-assets@1.0.0\n```\n\n[1]: https://directus.io\n[2]: https://docs.directus.io/reference/files.html#requesting-a-thumbnail\n[3]: https://docs.directus.io/user-guide/settings/project-settings.html#files-storage\n[4]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\n[5]: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes\n[6]: https://contao.org\n","readmeFilename":"README.md"}