Try ShortPoint nowImages come in different sizes and when you use them for your SharePoint page, you want them to be in a perfect size to be both visible and meaningful. In many of ShortPoint’s design elements, you can decide whether to have the image fit the container, crop to a specific portion of the image, or use its actual size.
Here is an example of what we want to achieve:
These settings are available in the Slideshows, Tiles, Image Carousels, Image Titles, and Image Lists design elements starting from version 7.0.x.x.
Let us explore these image settings in this article.
A video version of this tutorial is available here:
TABLE OF CONTENTS
- Prerequisites:
- Step 1: Insert a ShortPoint design element
- Step 2: Add your images in the Items tab
- Step 3: Edit Image Settings
- Step 4: Insert your design element and save the page
Prerequisites:
- You have ShortPoint SPFx version 7.0.x.xx or later installed
- You have a data source that contains images you wish to connect to or you have images you want to manually insert into a ShortPoint design element
Step 1: Insert a ShortPoint design element
Edit your SharePoint page, add a ShortPoint web part or edit an existing one, select where your image will be inserted, and click the plus sign to open Page Builder.
For Modern pages:
For Classic pages:
Add Slideshows, Tiles, Image Carousels, Image Titles, or Image Lists from Page Builder. In our example, we are using the Image Carousels design element.
Step 2: Add your images in the Items tab
Go to the Items tab. Select the image you will use from your site folders, upload a new image, or insert an image URL in the Image Field.
Note: You can also use the ShortPoint Connect feature to pull data from your preferred source. Follow the steps in our article How to Use Image Settings for Connected Items.
Enter other information that goes together with each image.
Continue adding other items by hitting the plus sign in the Items panel.
Once you have added all your content, you are now ready to make adjustments to the images in the next step.
Step 3: Edit Image Settings
By default, ShortPoint automatically crops the image to fill the container. Without resizing the image itself beforehand, it may be cropped in the wrong places.
Here is an example:
Edit how an image is displayed without having to resize the original image by making changes in Image Settings.
Image Settings can be seen in two places within a ShortPoint design element
In the Settings Tab:
You can adjust Image Settings from the Settings tab. When changes are made here, it will be uniformly applied to all entries in the Items tab.
In the Items Tab:
You can also find Image Settings in the Items Tab which will allow you to set different properties for each individual item.
Note: When manually entering an item, you can make adjustments for each one. When connected, changes will be applied to all the images. Changes made in the Items Tab have priority over the ones made in the Settings tab.
Image Settings Options:
Tweak how your image displays by making selections or entering values in the fields listed below.
Image Placement
Choose how your image will be resized.
- 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 being 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)
Empty area style
When you select Show entire image or Actual size, your image may not be able to fill the container of your design element. You can use the Empty area style options to fill the blank space.
Choose between:
- Blurred - attaches a blurred duplicate image in the background
- No background
- Solid color - attaches a solid colored background
Blur Size
You can choose how blurred the duplicate image will be when a blurred background is selected
Solid Color
You can select Solid color and choose your preferred background color from the dropdown or enter a hex code value directly (example: #000000 for black).
Enable advanced image settings
View more options for image settings by sliding Enable advanced image settings toggle on.
Image Horizontal Position
From a horizontal perspective, select which section of the image will be used.
Image Vertical Position
From a vertical perspective, select which section of the image will be used.
Image Repeat
When images cannot fill the container they are placed in, you have the option to duplicate the image and how it will be presented.
Step 4: Insert your design element and save the page
Once you are done with your adjustments, you can Preview the result. Click Insert when done with the design element and save your changes.
In our desired output, we used Show entire image, we selected to fill the background with a Blurred image and set it to Medium blur.
Your images will now be cropped beautifully and will be a valuable addition to your page.
Related articles:
