Configuring Image Sharing

You can customize the look and feel of how image sharing looks and behaves.

Navigate to the Highlight and Share admin settings and click on the Images tab.

Image Sharing Options in Highlight and Share

Enabling Image Sharing

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

Enable Image Sharing Option

Enable Pinterest Sharing

Enable Pinterest Sharing on an Image

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

Pin It Badge on Images on Hover

Enable Web Share Sharing

Web Share API on Images

The 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.

Web Share on the Safari Browser

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

Web Share on a User's Mobile Device

Enable Only Image Sharing Using Web Share

Share Image Only Option for Web Share

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.

Exclude Leading Image

Exclude Leading Image Option for Image Sharing

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.

Post Type Options for Image Sharing Display

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.

Sharing Preview

Sharing Location

Set the Sharing Location

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

Sharing Location in the Image Sharing Settings

Sharing locations can be:

  • Top Left

  • Top Right

  • Bottom Left

  • Bottom Right

  • Center

Example of Center-Aligned Sharing Options

Show on Hover (enabled or disabled)

Show on Hover Option for Image Sharing

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.

Set up Exclusions to Match Keywords or CSS or Data Attributes

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

Show, Hide, and Customize the Button Labels

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.

Hide the Sharing Button Labels to Show Icons Only

Setting the Button Shape

Set the Button Shape

Set the button shape, which can be:

  • Rounded

  • Circle

  • Square

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

Rounded Button Appearance with Labels

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

Rounded Button Appearance with Labels Hidden

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

Square Button Appearance

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.

Circle Button Shape with Labels Hidden

Changing the Pinterest Colors

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

Pinterest Color Options

Each color can be adjusted to match your site.

Pinterest Color Picker Option

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.

Web Share Color Options

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

Customize the Web Share Colors

Last updated

Was this helpful?