# Configuring Image Sharing

Navigate to the Highlight and Share admin settings, then click the Image Sharing tab.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2F1kfJz5elWxZS4RF3n054%2Fdlx-has-image-sharing.webp?alt=media&#x26;token=cceecf3c-bcb0-480d-9ab3-38c7e63cc6ee" alt=""><figcaption><p>Image Sharing Options in Highlight and Share</p></figcaption></figure>

### Enabling Image Sharing

Click "Enable Image Sharing" to allow Highlight and Share to show sharing icons on your post images.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FQu5SFMevMnf8LsY0Xs49%2Fdlx-2024PR3fk1iI%402x.jpg?alt=media&#x26;token=330836fa-f350-4aa6-95a5-8e348768353f" alt=""><figcaption><p>Enable Image Sharing Option</p></figcaption></figure>

### Enable Pinterest Sharing

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FS4DB08r50wKbqU2jdbEs%2Fdlx-2024LfXQ48Km%402x.jpg?alt=media&#x26;token=c227f641-badf-4f21-baed-c15a79d8a6f4" alt=""><figcaption><p>Enable Pinterest Sharing on an Image</p></figcaption></figure>

When enabled, a Pinterest icon will display on an image.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FXtL29m4nUqAtKthyXPMh%2Fdlx-2024uU1oab49%402x.jpg?alt=media&#x26;token=79a4f319-9641-4f19-a526-c8a00637968a" alt=""><figcaption><p>Pin It Badge on Images on Hover</p></figcaption></figure>

### Enable Web Share Sharing

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2F8pgOKczbm5qSWHqmbtC6%2Fdlx-2024tZiA2upP%402x.jpg?alt=media&#x26;token=e7ff9dae-2ffb-4b6e-ad1d-de54b520ce66" alt=""><figcaption><p>Web Share API on Images</p></figcaption></figure>

The [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) allows for more native sharing and is typically only available on mobile devices or in supported browsers like Safari.

If on a supported browser or device, you'll see a "Share" option when hovering over an image.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2Ff2QJiwNdxnlgwfMM9nsb%2Fdlx-2024o8TJtb8U%402x.jpg?alt=media&#x26;token=5cc7e567-66ce-4e84-b737-b5372b6edca7" alt=""><figcaption><p>Web Share on the Safari Browser</p></figcaption></figure>

On the user's mobile device, they can copy or share the image as they see fit.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2F5ttARAheFEk4IhOZ1Y0V%2FIMG_5428.jpg?alt=media&#x26;token=74df30e5-029a-4f64-8ebf-e460c1c0e90e" alt=""><figcaption><p>Web Share on a User's Mobile Device</p></figcaption></figure>

### Enable Only Image Sharing Using Web Share

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FIpqEt2mTe2hK7qS3tSbp%2Fdlx-2024BYBVr4jq%402x.jpg?alt=media&#x26;token=ceb9d673-b257-4945-9d01-52ade550813b" alt=""><figcaption><p>Share Image Only Option for Web Share</p></figcaption></figure>

Depending on your site, you may want to send only the image and not the URL where the image is located. This can be useful on tutorial sites or educational sites where users may want to copy the images for use in notes easily.

{% hint style="danger" %}
**Airdropping and saving images**: This option must be enabled to support Airdrop on Mac devices.
{% endhint %}

### Exclude Leading Image

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FyNI5A54SfOO0geAcBJuh%2Fdlx-2024rft7MxwF%402x.jpg?alt=media&#x26;token=7a4a8318-c8de-4426-80b0-1faf32d6cf66" alt=""><figcaption><p>Exclude Leading Image Option for Image Sharing</p></figcaption></figure>

Sometimes, you have a featured image as the first image and want to skip that image. You can skip this "first" or leading image by checking the "Exclude Leading Image" option.

### Select Which Post Types to Enable Image Sharing

You can select which post types have image sharing enabled by checking the enabled post types.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FYqsDUoYft532FYdfjDsq%2Fdlx-2024zQfzSsy7%402x.jpg?alt=media&#x26;token=e6486ab3-e300-4c8c-ab98-6bc1bafbbceb" alt=""><figcaption><p>Post Type Options for Image Sharing Display</p></figcaption></figure>

### Sharing Preview

A sharing preview is shown periodically in the admin options to demonstrate what the sharing icons will look like when displayed on your site.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FleXCrgoTgqzu3cRqmYUi%2Fdlx-2024t54oIVCd%402x.jpg?alt=media&#x26;token=fd824200-97af-4df8-994f-bdf46beda62c" alt=""><figcaption><p>Sharing Preview</p></figcaption></figure>

### Sharing Location

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FnIMZWxPV7Dl4MPtmdH2d%2Fdlx-2024gdAEJJKD%402x.jpg?alt=media&#x26;token=26f0444f-c845-4183-b84b-f718503c214e" alt=""><figcaption><p>Set the Sharing Location</p></figcaption></figure>

By default, the sharing icons appear on the image's top-left.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FXdH0KPNeQ6QXgKPUfUEi%2Fdlx-2024DZvGAsOq%402x.jpg?alt=media&#x26;token=ae0bcd57-9178-4639-bcc5-6869fefb1881" alt=""><figcaption><p>Sharing Location in the Image Sharing Settings</p></figcaption></figure>

Sharing locations can be:

* Top Left
* Top Right
* Bottom Left
* Bottom Right
* Center

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2Fa6IuPrGiRoZ69MtvyjE6%2Fdlx-2024OzBskkXD%402x.jpg?alt=media&#x26;token=0844fc0b-a1de-414d-91c4-538cb5197c2e" alt=""><figcaption><p>Example of Center-Aligned Sharing Options</p></figcaption></figure>

