Connect URL to individual image

[tobi-or-not-tobi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x ] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

Great library, with great support for extensibility! Everything works OK.

Expected behavior

I would however like to open an image based on the URL. I used to do this with the imagePointer input, but this has changed a lot. I'm unsure if it is still feasible to open an image from the image set.

What I like to do:

• show a list of thumbnails
• click on a thumbnail, which navigates to a route with the image ID
• catch the image ID from the route params, and select the image from the images
• open the correct image based on the image ID

Minimal reproduction of the problem with instructions

n/a

My official live example on StackBlitz (based on https://stackblitz.com/edit/angular-modal-gallery-v5) is:
n/a

What is the motivation / use case for changing the behavior?

Use this awesome library to allow for:

• search indexing and SEO
• (social) sharing (i.e. facebook) of individual images with direct access to the full related image library

Environment (the most important section to fill very carefully)

- Node version: 9.5.0
- npm version: 5.6.0
- Operating System and version:  Mac
- Angular version:  1.7.3
- angular-cli version (or SystemJS/Webpack): webpack: 3.11.0
- I'm using Server Side Rendering with angular-universal: NO(t yet)
- I'm compiling with mode: PROD with AOT

Browser:
n/a

[Ks89]

Hi, thank u.

What you are asking is something really application specific.
This library is built to provide a plain gallery with clickable previews to open the modal gallery.
So I think that it's wrong to add this behaviour, because it's not general purpose.

However, your idea as an interesting point. Let me explain it a little bit.

The first 3 points are really specific and you can achieve that using the image array of Image object and iterating using ngFor (no plain gallery or something else, only pure Angular). The only thing that you should use from this library is the Image object, because it's well structured to handle previews, descriptions and so on.
When you click on a thumb (with a click event or routerlink), you can trigger the navigation and catch the id. All of this is purely application specific and you can achieve this without anything of this library :).

However, to open the gallery with a specific id, you need the Image element (so if you use my Image object is better) and.... something that I don't have right now. For instance, a service (KsModalGalleryService) with a method to open the gallery passing an image object. In this way you'll be able to do this.

Unfortunately, at the moment I don't have this service ready, I still have a partial implementation on a private local branch with many bugs (It's not so simple to implement it). I'll add it for sure in next 5.x.x releases, because required also to close this issue: #127 .

So, I'm sorry but I cannot provide you an easy and quick solution, but I ask you to wait the release of this service. I hope to release it in April (probably before, but only as alpha/beta) as stable.

PS: if you think that it's ok, I suggest to close this issue, since there is #127 with a more sophisticated use-case that also include the Modal Gallery Service.

I promise that I'll try to release it ASAP. :)

[tobi-or-not-tobi]

Hi,
thanks for the prompt and clear reply. I totally agree that most of this is app specific, and I'd like angular-modal-gallery to stay focussed on beging a generic library.
As said, I've used your library last year using <modal-gallery [imagePointer]="theImageIndex">. I indeed only used it to use the modal, and I was able to pass the index of the image to the imagePointer input.

I was looking a bit more into code and examples, and I came across the AdvancedLayout that holds a modalOpenerByIndex parameter. I've tried experiment with it, i.e. by using number 1. I would expect to get the first picture to be opened by default, but it fails by saying: "Cannot read property '1' of undefined". I took care of the required model lifecycle and only used the ks-modal-gallery once the image array was build.

If you have any additional input on how to use the AdvanedLayout, I might find a way out before the new release is coming. As I like to upgrade the app before April timelines, it would be nice to get it working.

I'm anyways happy to observe #127 and work from there.

My idea to implement this in the library would be:

• support an event/hook that is triggered when you click on an image (perhaps you have this already) and omit to open the modal. This I would use to navigate to the correct route
• support an active Image Index input, that would open the modal at a given position (very similar to when you click on an image). This index (or image ID) would be set based on a route param.

With that, I could both use the layout capabilities of the library as well as the modal.

[Ks89]

modalOpenerByIndex is used only for specific use case related to plain gallery with advancedLayout. You cannot use it without a plain gallery. It's very limited to that particular scenario.

The only way to open modal image without plain gallery is to build a dedicate injectable service to trigger the modal gallery to open itself to a specific index.

For more info about advancedlayout I suggest to look official examples inside this repo.

[tobi-or-not-tobi]

I've been evaluating #1237 and I'm afraid it's not going to provide what I need. I believe I'd need the following inputs on the ks-modal-gallery component:

