{"_id":"@appleple/photocollage","_rev":"5-034af0c2e0078f2cd8c762a03c7532bf","name":"@appleple/photocollage","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@appleple/photocollage","version":"0.1.0","author":{"name":"appleple"},"license":"MIT","_id":"@appleple/photocollage@0.1.0","maintainers":[{"name":"appleple","email":"info@appleple.com"}],"homepage":"https://github.com/appleple/PhotoCollage#readme","bugs":{"url":"https://github.com/appleple/PhotoCollage/issues"},"dist":{"shasum":"b32f21853eb41c126f0bb96b8438c3601bc66cd3","tarball":"https://registry.npmjs.org/@appleple/photocollage/-/photocollage-0.1.0.tgz","fileCount":6,"integrity":"sha512-JM/MP3U6tc1kAopQN1ptkMOckygLrzn2UWcIH4/dXIEAz7eK6hRT7OfrNE+EMV43wkQWz37o8kKVAwHpEWH9+w==","signatures":[{"sig":"MEUCIQC7T8eyWJx8zrq61Apa8l1m9dr/+uDY92Kg9spavD312QIgc7XDdmDKZrVhNzrvQo9RqBtQyUuNsGN8pYAQZ1ZgNAc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11743},"main":"dist/photo-collage.bundle.js","type":"module","types":"dist/index.d.ts","module":"dist/photo-collage.es.js","engines":{"node":">=22.12.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/photo-collage.es.js","require":"./dist/photo-collage.bundle.js"}},"gitHead":"9b0ec7646c683e5ec2bbd22b169f9f9d6e84dc18","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","watch":"vite build --watch","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"appleple","email":"info@appleple.com"},"repository":{"url":"git+https://github.com/appleple/PhotoCollage.git","type":"git"},"_npmVersion":"10.9.7","description":"A utility that changes the display method according to the aspect ratio and order of images.","directories":{},"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"packageManager":"pnpm@11.5.1","devDependencies":{"vite":"^8.0.16","eslint":"^10.4.1","globals":"^17.6.0","@eslint/js":"^10.0.1","typescript":"^5.9.3","vite-plugin-dts":"^5.0.2","typescript-eslint":"^8.60.1"},"_npmOperationalInternal":{"tmp":"tmp/photocollage_0.1.0_1780541205630_0.3596783615142245","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@appleple/photocollage","version":"0.1.1","author":{"name":"appleple"},"license":"MIT","_id":"@appleple/photocollage@0.1.1","maintainers":[{"name":"appleple","email":"info@appleple.com"}],"homepage":"https://github.com/appleple/PhotoCollage#readme","bugs":{"url":"https://github.com/appleple/PhotoCollage/issues"},"dist":{"shasum":"d6da995aedf3fb5887d6d87eb0ea4fffa6627eea","tarball":"https://registry.npmjs.org/@appleple/photocollage/-/photocollage-0.1.1.tgz","fileCount":6,"integrity":"sha512-ylyFWrJKa1Xj8rVKZ/DKIFm1SdR12qEk+Iv0Xlu8Ulxm0EEBXA5E2mPJFDH5AgEVW3aVPH7u0hx8ZVDCV+Dq+Q==","signatures":[{"sig":"MEUCICWya67hEBtAp+VHA4eSA1TIxPgZ5rYXRflpgOuAbZ0qAiEA2MdBsWvtblXL1ThOb4S4T8s/X4T7npvK77NnS5pjQX0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12097},"main":"dist/photo-collage.bundle.js","type":"module","types":"dist/index.d.ts","module":"dist/photo-collage.es.js","engines":{"node":">=22.12.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/photo-collage.es.js","require":"./dist/photo-collage.bundle.js"}},"gitHead":"83199f57168664cf292ffa86977b9040fa2a852e","scripts":{"dev":"vite","lint":"eslint .","build":"vite build","watch":"vite build --watch","preview":"vite preview","typecheck":"tsc --noEmit"},"_npmUser":{"name":"appleple","email":"info@appleple.com"},"repository":{"url":"git+https://github.com/appleple/PhotoCollage.git","type":"git"},"_npmVersion":"10.9.7","description":"A utility that changes the display method according to the aspect ratio and order of images.","directories":{},"_nodeVersion":"22.22.2","_hasShrinkwrap":false,"packageManager":"pnpm@11.5.1","devDependencies":{"vite":"^8.0.16","eslint":"^10.4.1","globals":"^17.6.0","@eslint/js":"^10.0.1","typescript":"^5.9.3","vite-plugin-dts":"^5.0.2","typescript-eslint":"^8.60.1"},"_npmOperationalInternal":{"tmp":"tmp/photocollage_0.1.1_1780541380669_0.18228351173670765","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-06-04T02:46:45.402Z","modified":"2026-07-31T03:43:12.530Z","0.1.0":"2026-06-04T02:46:45.766Z","0.1.1":"2026-06-04T02:49:40.828Z"},"bugs":{"url":"https://github.com/appleple/PhotoCollage/issues"},"author":{"name":"appleple"},"license":"MIT","homepage":"https://github.com/appleple/PhotoCollage#readme","repository":{"url":"git+https://github.com/appleple/PhotoCollage.git","type":"git"},"description":"A utility that changes the display method according to the aspect ratio and order of images.","maintainers":[{"email":"uidev1116@gmail.com","name":"uidev1116"},{"email":"ito@appleple.com","name":"atsu666"},{"email":"info@appleple.com","name":"appleple-bot"}],"readme":"# PhotoCollage\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/document-outliner/master/LICENSE)\n\nA utility that changes the display method according to the aspect ratio and order of images when uploading multiple images at once.\n\n## Development\n\nThis project uses [Vite](https://vite.dev/) and [pnpm](https://pnpm.io/) (requires Node.js >= 22.12). pnpm is managed via [Corepack](https://nodejs.org/api/corepack.html); run `corepack enable pnpm` once to activate the version pinned in `package.json`.\n\n```bash\npnpm install # install dependencies\npnpm dev # start the dev server (demo: examples/index.html)\npnpm build # build the library into dist/\npnpm typecheck # type-check with tsc\npnpm lint # run ESLint\n```\n\nThe build outputs `dist/photo-collage.bundle.js` (UMD) and `dist/photo-collage.es.js` (ES module). The stylesheet used by the demo lives in `examples/photocollage.css` and is not part of the published package — copy it into your own project as needed.\n\n## Installation\n\nInstall from npm:\n\n```bash\nnpm install @appleple/photocollage\n# or: pnpm add @appleple/photocollage\n# or: yarn add @appleple/photocollage\n```\n\nThen import it as an ES module:\n\n```js\nimport PhotoCollage from \"@appleple/photocollage\";\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n new PhotoCollage(\".js-photocollage\");\n});\n```\n\n## Usage\nInclude the PhotoCollage .js/.css file in your site.\n```html\n\n```\n```html\n\n```\nphotocollage.js\n```js\ndocument.addEventListener('DOMContentLoaded',function(){\n new PhotoCollage(\".js-photocollage\");\n});\n```\n\njquery-photocollage.js\n```js\n$(function(){\n $(\".js-photocollage\").PhotoCollage();\n});\n```\n\n### Basic Standalone Usage\nAt the time of five vertically long sheets\n```html\n
\n \n \n \n \n \n
\n\n\n\n```\n\n### Option\n\n\n\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\n
variabledescriptiondefault
gapSpacing between images5px
srcAttributeImage sourcesrc
marginAlbum spacing0px 0px 10px 0px
imgClassimg tag classnone
aClassa tag classnone
aAttributea tag attributenone
\n\n#### Example\n```js\ndocument.addEventListener('DOMContentLoaded',function(){\n new PhotoCollage(\".js-photocollage\",{\n srcAttribute: \"src\",\n gap: \"5px\",\n margin:\"0px 0px 20px 0px\",\n aClass: \"aExampleClass\",\n imgClass:\"imgExampleClass\",\n aAttribute: {\n \"data-example1\" : \"example1\",\n \"data-example2\" : \"example2\",\n }\n });\n});\n```\n\n#### When used in combination with SmartPhoto\n```js\ndocument.addEventListener('DOMContentLoaded',function(){\n const elements = document.getElementsByClassName('js-photocollage');\n Array.from(elements).forEach((element, index) => {\n element.classList.add('js-photoCollage-' + index)\n new PhotoCollage(\".js-photoCollage-\" + index,{\n aClass: \"js-smartPhoto\",\n aAttribute: {\n \"data-group\": \"group-\" + index,\n \"data-rel\": \"group-\" + index,\n }\n });\n });\n new SmartPhoto(\".js-smartPhoto\")\n});\n```\n","readmeFilename":"README.md"}