SOLVED

Need Recommendations for an enhanced Image Gallery web part

%3CLINGO-SUB%20id%3D%22lingo-sub-2083037%22%20slang%3D%22en-US%22%3ENeed%20Recommendations%20for%20an%20enhanced%20Image%20Gallery%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2083037%22%20slang%3D%22en-US%22%3E%3CP%3EBackground%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOur%20art%20person%20had%20a%20image%20gallery%20that%20was%20implemented%20in%20Flash%20that%20plugged%20into%20on-prem%20SharePoint%20pretty%20well%20because%20that%20would%20accept%20HTML%20files%20and%20just%20render%20them.%20The%20image%20gallery%20would%20show%20details%20of%20the%20art%20pictures%20like%20the%20author%20and%20a%20description%20when%20clicking%20on%20it.%20Fast%20forward%20to%20today%20and%20Flash%20is%20dead.%20The%20gallery%20is%20essentially%20dead%20now%20and%20we%20have%20all%20the%20assets%20(images%2C%20XML%20configurations%2C%20etc)%20and%20need%20to%20implement%20something%20similar%20in%20SharePoint%20Online.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20could%20use%20some%20recommendations%20for%20any%20third-party%20or%20open%20source%20SharePoint%20Online%20webparts%20that%20create%20an%20image%20gallery%20by%20pointing%20the%20webpart%20at%20a%20document%20library%20or%20folder%20that%20will%20show%20additional%20column%20details%20(like%20Artist%2C%20Description)%20with%20the%20image.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2083037%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EImage%20Gallery%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2083354%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20Recommendations%20for%20an%20enhanced%20Image%20Gallery%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2083354%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F228093%22%20target%3D%22_blank%22%3E%40Timothy%20Balk%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20is%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fsupport.microsoft.com%2Fen-us%2Foffice%2Fuse-the-image-gallery-web-part-bbcbe560-14a7-4369-8ef5-3255845e3bfd%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EImage%20Gallery%20web%20part%3C%2FA%3E%26nbsp%3Bin%20SharePoint%20online%2C%20but%20it%20might%20not%20help%20you%20with%20all%20your%20requirements.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheck%20this%20free%20SPFx%20web%20parts%20developed%20by%20community%20members%20which%20might%20help%20you%20to%20get%20started%20with%20developing%20the%20web%20part%20which%20will%20satisfy%20your%20requirements%3A%3C%2FP%3E%3COL%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-image-gallery%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EFilterable%20Image%20Gallery%3C%2FA%3E%26nbsp%3B%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-adaptive-cards-image-gallery%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EImage%20Gallery%20Built%20with%20Adaptive%20Cards%3C%2FA%3E%26nbsp%3B%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-image-slider-list-taxonomy-filter%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EImage%20Slider%20from%20Photo%20Gallery%20using%20Taxonomy%20Filter%3C%2FA%3E%26nbsp%3B%3C%2FLI%3E%3C%2FOL%3E%3CP%3EOr%203rd%20party%20web%20part%20if%20it%20helps%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fnodevision.com.au%2Fimage-gallery%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Enodevision%20-%20image-gallery%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%20%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2083633%22%20slang%3D%22en-US%22%3ERe%3A%20Need%20Recommendations%20for%20an%20enhanced%20Image%20Gallery%20web%20part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2083633%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Timothy%20(%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F228093%22%20target%3D%22_blank%22%3E%40Timothy%20Balk%3C%2FA%3E)%20%2C%20I%20don't%20think%20you%20need%20to%20look%20at%20any%203rd%20party%20solution%20and%20there%20isn't%20a%20web%20part%20that%20will%20do%20what%20you%20want%20unless%20you%20use%20SPFx%20(which%20is%20not%20allowed%20for%20use%20at%20our%20company%20and%20might%20not%20be%20at%20yours).%20But%20there%20%3CU%3Eis%3C%2FU%3E%20JSON%20list%20view%20formatting%20which%20will%20do%20the%20job%20nicely%20and%20one%20example%20I%20did%20is%20shown%20below.%3CBR%20%2F%3E%3CBR%20%2F%3EFor%20an%20example%20have%20a%20look%20at%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Ftile-layout-example-with-image%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%2Ftile-layout-example-with-image%3C%2FA%3E%26nbsp%3Band%20a%20list%20of%20examples%20is%20at%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fview-samples%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22bbs.png%22%20style%3D%22width%3A%20638px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F248148iD28573D687E72319%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22bbs.png%22%20alt%3D%22bbs.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23006400%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

Background:

 

Our art person had a image gallery that was implemented in Flash that plugged into on-prem SharePoint pretty well because that would accept HTML files and just render them. The image gallery would show details of the art pictures like the author and a description when clicking on it. Fast forward to today and Flash is dead. The gallery is essentially dead now and we have all the assets (images, XML configurations, etc) and need to implement something similar in SharePoint Online.

 

I could use some recommendations for any third-party or open source SharePoint Online webparts that create an image gallery by pointing the webpart at a document library or folder that will show additional column details (like Artist, Description) with the image.

 

Thanks!

3 Replies

@Timothy Balk 

 

There is Image Gallery web part in SharePoint online, but it might not help you with all your requirements.

 

Check this free SPFx web parts developed by community members which might help you to get started with developing the web part which will satisfy your requirements:

  1. Filterable Image Gallery 
  2. Image Gallery Built with Adaptive Cards 
  3. Image Slider from Photo Gallery using Taxonomy Filter 

Or 3rd party web part if it helps: nodevision - image-gallery 


Please click Mark as Best Response if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

best response confirmed by Timothy Balk (Regular Contributor)
Solution

Hi Timothy (@Timothy Balk) , I don't think you need to look at any 3rd party solution and there isn't a web part that will do what you want unless you use SPFx (which is not allowed for use at our company and might not be at yours). But there is JSON list view formatting which will do the job nicely and one example I did is shown below.

For an example have a look at https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples/tile-layout-example-with-imag... and a list of examples is at https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples

 

bbs.png

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

@RobElliott @ganeshsanap 

 

Thanks for the suggestions! I forget that the PnP has more than just PowerShell scripts in it. I appreciate the suggestions and will do my best to start exploring the PnP space for ideas when I encounter things like this in the future.

 

I think for this - the JSON list view formatting will be the quickest to implement this. Similar to the screen in @RobElliott 's post, I can set a thumbnail image with the details of the Artist and Description off to the side and include a link to view a larger image of the piece of art.

If the gallery owners are not satisfied with that... well, that solution will float me until I could use/modify the PnP image gallery web parts or I could create a PowerApp for the gallery. I found this playlist showing how to implement something that would work for this as well.

 

PowerApps Art Project - YouTube

 

Again, Thank you!!!