# Large View: Toolbar - Crop with Aspect Ratios

SharinPix allows you to crop an image from an album to a specified aspect ratio.

In this article, we will show you how to specify aspect ratios using:

1. [SharinPix Permission Object](#specify-aspect-ratios-using-sharinpix-permission-admin-oriented) (This method is suitable for admins)
2. [SharinPix Parameters](#specify-aspect-ratios-using-sharinpix-parameters-developer-oriented)

To crop an image to a specified aspect ratio, you first need to access the crop Editing mode by:

1\. Clicking on the image to access the large view:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2F6S0Bc3EVpBVOtAf4XRXO%2Fimage%20\(8\).png?alt=media\&token=78af771b-f827-4972-aea4-ce213d289d72)

2\. Selecting the **crop** option to activate the Editing mode:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2F9Nft8iNKndKf3jdncIzr%2Fimage%20\(9\).png?alt=media\&token=e0233bca-be6a-4588-abbc-96c1a2ce8fad)

3\. Accessing the **Aspect Ratio** feature from the Editing mode:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FR0XCPFrcZqZwagGrcYrx%2Fimage%20\(10\).png?alt=media\&token=775702e1-8b29-4f30-b989-56776daa2635)

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

For more information about the crop option or the features available in the Editing mode, refer to the previous article or click on the following link: [Large View: Toolbar – Crop](https://docs.sharinpix.com/documentation/features/user-interface/large-view-toolbar-crop)
{% endhint %}

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

The crop option can only be configured by either using a **SharinPix Permission record** or by **code implementation**.
{% endhint %}

## Specify Aspect Ratios Using SharinPix Permission (Admin-Oriented)

Aspect ratios can be easily specified using the SharinPix Permission object (an object allowing users to configure the features to be added or omitted from a SharinPix album).

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

For more information about the SharinPix Permission object, refer to the following article:

[SharinPix Permission object](https://docs.sharinpix.com/documentation/access-and-security/sharinpix-permission-object-how-to-create-and-assign-custom-permission)
{% endhint %}

To specify aspect ratios using SharinPix Permission:

* Create or edit a SharinPix Permission record
* In the **Toolbar** section, check the option **Crop images**. Then, enter the aspect ratios you intend to use in the **Crop ratio** section as demonstrated in the example below:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FoXwQZ8CRSrBopwmlXRsF%2Fimage%20\(11\).png?alt=media\&token=8880d09f-2fa2-4fdf-9db3-a838a37174b9)

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

* The aspect ratios specified in the **Crop ratio** section should be separated by a semi-colon

* The aspect ratios are displayed in the same order as entered in the **Crop ratio** section

* The first value specified in the list will be applied by default when accessing the Aspect Ratio feature from the crop Editing mode
  {% endhint %}

* Check the other features you want to apply to the SharinPix album and click save when done

{% hint style="info" %}
In the example above, the aspect ratios specified are **4:3** , **1:1** , **16:9** and **free**.

While the values **4:3**, **1:1** and **16:9** are self-explanatory, the '**free**' value looks foreign. This is because the 'free' value is predefined in SharinPix and it allows users to adjust the crop frame as desired.
{% endhint %}

You can also display labels in the **Aspect Ratio list** available from the **Editing mode** instead of the actual values.

To do so, simply use the following format in the **Crop ratio** section in your **SharinPix Permission r**ecord:

<p align="center"> <mark style="color:$danger;"><code>4:3|Banner;1:1|Square;16:9|Landscape;free|Free</code></mark></p>

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2F6xvJQnMW8g0IpjDu6SdS%2Fimage%20\(12\).png?alt=media\&token=ae9bae25-d85c-4bcb-b2a5-0e3f6fb75ded)

The result is depicted in the example below:

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FsYoJ6DOxm1RJDA2N0dHM%2Fimage%20\(13\).png?alt=media\&token=b8462530-6479-4d5a-94a6-859935fe557e)

## Specify Aspect Ratios Using SharinPix Parameters (Developer-Oriented)

Aspect ratios can also be specified using SharinPix Parameters and subsequently used in a SharinPix album wrapped within a Visualforce Page.

To specify aspect ratios using SharinPix parameters:

* Create an Apex Controller that will define the SharinPix album's parameters (including the part on aspect ratios specification) using the code snippet below:

```apex
public class SharinPixAlbumController {
	public String parameters {get; set;}
    public SharinPixAlbumController(ApexPages.StandardController stdCtrl) {
        Id albumId = stdCtrl.getId();
        
        Map<String, Object> params = new Map<String, Object> { 
            'abilities' =>  new Map<String, Object> { 
                albumId =>  new Map<String, Object> { 
                    'Access' =>  new Map<String, Object> { 
                        'see' => true,
                        'image_list' => true,
                        'image_upload' => true,
                        'image_delete' => true
                    }
                }
            },
            'Id' => albumId,
            'crop_ratio' => new List<String>{'4:3','1:1','16.9','free'}
		};
        parameters = JSON.serialize(params);
    }
}
```

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

* The crop ratio should be added at the **root**
* The aspect ratios should be specified in the following format:

<p align="center"> <mark style="color:$danger;"><code>'crop_ratio' => new List{'4:3','1:1','16:9','free'}</code></mark></p>
{% endhint %}

* Next, implement the Visualforce Page embedding the SharinPix album with the applied parameters using the code snippet below:

{% code fullWidth="false" %}

```apex
    <apex:page StandardController="Account" extensions="SharinPixAlbumController">
    	<sharinpix:SharinPix parameters="{! parameters }" height="500px" />
    </apex:page>
```

{% endcode %}

* Finally, add the Visualforce Page to the **Account** record layout so as to test the aspect ratios

![](https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2F1ZsjxglvWXXNwkUocZND%2Fimage%20\(14\).png?alt=media\&token=023a585c-3a41-4b5d-a361-cfa210112b48)
