react-image-gallery -

[mkyledoyle]

Disclaimer

Yes

Sample

react-image-gallery

Contributor(s)

@arigunawan @ejazhussain

Question

I love the image gallery and the way it displays images. I may have missed this in the documentation. Is there a way to add captions to images or display the filename or alttext?

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[ejazhussain]

Hi @mkyledoyle ,

Currently, the captions are being displayed with the images. You can modify the following code snippet in the ImageGallery.tsx file to add additional image metadata.

I hope this helps. Let me know if any more questions. Happy to help

[mkyledoyle]

Thank you for your help! I hate to be such a neophyte at this. do I need to download the code repository, find the file, make the changes, and then build custom package? If so would you mind giving me a little guidance on how to do that?

Thank you in advance for your help.

[ejazhussain]

See below steps

• Clone this repository (or download this solution as a .ZIP file then unzip it)

• From your command line, change your current directory to the directory containing this sample (react-image-gallery, located under samples)

• in the command line run:

  • npm install
  • gulp serve

• Make changes as you required in ImageGallery.tsx file

• To build the solution

     gulp build --ship

• To bundle the solution

     gulp bundle --ship

• To package the solution

     gulp package-solution --ship

• Deploy to app catalog

I hope this helpful

[mkyledoyle]

This is very helpful for sure. Unfortunately I don't have the expertise on how to Build, Bundle, and Package.

Can you help with that? Deploying the package once that is done shouldn't be an issue for me.

Thank you again in advance for your help.

On Mon, Sep 11, 2023 at 9:07 AM Ejaz Hussain @.***> wrote:

See below steps

• Clone this repository (or download this solution as a .ZIP file https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-gallery then unzip it)
• From your command line, change your current directory to the directory containing this sample (react-image-gallery, located under samples)
• in the command line run:
  • npm install
  • gulp serve
• Make changes as you required in ImageGallery.tsx file
• Build, Bundle and Package the solutions again
• Deploy to app catalog

I hope this helpful

— Reply to this email directly, view it on GitHub https://github.com/pnp/sp-dev-fx-webparts/issues/4023#issuecomment-1713844812, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBALV3EU3WFWBVKXJX42OLXZ4EI3ANCNFSM6AAAAAA4Q3QPKM . You are receiving this because you were mentioned.Message ID: @.***>

-- Kyle

[ejazhussain]

I have updated my previous response with commands to build, bundle and package solution.

I hope this helps

[mkyledoyle]

Thank you. I have one more question I think. Would you give me details on what each of the variables in

refers to and what the correct usage would be?

I take it that in the original sample none of the captions are on because in my environment there aren't any.

Thank you.

[mkyledoyle]

I apologize for another question. I downloaded the zip package and it does not contain a file called "ImageGallery.tsx". I also searched for the file in GitHub and it isn't there either.

[mkyledoyle]

Good day. I do appreciate your help with this. Would you be able do help me on my last two questions?

[ejazhussain]

Hi @mkyledoyle

See the below link for ImageGallery.tsx file

https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-image-gallery/src/webparts/imageGallery/components/ImageGallery.tsx

The original sample uses the Image Gallery list Title field as an image caption.

I hope this helpful

[mkyledoyle]

I think 6 of one and half a dozen of the other to be honest.

Love Kyle

On Fri, Sep 15, 2023 at 9:11 AM Ejaz Hussain @.***> wrote:

Hi @mkyledoyle https://github.com/mkyledoyle

See the below link for ImageGallery.tsx file

https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-image-gallery/src/webparts/imageGallery/components/ImageGallery.tsx

The original sample uses the Image Gallery list Title field as an image caption.

I hope this helpful

— Reply to this email directly, view it on GitHub https://github.com/pnp/sp-dev-fx-webparts/issues/4023#issuecomment-1721259450, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBALVYR2ARLNR2O4A2UBWLX2RHWRANCNFSM6AAAAAA4Q3QPKM . You are receiving this because you were mentioned.Message ID: @.***>

-- Kyle

[mkyledoyle]

I apologize for my previous email. That was meant for someone else.

Why is it when I download the zip file the ImageGallery.tsx file doesn't exist? I clearly can see it in github.

It seems the folder structure is different in the 1.0 version I originally downloaded and the "Master" version.

Kyle

On Fri, Sep 15, 2023 at 9:11 AM Ejaz Hussain @.***> wrote:

Hi @mkyledoyle https://github.com/mkyledoyle

See the below link for ImageGallery.tsx file

https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-image-gallery/src/webparts/imageGallery/components/ImageGallery.tsx

The original sample uses the Image Gallery list Title field as an image caption.

I hope this helpful

— Reply to this email directly, view it on GitHub https://github.com/pnp/sp-dev-fx-webparts/issues/4023#issuecomment-1721259450, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBALVYR2ARLNR2O4A2UBWLX2RHWRANCNFSM6AAAAAA4Q3QPKM . You are receiving this because you were mentioned.Message ID: @.***>

-- Kyle

[mkyledoyle]

I am wondering if I can get an answer to my previous question:

Why is it that when I download the zip file the ImageGallery.tsx file doesn't exist? I can clearly see it in github.

It seems the folder structure is different in the 1.0 version I originally downloaded and the "Master" version that is shown online.

On Fri, Sep 22, 2023 at 8:45 AM Kyle Doyle @.***> wrote:

I apologize for my previous email. That was meant for someone else.

Why is it when I download the zip file the ImageGallery.tsx file doesn't exist? I clearly can see it in github.

It seems the folder structure is different in the 1.0 version I originally downloaded and the "Master" version.

Kyle

On Fri, Sep 15, 2023 at 9:11 AM Ejaz Hussain @.***> wrote:

Hi @mkyledoyle https://github.com/mkyledoyle

See the below link for ImageGallery.tsx file

https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-image-gallery/src/webparts/imageGallery/components/ImageGallery.tsx

The original sample uses the Image Gallery list Title field as an image caption.

I hope this helpful

— Reply to this email directly, view it on GitHub https://github.com/pnp/sp-dev-fx-webparts/issues/4023#issuecomment-1721259450, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBALVYR2ARLNR2O4A2UBWLX2RHWRANCNFSM6AAAAAA4Q3QPKM . You are receiving this because you were mentioned.Message ID: @.***>

-- Kyle

-- Kyle

[ejazhussain]

I am not sure why it's not being downloaded for you. Have you tried cloning this repo again?

[bcameron1231]

I downloaded the zip linked above, and can see the the component file in it.

[mkyledoyle]

Thank you! I was able to get it downloaded with the ImageGallery.tsx file. I am not that familiar with GitHub so I am sure it was an error on my part.

In this section:

{item.Title}

What is it in the above section that determines the caption that will show up in the gallery and what attribute in the image is it using? Is it the filename or some other piece of the metadata? On Sun, Oct 22, 2023 at 2:57 PM Beau Cameron ***@***.***> wrote: > I downloaded the zip linked above, and can see the the component file in > it. > > [image: image] > > > — > Reply to this email directly, view it on GitHub > , > or unsubscribe > > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> > -- Kyle

[ejazhussain]

As listed in the minimum path to awesome steps - You need to populate the Title column of the image library with a caption of the image. The title column is being used for both searching and displaying image captions.

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-image-gallery#minimal-path-to-awesome

[github-actions[bot]]

This issue has been marked as stale due to no progress in over 90 days. If you are still experiencing this issue, please provide additional information so we can help you resolve it.

[github-actions[bot]]

Closing this issue due to lack of activity. If you are still encountering this issue, please do not hesitate to open a new issue. Make sure to follow the guidance on how to create good issues to increase your chances of getting the help you deserve.