Image size

[chen1223]

Hi, first of all thank you for all the hard work. The code looks amazing. Just have a quick question would like to ask. For the plugin to work, do we need to prepare different dimensions of images or can we send images all with the same dimensions from the backend and have the waterfall plugin resize for us?

Thanks in advance

[mystist]

@chen1223 No need. Backend can simply returns images of same size. But we need to set a width of each pin via css, and also for responsive case:

.waterfall {
  .list-group {
    margin-right: 14px;

    > li:first-child {
      padding: 0;
      background-color: white;

      img {
        width: 100%;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
      }
    }

    > li {
      background-color: #f5f5f5;
    }
  }
}

@media (min-width: 768px) {
  .waterfall {
    .list-group {
      width: 346px;
    }
  }
}
@media (min-width: 992px) {
  .waterfall {
    .list-group {
      width: 299px;
    }
  }
}
@media (min-width: 1200px) {
  .waterfall {
    .list-group {
      width: 271px;
    }
  }
}