Image Gallery

The Sprocket Image Gallery web part allows you to display a group of selected images in different layouts of your choice. This web part also provides you a preview option.
When your page is in Edit mode, click the icon, search for "Sprocket Image Gallery", and select the Sprocket Image Gallery web part from the results.

Features

• Upload images into a SharePoint document or picture library
• Display images in a grid layout based on columns or rows
• Lightbox to browse through images
• Download individual image
• Unlimited amount of images
• Reference a document library in another site collection

Configurations

After you select the Sprocket Image Gallery web part, click the Configure Web Part button or icon on the menu on the left of the web part to open the Configuration section on the right. In this section, you can perform the following configurations:

1. On page 1, configure the following in the Display Options section:

   Field	Description
   Show Title	Click to enable title display of the web part.
   Show in Panel	Click to enable display of items in panel.
   Layout	Click the drop-down list and select layout as Columns or Rows.
   Images Per Row	Enter the number of images per row.
   Open Gallery in New tab	Enable to open the gallery on a new tab, when you click Go to Gallery button. If this option is disabled, the list will open on the same page.
   Maximum number of items	Enter the maximum number of items that you want to include on a page.

2. Click Next to navigate to page 2. On this page, configure the following in the Query Options section.

tip

Fields marked with red asterisks (*) are mandatory.

Field	Description
Site URL	Click the drop-down list and select a source site.
Web URL	Click the drop-down list and select a source web.
List Title	Click the drop-down list and select a source list.
Order By	Click the drop-down list and select a field value based on which you want to order the documents.
Show items in ascending order/Show items in descending order	Select from one of the options to order the list based on ascending or descending order of the field value selected in Order By field.
Query within folders	Enable to allow querying within folders.
Group By	Click the drop-down list and select a field value based on which you want to group the documents.

Using Filters

Filters enable you to control the document listing. Sprocket offers you the following filter options:

1. **Use Query Strings**  
    To use the query string, add `[PageQueryString:Parameter]` to the 'Value' text box of each filter. To use the property bag, add `[PropertyBagKey:Key]` to the 'Value' text box of each filter. You can also use the current url with `[CurrentPageUrl]`.  
2. **Use Expressions**  
To use expressions, click **Add Filter** button and in the pop-up, select values for Field, Operator, and Values. You can use And/Or conditions to define multiple expressions.

Gallery Configurations

Click Add button on the web part to add images to the gallery. You can select images using the following options:

1. Click Add button on the web part to add images to the gallery. You can select images using the following options:

   Option	Description
   Recent	Select from the list of recent images used in the site.
   Stock Images	Select from a list of stock images listed in categories. You can also search for images among these.
   Web search	Perform a web search and find images. You are also provided with an option to select from predefined categories.
   One Drive	Select images from your connected OneDrive account.
   Site	View all the folders available on your site and add available images.
   Upload	Enables you to browse and upload images from your computer.
   From a Link	Enter a web URL to add an image. For example, paste a link to an image in OneDrive for Business or SharePoint Online.

2. Once the required images are selected, click Open button to add the images to the gallery.

3. After the images are added to the gallery, click the icon on the menu on the left of the web part to open the Configuration section on the right. In this section, you can perform the following Layout configurations:

   Brick Layout

* View the images as organized icons by keeping aspect ratio of the actual size.
* Click <img src="/assets/edit_gallery.png" width="15" /> icon to add a title, caption, and alternate text for the image.
* Click <img src="/assets/remove_from_gallery.png" width="15" /> icon to remove an image from the gallery.  

Grid Layout

* View the images as perfect square icons.
* Click <img src="/assets/edit_gallery.png" width="15" /> icon to add a title, caption, and alternate text for the image.
* Click <img src="/assets/expand_gallery.png" width="15" /> icon to organize images in the gallery.
* Click <img src="/assets/remove_from_gallery.png" width="15" /> icon to remove an image from the gallery.
* Click the drop-down list in **Aspect ratio** field and select from the following options:
    - 1:1 square
    - 16:9 wide
    - 4:3 standard
    

Carousel Layout

* View the images in enhanced preview mode.
* Click <img src="/assets/edit_gallery.png" width="15" /> icon to add a title, caption, and alternate text for the image.
* Use <img src="/assets/previous_gallery.png" width="15" /> or <img src="/assets/next_gallery.png" width="15" /> icons to view previous and next images, respectively.
* Click <img src="/assets/remove_from_gallery.png" width="15" /> icon to remove an image from the gallery.

3. Once all the required updates and configurations are performed, click Republish button to publish the page.

FAQs

1. How many images can I upload to the Sprocket Image Gallery web part?
As of now, there is NO LIMIT set for the number of images that you can add to the gallery.