### Show on Hover (enabled or disabled)

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2Fx4A3eKVWlDIvermNoCXK%2Fdlx-20248QEDV3J5%402x.jpg?alt=media&#x26;token=0aa44f7b-e2f5-4a01-a4d7-ef1f53dacd65" alt=""><figcaption><p>Show on Hover Option for Image Sharing</p></figcaption></figure>

By default, the sharing options display when hovering. If you'd like them always visible, switch this option off.

### Set up Exclusions

Matching every image can be tricky, so that's why there are exclusions.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FqPf7BM8z6TAuraHmWGQU%2Fdlx-2024RyTv1sdo%402x.jpg?alt=media&#x26;token=f4357cd4-ae5c-4346-8aa9-d83b4664b55e" alt=""><figcaption><p>Set up Exclusions to Match Keywords or CSS or Data Attributes</p></figcaption></figure>

Think of exclusions as a way to filter out any images you don't want shared.

Enter a keyword, CSS class name, or data attribute, and the image is skipped if a match is found.

### Setting the Button Labels

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FqG1S0e3xNWge74Nm8n7k%2Fdlx-2024i2CYGSG6%402x.jpg?alt=media&#x26;token=dc402485-7f40-443d-86a9-a0cbd19375b0" alt=""><figcaption><p>Show, Hide, and Customize the Button Labels</p></figcaption></figure>

This section allows you to show or hide the button labels and customize them to match the wording on your site.

If you choose to hide the labels, only the icons will display.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2F5WYnw65CFf7e8mLZm3lE%2Fdlx-2024xaIL52I0%402x.jpg?alt=media&#x26;token=c34db28f-cb67-434d-acaa-0f4b91694dd6" alt=""><figcaption><p>Hide the Sharing Button Labels to Show Icons Only</p></figcaption></figure>

### Setting the Button Shape

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2Ffm96bTreyJ5bduKUxZz5%2Fdlx-2024o442sQD5%402x.jpg?alt=media&#x26;token=b12dcd52-e685-4031-a61b-5f3d7d4a401a" alt=""><figcaption><p>Set the Button Shape</p></figcaption></figure>

Set the button shape, which can be:

* Rounded
* Circle
* Square

{% hint style="danger" %}
The circular button shape is not recommended if the button labels are visible.
{% endhint %}

Choose rounded for a button with a slight border-radius.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FQcn2eKwZGMKZv8l7dd9L%2Fdlx-2024w432FeSy%402x.jpg?alt=media&#x26;token=16e84b2c-a842-48c6-a49f-300a2c223a70" alt=""><figcaption><p>Rounded Button Appearance with Labels</p></figcaption></figure>

You can also hide the labels and use the Rounded button shape.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FQOnVQEJfjJQ57Mfunlza%2Fdlx-2024xaIL52I0%402x.jpg?alt=media&#x26;token=e76eafb7-6bf9-4dd8-bebe-f2473d256a4f" alt=""><figcaption><p>Rounded Button Appearance with Labels Hidden</p></figcaption></figure>

Choose the Square button shape for a more traditional button appearance.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FLFoJnSUPUObkyn0FWd1N%2Fdlx-20249jRs23Ky%402x.jpg?alt=media&#x26;token=3d9bff46-1438-488c-9a4d-1036a3cdad33" alt=""><figcaption><p>Square Button Appearance</p></figcaption></figure>

Choose the **Circle** button shape if you wish to display the icons only in a circular shape. Please note that the **Circle** button shape is only recommended if the labels are hidden.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FgCV4ZFAHZsybsj71uy5l%2Fdlx-2024ypEQSSPO%402x.jpg?alt=media&#x26;token=6f597328-7cbb-45bf-b5d3-6e60cd77632b" alt=""><figcaption><p>Circle Button Shape with Labels Hidden</p></figcaption></figure>

### Changing the Pinterest Colors

All colors for the Pinterest sharing icon and label can be customized.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2Ftbg6atZFC0eD0DsBtKz3%2Fdlx-2024S0bw5GEP%402x.jpg?alt=media&#x26;token=f9002e27-bc71-4f5a-bdd1-af39889b605c" alt=""><figcaption><p>Pinterest Color Options</p></figcaption></figure>

Each color can be adjusted to match your site.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FiYz7uDLpy7O255FbJxRl%2Fdlx-2024ceFVbqFi%402x.jpg?alt=media&#x26;token=724a6a22-c94d-4add-8f34-e00beb08c41c" alt=""><figcaption><p>Pinterest Color Picker Option</p></figcaption></figure>

A live preview is beneath the color options to see the changes quickly.

### Changing the Web Share Colors

All colors for the Web Share sharing icon and label can be customized.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FtDPD3aPbi89Htj7cvEqM%2Fdlx-2024bdUbCkb5%402x.jpg?alt=media&#x26;token=cb1e44cc-c817-48ac-854f-c319db496f86" alt=""><figcaption><p>Web Share Color Options</p></figcaption></figure>

You can use the color picker to match the button to your site.

<figure><img src="https://219399540-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FII25Fu7h0q7vR3UqUhpk%2Fuploads%2FmbLJ0zTw8qqv40l2MWip%2Fdlx-2024UWxnMTW0%402x.jpg?alt=media&#x26;token=acdb460c-64db-4c87-9718-e4dcaac70ac6" alt=""><figcaption><p>Customize the Web Share Colors</p></figcaption></figure>
