How can we help you today?

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. 


Image cropping default


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 

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.


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.


Design Element tag


  • Select the cogwheel icon.


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.


Enable andvanced image settings options


  • (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.


eye icon


  • Click Save to apply all changes.


Save


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.


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.


Design Element tag


  • Select the cogwheel icon.


Cogwheel icon


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


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.


Enable andvanced image settings options


  • Click the back icon to see all items.


back icon


  • (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.

connected Image carousel

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.


eye icon


  • Click Save to apply all changes.


Save


Image Settings Features

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



Image PlacementImage 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 andvanced image settings optionsEnable 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 styleEmpty 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 sizeBlur 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 colorBackground 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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 74 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more