Try ShortPoint nowImages can capture a user's interest when placed strategically in your SharePoint site. This article focuses on the ShortPoint Image Design Element, introduced in ShortPoint version 6.9.35.x onwards, which allows you to insert basic and panoramic images. Make good use of images to get your message across or set a few up to make your site more appealing.
Let us learn more about the ShortPoint Image Design Element.
Prerequisite:
- You have ShortPoint version 6.9.35.x or higher installed. Click here to check and download the latest available version of ShortPoint.
Inserting a ShortPoint Image Design Element
Step 1: Choose Image Design Element in ShortPoint Page Builder
In the ShortPoint Page Builder, you can select the Image Design Element to insert an image on your page.
Modern Page:
Edit your SharePoint page and insert a ShortPoint web part. Click the plus sign to show Page Builder options.
Classic Page:
For Classic, go to the Insert tab and click insert in the ShortPoint section on the ribbon.
Select Image from the Page Builder options.
Step 2: Enter URL, Browse or Upload Image file
You can add an image that is located from within the site/site collection or use a link to an external site or storage.
Paste Image URL
Copy your image's URL and paste it in the Image field in the Settings tab. The Image Live Preview will show the image you have chosen.
Note: To avoid encountering performance issues, the recommended maximum image size is 256kb and maximum image width is 2560px.
Browse or Upload Image File
You can click the folder icon on the Image field to go to the File Picker panel. Navigate and select an image file that is already on your site/site collection or upload the image you want to use. Hit Open to complete.
It is recommended to create a folder for your site images for easy accessibility.
Step 3: Edit Design Features
You can customize how the image is displayed on your page by editing the different fields contained in the Image Design Element tabs.
See the Features section below for a complete list and corresponding details.
Step 4: Insert and Publish
Click the Insert button once you have finalized your image display and Publish your changes.
Here is our published page with an Image Design Element:
Features
1. Settings Tab
Once you have selected the image in the ShortPoint Image Design Element, you can set preferences on how the image will display on the site.
- Use Different Images for Tablets and Mobile Devices - Switch the toggle on and you have the option to choose a different image to display on a tablet or mobile. Add an image URL, browse or upload the image you want to use for each.
- Panoramic View - You can choose to activate an interactive image interface by turning on the panoramic view. Learn more about this feature in this separate article.
- Size - Take control of the actual size you want your image to be shown on your page. Turn on the Full Width toggle for the image to fill the width of the section, row, or column where the image will be contained. You can also manually adjust the width and height by using the sliders or by entering a specific number. (Width can be in pixels or a percentage of the width of the container).
- Enable Advanced Width/Height Settings - Switch toggle on and you can set minimum and maximum widths and heights your image will display to. You can use the sliders to set these or enter a specific number in the fields.
- Color Overlay - Add a film of color over the images by selecting your preferred color from the dropdown and adjusting the slider to your preferred transparency.
- Linking - Enter a URL where you want your user to be brought if they click the image and select an option in the drop-down for link actions.
- Image Lazy Rendering - To help in the efficiency of your page, you can select this feature to delay the loading of the image until the user is viewing the section where it is displayed.
2. Spacing Tab
You can change the inner spacing (padding) and outer spacing (margin) for the image on different devices.
- Custom Padding - Enter values for top, right, bottom, and left to adjust inner spaces between images. You can also set different values for tablet and mobile devices by switching toggle on for Applying different padding for Tablet / Mobile Devices.
The padding values are set in px (pixels) by default, but you can use percentage (%). In this example, you can see how it will look like if you put 20% padding value on the left:
- Custom Margin - Enter values for top, right, bottom, and left to adjust the margins for the image. You can also set different values for tablet and mobile devices by switching toggle on for Applying different margin for Tablet / Mobile Devices.
The margin values are set in px (pixels) by default, but you can use percentage (%). In this example, you can see how it will look like if you put 20% margin value on the top:
3. Connect Tab
You can set the Image Design Element to pull images from different sources through ShortPoint Connect capability. For more details, please access the ShortPoint Connect: Basic Tutorial article.
4. Visibility Tab
Control who you want the ShortPoint Design Element to visible for in this tab.
- People and Groups - You have the ability to make the image visible only to specific individuals by selecting them from the dropdown. You can also limit visibility to a specific group by searching and selecting them in the dropdown.
- Devices - Turn on the toggle for devices you do not wish to display the image on.
5. Custom CSS Tab
For more flexibility on how you want your image to be displayed, you can create your custom CSS and insert it in the space provided.
We have basic and advanced Custom CSS tutorials in case you need some help.
That is it! Enjoy adding images to your SharePoint page.
Related articles: