# SharinPix Collage (before/after photo layout)

{% hint style="info" %}
The **SharinPix Collage** component permits users to combine **two** images from a SharinPix Album into a single image. This component also allows users to save the collage to a SharinPix Album.
{% endhint %}

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-087da8194dd931e30fedf9f74ce87444659a6192%2Fsharinpix_share%20(5).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Information:**

This feature is only available on Lightning. It can be used:

* On Community Builder
* On Page Builder
* On Desktop
* On Mobile
* In Flows (but not in Field Service Mobile Flow)
  {% endhint %}

## Getting Started

To use the SharinPix Collage component, you simply need to drag and drop the component from the Lightning App Builder onto your page layout.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-ed88420f2626f6afb93858a372e17499db3d7553%2Fsharinpix_share%20(6).png?alt=media" alt=""><figcaption></figcaption></figure>

## Lightning Component Parameters

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-d9a7f64dd832b1aebb2e907d8e75b2bfbad5eb35%2Fsharinpix_share%20(7).png?alt=media" alt=""><figcaption></figcaption></figure>

* **Component ID:** Used to specify the common ID with the targeted SharinPix component. ***Note:** This parameter should be populated for the SharinPix Collage component to work. The value entered here should match the value in the component ID parameter of the corresponding SharinPix Album component found on the page.*
* **Button Label:** Used to specify the label to be shown on the button to create a collage.

## Demo

The picture below depicts a SharinPix Collage component and a SharinPix Album component with uploaded images.

{% hint style="warning" %}
**Note:**

* Both components are related using the same **Component ID** value.
* The SharinPix Collage's button in disabled as no image selection has been performed yet.
  {% endhint %}

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-e5ae0c8930894625d9b171b6d2a50e9ea8a890a5%2Fscreenshot-sharinpix-fsl-demo-dev-ed.lightning.force.com-2022.04.29-16_48_15%20(3).png?alt=media" alt=""><figcaption></figcaption></figure>

Start by selecting two images. The SharinPix Collage's button should be enabled after the selection as depicted below:

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-1296010446e0de9cbac17ca4b417f5ec91bab419%2Fscreenshot-sharinpix-fsl-demo-dev-ed.lightning.force.com-2022.04.29-16_48_15%20(4).png?alt=media" alt=""><figcaption></figcaption></figure>

Click on the button to start the collage:

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-38aeb2569c5f34c9fe4a8024a769a6e13861cf79%2Fscreenshot-sharinpix-fsl-demo-dev-ed.lightning.force.com-2022.04.29-16_48_15%20(8).png?alt=media" alt=""><figcaption></figcaption></figure>

Click the Save button to save the collage to the SharinPix Album. At this point, users can adjust, zoom in, or out of the images in the collage:

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-8ef28331fc93d3911538c4aa161ddfe3ce3a840a%2Fscreenshot-sharinpix-fsl-demo-dev-ed.lightning.force.com-2022.04.29-16_48_15%20(6).png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-d6a6de7d90081978d4024b11c7264aba10c3bd5c%2Fscreenshot-sharinpix-fsl-demo-dev-ed.lightning.force.com-2022.04.29-16_48_15%20(7).png?alt=media" alt=""><figcaption></figcaption></figure>
