PhotoCollage

A utility that changes the display method according to the aspect ratio and order of images when uploading multiple images at once.

Development

This project uses Vite and pnpm (requires Node.js >= 22.12). pnpm is managed via Corepack; run corepack enable pnpm once to activate the version pinned in package.json.

pnpm install      # install dependencies
pnpm dev          # start the dev server (demo: examples/index.html)
pnpm build        # build the library into dist/
pnpm typecheck    # type-check with tsc
pnpm lint         # run ESLint

The 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.

Installation

Install from npm:

npm install @appleple/photocollage
# or: pnpm add @appleple/photocollage
# or: yarn add @appleple/photocollage

Then import it as an ES module:

import PhotoCollage from "@appleple/photocollage";

document.addEventListener("DOMContentLoaded", () => {
  new PhotoCollage(".js-photocollage");
});

Usage

Include the PhotoCollage .js/.css file in your site.

<script src="/path/to/js/photocollage.bundle.js"></script>

<link rel="stylesheet" href="/path/to/css/photocollage.css">

photocollage.js

document.addEventListener('DOMContentLoaded',function(){
    new PhotoCollage(".js-photocollage");
});

jquery-photocollage.js

$(function(){
    $(".js-photocollage").PhotoCollage();
});

Basic Standalone Usage

At the time of five vertically long sheets

<div class="js-photocollage">
  <img src="example1.jpg" width="480" height="640">
  <img src="example2.jpg" width="480" height="640">
  <img src="example3.jpg" width="480" height="640">
  <img src="example4.jpg" width="480" height="640">
  <img src="example5.jpg" width="480" height="640">
</div>
<link rel="stylesheet" href="./css/photocollage.css">
<script src="./js/photocollage.bundle.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
  new PhotoCollage(".js-photocollage");
});
</script>

Option

variable	description	default
gap	Spacing between images	5px
srcAttribute	Image source	src
margin	Album spacing	0px 0px 10px 0px
imgClass	img tag class	none
aClass	a tag class	none
aAttribute	a tag attribute	none

Example

document.addEventListener('DOMContentLoaded',function(){
  new PhotoCollage(".js-photocollage",{
    srcAttribute: "src",
    gap: "5px",
    margin:"0px 0px 20px 0px",
    aClass: "aExampleClass",
    imgClass:"imgExampleClass",
    aAttribute: {
      "data-example1" : "example1",
      "data-example2" : "example2",
    }
  });
});

When used in combination with SmartPhoto

document.addEventListener('DOMContentLoaded',function(){
        const elements = document.getElementsByClassName('js-photocollage');
        Array.from(elements).forEach((element, index) => {
          element.classList.add('js-photoCollage-' + index)
          new PhotoCollage(".js-photoCollage-" + index,{
          aClass: "js-smartPhoto",
          aAttribute: {
            "data-group": "group-" + index,
            "data-rel": "group-" + index,
          }
        });
        });
        new SmartPhoto(".js-smartPhoto")
});