SharePoint Image Gallery

Hi Friends, We are in very much need of an image gallery to showcase our site. Of-course we have it OOB in SharePoint online from Microsoft, but the functionality that is missing in it the ability to add the redirect link.

https://www.sharepointwidgets.com/


So, here I comes with the functionality to create redirect links and lot of more options.

Update: Now there are three options to the layouts

  • Grid
  • Carousel
  • List


Features:

  • Responsive
  • Select the Image library to display from
  • Can create Redirect links on image click (Need to have Redirect <single line of text> column).
  • Choose to create a link or not
  • Choose the number of images to display in a row
  • Choose the total number of images to be displayed
  • Auto-rotate option in the Carousel mode
  • Read More option in the List view mode

Carousel - With Autorotate 
SharePoint Online Carousel Client side webpart using SharePoint Framework and React

SharePoint Online Carousel Client side webpart using SharePoint Framework and React

Grid View
SharePoint Online Image Gallery Client side webpart using SharePoint Framework and React

SharePoint Online Image Gallery Client side webpart using SharePoint Framework and React

List View
SharePoint Online Image Gallery Client side webpart using SharePoint Framework and React

SharePoint Online Image Gallery Client side webpart using SharePoint Framework and React


Deployment

For deployment follow the below steps
  • Clone the repository
  • Open the code in Visual Code or in any other IDE
  • Change the 'cdnBasePath' url inside the Config/write-manifest.json
  • Create the package
    • Run the following commands
    • gulp
    • gulp bundle --ship
    • gulp package-solution --ship
    • Now upload the weather .sppkg file from SharePoint/solution folder
    • Upload the files inside temp/deploy to the cdnBasePath url
  • Now add the webpart to the page

Configuration

To configure the webpart please follow the below steps
  1. Create a picture library
  2. Create a column “Enable” of type “Yes/No”
  3. Create a column ‘Redirect Link’ of type “Single line of text”
  4. Add webpart to the page and select the library.

Easy and not much of the configuration required.

You can try and get the source from here : SharePoint Online Image Gallery By Sumit Kanchan

Try and let me know your comments in the below section

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

Post a Comment

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Checking user permission in SharePoint Framework (SPFx) webpart