SharePoint Image Gallery

 Hi Friends,

SharePoint Framework Image Gallery webpart will allow you to create a image gallery with lot of options. These are beautiful galleries options with responsiveness and configurations.

In this webpart, there are 3 types of gallery views, which will help you in desiging your SharePoint page more attractive and more meaningful



Check the code here

Gallery Views

  • Lightbox Layout
  • Carousel layout
  • List Layout

Features..!!

  • Add Captions to the images
  • Create redirect links with any view
  • Add description to the List layout for more information
  • Choose source from the current site or any other site
  • Option to choose from multiple document libraries
  • Option to choose from the number of images
  • Option to choose from the auto-rotation and the duration in the carousel layout
  • Option to choose from number of images in a row, set as per your area

Lightbox Layout Screen

This layout is a flexible layout where multiple images can be displayed in a small area. You have the option to choose the number of images in a row, which will make more configurable to suite your needs and ofcourse you have the option to choose the number of images as well. Below is the glimpse of it.



Carousel Layout Screen

New improved carousel effect, which makes it more appealing. Choose from the option to auto-rotate or keep it manual. Displays the number of items in the carousel and choose the speed of the auto-rotation.



List Layout Screen

This layout is more informative with an image to attract the type of information. Create redirect link to navigate user if they want to know more.



Prerequisites

Document library with below columns

Column Internal NameColumn Type
EnableYes/No
DescriptionMultiple lines of text
RedirectLinkSingle line of text
CaptionSingle line of text

How to add the webpart



Configuration


Code & Package

Happy Coding...!!
#SharePointWidgets #Microsoft #SPFx

