cloudinary_collage.tsx

import { CloudinaryImage, Transformation } from "@cloudinary/url-gen";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { source } from "@cloudinary/url-gen/actions/overlay";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { autoGravity, compass } from "@cloudinary/url-gen/qualifiers/gravity";
import { AdvancedImage } from "@cloudinary/react";
import { colorize } from "@cloudinary/url-gen/actions/effect";

function App() {
  const cld = new CloudinaryImage(
      "flying_phone",
      { cloudName: "cloud_name" })
    .resize(fill().width(1200).height(1200))
    .effect(colorize().color('white'));

  cld.overlay(
        source(image("flying_phone")
          .transformation(
            new Transformation().resize(
              fill().width(600).height(1200).gravity(autoGravity())
            )
          )
        )
    .position(
      new Position().gravity(compass("west"))
    )
  );

  cld.overlay(
        source(image("paintbrushes")
          .transformation(
            new Transformation().resize(
              fill().width(600).height(1200).gravity(autoGravity())
            )
          )
        )
    .position(
      new Position().gravity(compass("east"))
    )
  );

  cld.overlay(
        source(image("hiking")
          .transformation(
            new Transformation().resize(
              fill().width(600).height(600).gravity(autoGravity())
            )
          )
        )
    .position(
      new Position().gravity(compass("south_east"))
    )
  );

  return (
    <>
      <AdvancedImage cldImg={cld} />
    </>
  );
}

export default App;


// Code for end part of video

// function App() {
//   const cld = new CloudinaryImage(
//       "flying_phone",
//       { cloudName: "my_cloud" })
//     .resize(scale().width(1200).height(1200))
//     .effect(colorize().color('white'));

//   const addOverlays = (overlays) => {
//     overlays.forEach(({ imageName, width, height, gravity }) => {
//       cld.overlay(
//         source(image(imageName)
//           .transformation(
//             new Transformation().resize(
//               fill().width(width).height(height).gravity(autoGravity())
//             )
//           )
//         )
//         .position(
//           new Position().gravity(compass(gravity))
//         )
//       );
//     });
//   };

//   const overlays = [
//     { imageName: "flying_phone", width: 600, height: 1200, gravity: "west" },
//     { imageName: "paintbrushes", width: 600, height: 600, gravity: "north_east" },
//     { imageName: "hiking", width: 600, height: 600, gravity: "south_east" }
//   ];

// addOverlays(overlays);

//   return (
//     <>
//       <AdvancedImage cldImg={cld} />
//     </>
//   );
// }

// export default App;V