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



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

Comments

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

    ReplyDelete
    Replies
    1. 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. 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. 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. 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. 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. Hi Sumit Kanchan how do i know what cdnBasePath to make use of

    ReplyDelete
    Replies
    1. 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. Thank you Sumit,

      how soon may it take for the new version be available

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

      Delete
    4. 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
  5. Hello this looks awesome. Is there anyway you may be able to provide a .sppkg? Thank you!

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

      Delete
  6. 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

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

Power Automate: Rename file in SharePoint Online