Square thumbnails

[Alados]

Is this possible to have square thumbnails independent of real image size?

[Ks89]

Hi. Please could you add a screenshot/sketch with a demo? Or more info because I don't understand your question, sorry xd

[Ks89]

@Alados ah ok wait. I read again your question.
Are you asking a way to show thumbs all with a fixed user specified size?
Yes, I'm doing this in all my examples and documentation.

You should add/customize this to your project's css:

.more {
  position: absolute;
  /* margin: 0px; */
  /* top: 0px; */
  margin-top: 2px;
  /* word-break: break-word; */
  background: rgba(0, 0, 0, 0.7);
  height: 50px;
  width: 50px;
  padding-left: 0px;
  padding-top: 2px;
  padding-top: 2px;
  text-align: center;
}

.list-img {
  height: 50px;
  margin-top: 2px;
  cursor: pointer;
}

.float-left {
  float: left;
  margin-right: 5px;
  color: #ffffff;
}

.float-left a:hover {
  color: red;
  cursor: pointer;
}

However, I suggest to watch these example projects HERE

[Alados]

@Ks89 I need that in thumb showing center of image, independent at real size of image. If they 1000x500 or 500x1000 we must show center and they must be equal size. I attached screenshot.

[Ks89]

Ah ok.

You cannot add photos without your custom logic that changes the input array of images, but you can change css.

Check this example: https://github.com/Ks89/angular-modal-gallery/tree/master/demo/webpack
in particular this file: https://github.com/Ks89/angular-modal-gallery/blob/master/demo/webpack/src/app/pages/home/home.scss

This is a good question. I'm thinking about angular-modal-gallery 4.0.0 and I will add more features to customize style and layout with some custom templates.
Also, "add photos" is a good candidate.
However, I'm still thinking about features without implementing anything, so any suggestion is well accepted opening a dedicated issue.

[Alados]

@Ks89 Thanks, but I'm trying to say that I want to add a centercrop for thumbnails image. In your code, in thumbnails was top-left part of image, not a center.

[Ks89]

Ah ok.
I don't know how to do this, but this is a css problem not a real problem with this library.
I suggest to search on the web or stackoverflow.com how to do that via css3.

If you find something and you want to share it here, I will be really happy to try to add it to future versions of this library.

[Alados]

@Ks89 I know how this may be implemented. Need change tag "img" to "a". For all "a" must be set . May be you can add this and hide by bool variable? That another users can use library by old.

[Ks89]

I'm sorry, but what does it mean: "For all "a" must be set ." Set what?

[Alados]

Sorry, there must be code. For all "a" must be set this css code <a style="background: url('path to image') 50% 50%/cover">.

[Ks89]

Mm ok.
But I cannot promise a quick implementation. Probably it is better to schedule this feature for the next major release (4.0.0). Because I'm scared to introduce breaking changes. Other than the library itself, I also try to think about testing (unit and e2e) created by users of angular-modal-gallery.

I don't want to break features/unit testing/e2e testing.

What do you think? Is it acceptable?

[Ks89]

Implemented in angular-modal-gallery 5.0.0 (still in alpha).

The stable release will be available probably in February.

However, I'll release this feature with angular-modal-gallery 5.0.0-alpha.4 scheduled for the end of December 2017.

Issue closed. For news/updates or to talk about bugs related to this feature, please refer to the general issue for 5.0.0 here: #80