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


Insert Image Design Element on SharePoint Modern


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.


Choose Image Design Element in Page Builder


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.


Add Image URL in Setting Tab


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.


Insert Completed ShortPoint Design Element


Here is our published page with an Image Design Element:


Sample Image Design Element on SharePoint Site


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.


Use Different Images for Tablet and Mobile


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


Panoramic view settings


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


Adjust image display size - width and height


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


Advanced image width and height settings


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


Choose a color overlay


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


Linking options


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


Lazy rendering of the image on the page


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.


Change space settings


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:


padding sample


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


Change margins for images


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:


adding margin values


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.


Connect tab options


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.


Add custom CSS


That is it! Enjoy adding images to your SharePoint page.


Related articles: