MurhafSousli / ngx-gallery

Angular Gallery, Carousel and Lightbox
https://ngx-gallery.netlify.app/
MIT License
609 stars 129 forks source link

fix: galleryItemDef directive should override gallery-item content #579

Closed cybercyst closed 1 year ago

cybercyst commented 1 year ago

After many frustrating attempts to try and follow the example code for *galleryItemDef I noticed that the boolean logic seemed to not work as the demo code indicated it would.

With the logic laid out this way, *galleryItemDef will override whatever the gallery-item's default template would do.

MurhafSousli commented 1 year ago

Can you explain the issue! what were you trying to do and what did not work as expected?

cybercyst commented 1 year ago

Of course!

I was following the tutorial code here https://ngx-gallery.netlify.app/#/custom-templates for GalleryItemDef and it didn't do anything.

I was trying to replace the entire template for a given item in the gallery, which is what that demo code indicates that the *galleryItemDef directive is for.

Looking at the code, it would never replace the content of the item template when it is part of the ngSwitch and would always use the gallery item's default templates, and only if the gallery item's type was not known would it use the *galleryItemDef you've defined. (which is not easy to do due to the typing which states that the GalleryItem's type will be one of 4 well-known types)

I hope that helps!

Basically, I wanted to replace the template used with my custom defined template.

MurhafSousli commented 1 year ago

@cybercyst Whoops! I didn't pay attention to the docs, actually you can override the whole item template, you just need to add the items using different function or interface where you can set the type name.

galleryRef.add({
  type: 'my-custom-item',
  data: {
    src: 'IMAGE_SRC_URL',
    thumb: 'IMAGE_THUMBNAIL_URL'
    alt: 'Test'
  }
})

// or using items array
const items: GalleryItem[] = [
  {
     type: 'custom-item'
     data: {
       src: 'IMAGE_SRC_URL',
       thumb: 'IMAGE_THUMBNAIL_URL'
     }
  }
  // more items
];

I either have to fix the docs, or apply this fix... give me some time to revise the usage, meanwhile you can use this as a workaround

MurhafSousli commented 1 year ago

The idea was, give the ability for users to have their own custom template, along with the other available types, for example a user wants to use his own video item template but keeps using the original image template for images.

cybercyst commented 1 year ago

Ahhh I understand now, I thought it was there to give you a way to override the whole template for a gallery item!

cybercyst commented 1 year ago

@MurhafSousli thanks for your time and attention! Would you like me to close this PR then?

MurhafSousli commented 1 year ago

@cybercyst Yes, thanks for the attempt to contribute!