Preview tab tile view with imagesOnly: true

Hello, I was checking out the source of the Preview tab to see how the sorting is handled. There is mention of an imagesOnly config option that if true would apply a uploadcare--files_type_tiles class or uploadcare--files_type_table otherwise.

I am dealing with large sets of images so a kind of grid view would be more convenient. However, uploadcare--files_type_tiles doesn’t seem to be defined and the axis = 'xy' also doesn’t seem to have an effect. Is or was that the intent of this class? Could someone shed some light on this? Thank you!

Hi @owenhoskins,

The uploadcare--files_type_tiles doesn’t change the appearance of the preview tab, but it enables sorting files in the tab along both axes. With some CSS, you can make the preview tab look like a grid.

.uploadcare--file__name,
.uploadcare--file__remove,
.uploadcare--file__size,
.uploadcare--file__progressbar {
  display: none;
}

.uploadcare--files {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.uploadcare--file {
  padding: .5rem;
}

.uploadcare--file__error {
  font-size: 10px;
}

.uploadcare--file__description {
  padding: 0;
}

Check out a live example here.

1 Like

Thank you, that works like a charm!

1 Like