# SharinPix Single Image

{% hint style="info" %}
The **SharinPix Single Image** component is used to display an image having a specific tag.

Using this component, users can also upload a photo on a record in only a few clicks. In this case, the uploaded image will be automatically tagged with the tag name specified by the SharinPix Single Image component.
{% endhint %}

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-7ebdcdc55d8ff53ce1cd444707ccac605fcccd27%2Fimage%20\(5\)%20\(3\).png?alt=media)

{% 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)
* In your own Lightning Component development
  {% endhint %}

## Getting Started

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

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-8fbff912faa92571ebfedbd6c5b16a9f1b843b98%2Fimage%20\(6\)%20\(4\).png?alt=media)

## Lightning Component Parameters

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-9ca1de296003173750495c119d87e09e3243686d%2Fimage%20\(7\)%20\(3\).png?alt=media)

* **Height:** Used to specify the component's height. The default value is **300** (px).
* **Tag name:** Used to specify the tag name of the image to be displayed. The default value is **main**.
* **Album Id:** Used to specify the album Id. If you want to use the record Id as the album Id, leave this field blank.
* **Placeholder URL:** Used to set the URL of the image to be used as the default placeholder.
* **Custom Permission ID or Name:** Used to specify the ID or name of the SharinPix Permission object to be applied on the component.
* **Enable Image Sync:** Used to enable/disable Image Sync. *Note: Image Sync is checked by default on the SharinPix Single Image component. Additional steps are required to get this feature fully working on your Salesforce object. Please refer to this article to complete the Image Sync setup:* [*Setup SharinPix Image Sync*](https://docs.sharinpix.com/documentation/image-sync/setup-sharinpix-image-sync)
* **Enable Action:** Used to enable/disable Tag Action. *Note: The Tag Action is enabled by default on the SharinPix Album component. For more information on this feature and how to complete the Tag Action setup, refer to this article:* [*Tag Action*](https://docs.sharinpix.com/documentation/features/working-with-tags/tag-action).
* **Enable Crop:** Used to enable/disable the cropping option on the uploaded image. Use a [SharinPix Permission](https://docs.sharinpix.com/documentation/access-and-security/sharinpix-permission-object-how-to-create-and-assign-custom-permission) to activate the crop after upload. The SharinPix Permission in the **Custom Permission ID or Name** will override the value of the Enable Crop parameter.
* **Auto Refresh View:** Used to enable/disable the option to reload the view.
* **Component Id:** Used to specify an ID to identify the component when multiple components are being used.

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

For the tag to be properly applied to the image or for the image to be displayed on the Single Image component, you should make sure that the tag is marked as **LISTED** in the tag section of [SharinPix Global Settings](https://docs.sharinpix.com/documentation/getting-started-with-sharinpix/overview-of-the-sharinpix-administration-dashboard) as depicted below.

For more information on how to mark the tag as listed on the global settings, click [here](https://app.gitbook.com/s/i8tH1o5AHthxksYgF6ij/image-uploaded-to-single-image-component-is-not-displayed-what-should-i-do).
{% endhint %}

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-50455b8d1a925bc0ad6ecacee48fc2f2a2e497b7%2Fimage%20\(8\)%20\(3\).png?alt=media)

{% hint style="success" %}
**Tips:**

To view and/or use all abilities available on the Single Image component, use the SharinPix Permission object. To do so, go to the SharinPix Permission object and switch to the Single Image tab. The available abilities are:

* See album
* Upload images (Setting this ability to false will make the component read-only.)
* Crop images
* Delete images
* Tag name
* Placeholder URL
  {% endhint %}

## Demo: Crop After Upload

The example below shows how the SharinPix Single Image component (highlighted in red) can be used on a Contact record page to add a profile picture:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-f73e17975f29a1a25e738a6985013484eaad6937%2FSingleImagebuilderrecord%20\(1\)%20\(1\).png?alt=media)

To enable the **Crop After Upload** ability, we need to create a SharinPix Permission object and set the **crop image after upload** to true as shown below:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-969baffe7b22886e0306c65aa4703d5ca6e2ee71%2FSingleImageBuilderPermission%20\(1\)%20\(1\).png?alt=media)

Add the name or ID of the SharinPix Permission object we just created to the Single Image component:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-810f914c1103912bb36ef81edcdc2ff9c5c28ff7%2Fimage%20\(9\)%20\(3\).png?alt=media)

To upload a photo, simply click on the component and select the desired photo.

The example below depicts the uploaded photo when the **Crop After Upload** option is enabled in the component's parameters:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-55a0d1e13bbec1dbf7545eb1762d4ac9a3ad7cca%2Fimage%20\(10\)%20\(3\).png?alt=media)

Below is the uploaded photo after cropping has been applied and the result on a record

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-f9fb5923c7489785718815df291a87aa786df5e3%2FSingleImagebuildercrop1%20\(1\)%20\(1\).png?alt=media)

## Demo: Delete Single Image

To enable the delete ability, we need to create a SharinPix Permission object and set **Delete images** to true as shown below:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-253fab41402db8ed528160041f8b50cf75250eb0%2FSingleImageBuilderDelete%20\(1\)%20\(1\).png?alt=media)

Add the name or ID of the SharinPix Permission object we just created to the Single Image component:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-810f914c1103912bb36ef81edcdc2ff9c5c28ff7%2Fimage%20\(11\)%20\(2\).png?alt=media)

We can now delete images displayed in the Single Image component.

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-97bea2c8f2c788b35c5007ac49927d8a8edef097%2Fimage%20\(12\)%20\(2\).png?alt=media)

## Demo: Add Image Caption

To enable the caption ability, we need to create a SharinPix Permission object and set **Image Caption** to true as shown below:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-3196a42f6b39a09cc71800a55ebf06aa35b5956d%2FSingleImageBuilderCaptionPermission%20\(1\)%20\(1\).png?alt=media)

Add the name or ID of the SharinPix Permission object we just created to the Single Image component as depicted earlier.

We can now add caption for a Single Image component as depicted below.

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-da6a0c2c72ab686353f1ee710eb019d11a24cc16%2Fimage%20\(13\)%20\(2\).png?alt=media)

## Demo: Add Annotation on Image

To enable the caption ability, we need to create a SharinPix Permission object and set **Annotation Images** to true as shown below:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-b56b6e670b563701005bdac311d4e29dee4c38a3%2FSingleImageBuilderAnnotationPermission%20\(1\)%20\(1\).png?alt=media)

If Annotate Images is set to true, you will be able to annotate your image in the SharinPix Single Image Component.

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-e936bce4a5c5a0464523f6c6bdc0430cbe6ff075%2Fimage%20\(14\)%20\(2\).png?alt=media)

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2Fgit-blob-619c033a09609c3721167eab673217251e966b8a%2Fimage%20\(15\)%20\(2\).png?alt=media)

{% hint style="success" %}
**Tip:**

For more information on how to enable and add image captions, click [here](https://docs.sharinpix.com/documentation/getting-started-with-sharinpix/single-image-caption).
{% endhint %}