Comments

  1. Manfred GuendelNovember 9, 2017 at 2:01 AM

    Hello Sumit, I'll like to try your solution, but can you provide more details about how to deploy it?

    ReplyDelete
    Replies
    1. Sumit KanchanNovember 9, 2017 at 4:07 PM

      Hi Manfred,

      Make a clone from the GIT repository "https://github.com/SumitKanchan4/SPFxImageGallery" and open the folder in Visual Studio code.
      Change the CDN base path to the your tenant path
      Execute the following command
      1. npm install
      2. gulp
      3. gulp build --ship
      3. gulp package-solution --ship

      Now upload the .spkgg and related files

      Delete
  2. Kirti PrajapatiJanuary 10, 2018 at 7:33 PM

    Hi Sumit,

    I am trying to build your solution and getting an error like "Cannot find module spfxhelper" on line #15
    import { SPListOperations, BaseTemplate, SPHelperCommon } from 'spfxhelper';

    I have installed dependency modules but still getting the error. Can you please advice what i am missing?

    Thanks,
    KP

    ReplyDelete
    Replies
    1. Sumit KanchanJanuary 15, 2018 at 9:21 PM

      Thanks Kriti for bringing this in notice. Actually there was the issue in the spfxHelper class which i have resolved. Please update the package.config with the spfxhelper version to 1.5.1 and try to build again.

      Thanks,
      Sumit Kanchan

      Delete
  3. zahraSeptember 18, 2020 at 7:51 PM

    Hello Sunmit,
    Great Work.

    But I am currently facing an issue when adding the web part to SharePoint Online. For the selection of the Document Library to be used for the Image Gallery, the drop down doesn't work and I cannot select anything.

    Please advise.

    ReplyDelete
    Replies
    1. Sumit KanchanSeptember 21, 2020 at 12:03 PM

      Hi Zahra, Thanks for your kind words. To use it, it needs to be Picture library. I am aware that there is no straight way of creating in online, I am working of new version of the webpart. But for now it works with the Picture library and not the Document library.

      Delete
  4. keedmanSeptember 21, 2020 at 2:01 PM

    Hi Sumit Kanchan how do i know what cdnBasePath to make use of

    ReplyDelete
    Replies
    1. Sumit KanchanSeptember 21, 2020 at 2:47 PM

      Hi Keedman, CDN Base Path is the path where you have uploaded the assets. The solution is old built so auto upload was not there.. As I said I am working on newer version. to understand better please follow the link
      https://www.c-sharpcorner.com/article/different-cdn-options-for-sharepoint-framework-webpart/

      Delete
    2. keedmanSeptember 21, 2020 at 4:06 PM

      Thank you Sumit,

      how soon may it take for the new version be available

      Delete
    3. Sumit KanchanSeptember 22, 2020 at 11:13 AM

      Hi, I am targetting it to be published by next week

      Delete
    4. keedmanSeptember 23, 2020 at 2:54 PM

      Thank you sumit, appreciate

      Delete
    5. Sumit KanchanSeptember 23, 2020 at 5:53 PM

      Hi Keedman, New version of the solution has been published, please have a look and go through the documentation regarding the library column required.

      Delete
    6. keedmanMarch 11, 2021 at 4:08 PM

      okay

      Delete
  5. rfevfevNovember 26, 2020 at 3:43 AM

    Hello this looks awesome. Is there anyway you may be able to provide a .sppkg? Thank you!

    ReplyDelete
    Replies
    1. Sumit KanchanDecember 5, 2020 at 9:12 AM

      Hi, You can visit the github repo, under release there is .sppkg file added.

      Delete
  6. AnonymousMay 4, 2022 at 5:43 AM

    Hello Sumit. Wow, thank you so much for making this!

    I have some questions for the Lightbox and List Views:
    1. Can you remove the thumbnail image border and shadow (as shown in your promo images)?
    2. Can you force the thumbnails to be square?
    3. What is the Max limit for number of images (can it be unlimited?) as we have over 50.
    4. What is the max character count for the captions in Lightbox mode (and is there a READ MORE... option)?
    5. Can you add an additional image to the "caption"? Eg a photo of the artist? [this is a nice-to-have].

    ReplyDelete

Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Image
Hi Friends, Today blog is about renaming the folder in the document library using the MS FLOW or MS Power Automate. When I started working on this it seems to be an easy job, but if you look into the connectors you'll find it really difficult as there is no straight forwards connector to do the job. Issues encountered If you try using the " Get Folder Metadata " connector, you'll not be able to get the ID of the folder as it is returning as the negative value. If you get the ID somehow and try to update the folder name using the " Update File Properties " connector, you'll end up renaming only the title of the folder, but it will still have the old name as the display name which in case is again a failure. There is no other connector which can be utilized to achieve the task of renaming the folder in a document library directly. Solution The solution is a simple three-step (at least in this example). Step 1: Initialize variables In case you are computing...
Read more

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Image
  Q. How to add "New Line", while adding the text to the SharePoint multiline text field?  A . In order to add the new line while adding a text to the multiline SharePoint field, I will demonstrate the simplest approach. Although you can find multiple approaches, but this one seems to be very easy and quick. You need to append the below expression to the text to make it to the new line: decodeUriComponent('%0A') If you are adding any array, then join the array using this expression or if you are building this string, then append this expression to the string. Step 1:  Add a variable and add the below expression (Write the code under the Expression tab) STEP 2: This is how your variable will look like      STEP 3: Output of the Address columns which is of Type Multiline text field Happy Coding..!! #Microsft #SharePointWidgets #PowerAutomate
Read more

Power Automate: Rename file in SharePoint Online

Image
  We often get to change the name of the file, so in this article, I will explain how to rename the file in SharePoint Online using Microsoft Power Automate. Below is the file which I will be renaming. Step 1: Get the file properties We only need to have the SharePoint item id, for which we want to rename the file Step 2: Update the File Name Add the "Send an HTTP request to SharePoint" connector, and update the following properties Method : POST Uri : _api/web/lists/GetByTitle(' <LIBRARY TITLE> ')/items( <ITEM ID> )/ValidateUpdateListItem Body: {     "formValues" :[         {             "FieldName" : "FileLeafRef" ,             "FieldValue" : "<New File Name>"         }     ] } Execute the flow, and the file will be renamed Happy Automating..!! #PowerAutomate #SharePointWidgets #Microsoft
Read more