1. An active-modal-image that would open the given image in the modal. I would use this input to open modals based on URLs (once the URL would be loaded, i'd evaluate the URL, filter the image ID/index and feed it to this input). Ideally the input would be ignored when the current image is already opened in the modal.
2. An output event that can be used to change the URL on each and every main image change (either from a button click or when the initial modal is opened.

I believe you have everything in place to make this possible, its more a matter of what you'd expose.

The way I believe this will solve my use case is:

• when an image is opened, I'll navigate to a custom URL. I need the event (2), the rest is custom application logic
• when a URL is loaded, I'll use the URL to get the active image (ID or index) and provide that to the component input (1). This is all application logic specific, except for the input.

[Ks89]

I need the event (2), the rest is custom application logic

Exactly. Events are already available as @Output()..., for instance with (show), and others available in documentation website, also with an example.

when a URL is loaded, I'll use the URL to get the active image (ID or index) and provide that to the component input (1). This is all application logic specific, except for the input.

provide that to the component input (1): NO. As already discussed, this is not possibile, or at least, in a reliable way. The only way to do that in a 'simple' and reliable way is to use a service. I want to use the '...' because, it's simple from the user's point of view, but as developer it's quite difficult. I already have an experimental implementation, but I have some problems about performances, in particular navigating to another image by index when modal gallery is currently opened.
However I'll work on on that, this month.

So to achieve this, you have to wait for #127

[Ks89]

PS: If you want to test the service, I'll release public alpha/betas. Next week will be full fot me and so It will be very difficult to work on it. I want to release the first experimental release about 15 of April.

[Ks89]

update: I'll release a beta version of gallery.service in a couple of days.

[Ks89]

Good news man @tobi-or-not-tobi

Finally after many commits it's time for the first beta release of gallery service.
https://github.com/Ks89/angular-modal-gallery/releases

To try the beta: npm i --save angular-modal-gallery@beta

I'm still working on the new doc, so if you want to try please check to the official examples in this repo (folder /examples).

Try to click on the new button at the beginning of the page in my examples to open images (specifying the id and the index of the image).

PS: you must add an id to your modal-gallery as shown in my examples.

Doc is coming soon.

[Ks89]

5.6.0 with gallery.service officially released.

Feel free to re-open if you have problems.

[Farooq-ThinkDigital]

Images are scarred and not clear.
@ks89/angular-modal-gallery

<ks-modal-gallery [id]="5" [modalImages]="Images"

                [plainGalleryConfig]="plainGalleryGrid"
                [buttonsConfig]="buttonsConfigFull"
                (buttonBeforeHook)="onButtonBeforeHook($event)"></ks-modal-gallery>

[Ks89]

Are you using Image class in the right way? So modal for modal images and plain for thumbs (with obviously smaller images)

[MohammedFarooqS]

1-Image are not clear (how to use fixed aspect full image )
2-i want to add margin down , margin top:

plainGalleryGrid: PlainGalleryConfig = {
strategy: PlainGalleryStrategy.GRID,
layout: new GridLayout({ width: '180px', height: '180px' }, { length: 4, wrap: true}) }

[Ks89]

You can use custom galleries to draw images with your custom css.
In version 7 of the library I added default margins top and bottom, but It's still in beta. I'll release the final version about at 15 of November.

What do you mean with how to use fixed aspect full image?

[MohammedFarooqS]

consider you profile image: its clear and center , modal gallery am not getting image ,its not center , neither its clear,

[MohammedFarooqS]

images are going flat

[Ks89]

please could you post a screenshot and the original image that you are using?

[MohammedFarooqS]

[Ks89]

In this case I suggest to use custom layout and add to images 'cover' as object-fit or as background. If you have specific requirements it's better to create the gallery with custom layout.

However I'll schedule to check gridlayout in next releases to try to add object-fit: 'cover' as default, preventing that behaviour.

[MohammedFarooqS]

ok, will try , thank u Stefano Cappa. Can I get an example of it.

[Ks89]

This is an example https://ks89.github.io/angular-modal-gallery-2018-v6.github.io/demo/plain-custom-desc

[MohammedFarooqS]

Any Idea , how can I add + button at first continue with other images.

[Ks89]

I don't understand where you want to add it. Please could you share a sketch with the right positioning?

[MohammedFarooqS]

[Ks89]

I'm sorry for the delay, I completely forgot to answer :(.

What are you trying to do requires custom layout for sure. It's not possible to do this thing automatically, but it requires a custom implementation via pure css/html using custom layout.

I suggest to take a look to the main example inside the repo here:

angular-modal-gallery/apps/main/src/app/app.component.html

Line 74 in ef6d5c1

<h3>Z5 - (id=7) - full custom plain gallery (column) with image pointer</h3>

The same example should be also on stackblitz.

As you can see I'm creating a gallery with custom + button and custom layout. You are free to do whatever you want, but for this kind of custom layouts, you need to write some css/html.

[MohammedFarooqS]

hi Stefano Cappa, thank you for replying.
Trouble with margin:5px

Argument of type '{ width: string; height: string; margin: string; }' is not assignable to parameter of type 'Size'.
Object literal may only specify known properties, and 'margin' does not exist in type 'Size'.

[Ks89]

Yes because margin in not part of the size interface.

Can you post the full code? Because I don't undestand where you are using the size interface

[MohammedFarooqS]

plainGalleryGrid: PlainGalleryConfig = {
strategy: PlainGalleryStrategy.GRID,
layout: new GridLayout({ width: '200px', height: '200px' }, { length: 4, wrap: true })}

+

kindly give flexibility to change style. I need to add margin, flex-shrink: 0, etc

[MohammedFarooqS]

+

[Ks89]

As already explained above you have to use custom layout, not grid layout. To do custom things the only reasonable way is to write your css and you html and I give this possibility with the custom layout.