How to Use Image Settings to Manage Image Cropping in ShortPoint Elements

By default, ShortPoint crops your images to fit its container. However, images come in different sizes and when you use them for your SharePoint page, you want them to be in the perfect size. 

This article will demonstrate how you can use Image Settings to adjust the size of your images. Follow along below to learn the two ways to access Image Settings and the features it has. 

TABLE OF CONTENTS

• Prerequisites
• Option 1: Using Image Settings in the Design tab 
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Go to Image Settings
  • Step 3: Customize the Image 
  • Step 4: Insert and Save
• Option 2: Using Image Settings in the Items tab 
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Go to Image Settings
  • Step 3: Customize the Image 
  • Step 4: Insert and Save
• Image Settings Features

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must have a Design Element that allows you to display images on your page. These Design Elements include Image Carousels, Slideshows, Tiles, Image Titles, and Image Lists. 

Option 1: Using Image Settings in the Design tab 

Image Settings in the Design Tab applies all your customizations to all images in the Design Element. Click Get Started to learn how to use it:

NOTECheck out Image Settings Features to learn more about the OOTB options you can customize.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Go to Image Settings

NOTEBefore proceeding, make sure you already have a Design Element that allows you to display images on your page. These Design Elements include Image Carousels, Slideshows, Tiles, Image Titles, and Image Lists.

• Click the Design Element tag.

• Select the cogwheel icon.

• Navigate to the Design tab.
• Click Image Settings to see the options under it.

Step 3: Customize the Image 

• Choose your preferred Image Placement.
• Toggle on Enable Advanced Image Settings.
• Customize the [1] Image Horizontal Position, [2] Image Vertical Position, and [3] Image Repeat.

• (Optional) Choose an Empty Area Style.

NOTECheck out Image Settings Features to learn more about the OOTB options you can customize.

Step 4: Insert and Save

• Once satisfied with your changes, click the green check mark.
• Click the eye icon to see your page in real-time.

• Click Save to apply all changes.

Option 2: Using Image Settings in the Items tab 

Image Settings in the Items Tab applies your customizations only on the selected item. Click Get Started to learn how to use it:

NOTECheck out Image Settings Features to learn more about the OOTB options you can customize.

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Go to Image Settings

NOTEBefore proceeding, make sure you already have a Design Element that allows you to display images on your page. These Design Elements include Image Carousels, Slideshows, Tiles, Image Titles, and Image Lists.

• Click the Design Element tag.

• Select the cogwheel icon.

• In the Items tab, click the cogwheel icon of the first item.

• Navigate to the Design tab.
• Click Image Settings to see the options under it.

Step 3: Customize the Image 

• Choose your preferred Image Placement.
• Toggle on Enable Advanced Image Settings.
• Customize the [1] Image Horizontal Position, [2] Image Vertical Position, and [3] Image Repeat.

• Click the back icon to see all items.

• (Optional) If you have any other item to edit, repeat the steps above.

NOTECheck out Image Settings Features to learn more about the OOTB options you can customize.

NOTEWhen manually entering an item, you can make adjustments for each one. When connected, changes will be applied to all images. Changes made in the Items tab have priority over the ones made in the Design tab.

Step 4: Insert and Save

• Once satisfied with your changes, click the green check mark.
• Click the eye icon to see your page in real-time.

• Click Save to apply all changes.

Image Settings Features

Start the interactive experience to see all available features and see how it works in real-time:

	Image Placement	allows you to choose how your images will be resized. You can choose from the following: Cover the area - will resize the image to fill the whole container from all edges, while maintaining the image aspect ratio (useful if you want to apply a background to the whole container and you are fine with having parts of the image cropped). Show entire image - will resize the image to make the whole image fill the container while maintaining the image aspect ratio (useful if you want the whole image to be shown without any cropping). Actual size - will show the exact image size without any resizing, while maintaining the image aspect ratio (useful if you want to show the exact dimensions of the image).
	Enable Advanced Image Settings	when enabled, additional image options will be available. Image Horizontal Position - allows you to adjust the position of the image in a horizontal perspective. You can choose from Left, Center, or Right. Image Vertical Position - allows you to adjust the position of the image in a vertical perspective. You can choose from Top, Center, or Bottom. Image Repeat - allows you to repeat the image when the image doesn’t fit the whole container. You can choose from Repeat, Don’t Repeat, Repeat Horizontally, or Repeat Vertically.
	Empty Area Style	allows you to customize the image background. You can choose from: Blurred - attaches a blurred duplicate image in the background. No background - removes the background. Solid color - attaches a solid-colored background.
	Blur Size	allows you to customize the intensity of the blurred background. You can choose from Light, Medium, or Strong. This option will only appear if you choose Blurred as the Empty Area Style.
	Background Color	allows you to choose your preferred background color. To do so, you can [1] enter the HEX code, [2] choose a color from the drop-down, or  [3] use the color picker. This option will only appear if you choose Solid Color as the Empty Area Style.

That’s it! You can now present your images using Image Settings in a meaningful and creative way. 

Related articles:

• Introducing ShortPoint Image Design Element
• How to Use Image Settings for Connected Items
• Enable Copying Elements from your Page