Changing thumbnail sizes in files list


#1

When using the file browser in OwnCloud 10, the thumbnails are fixed at 32x32px. In the “full” interface you can use the preview to get a bigger image, but when using a shared link you can only see the thumbnail.

I’d like to make the thumbnails bigger (maybe 64x64px) across the board. There doesn’t appear to be a simple way to do this.

If I add ‘table td.filename .thumbnail’ from the files css to my own theme then I can change the size of the thumbnail display area, but then it just appears tiled. So it looks like there’s a chance I can achieve what I want with CSS, but I can’t find a guide to do this.

Any clues, anyone?

Cheers,

Martin.


#2

Well, in case this is of use to others, I’ve sat chewing through the CSS files, and I’ve put a load of entries into my own theme. So far I have:

/* Use label to have bigger clickable size for checkbox */
#fileList tr td.filename > .selectCheckBox + label,
.select-all + label {
background-position: 30px 30px;
height: 82px;
position: absolute;
width: 82px;
z-index: 5;
}
#app-content-files.has-favorites #fileList td.filename a.name,
#app-content-sharingin.has-favorites #fileList td.filename a.name,
#app-content-sharingout.has-favorites #fileList td.filename a.name {
display: flex;
justify-content: space-between;
left: 82px;
margin-right: 50px;
}

table td.filename a.name {
position: relative;
/* Firefox needs to explicitly have this default set … */
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 82px;
line-height: 82px;
padding: 0;
}

table td.filename .thumbnail {
display: inline-block;
width: 64px;
height: 64px;
margin-left: 8px;
margin-top: 9px;
cursor: pointer;
float: left;
position: absolute;
z-index: 4;
}

/table td.filename input.filename {
width: 70%;
margin-top: 9px;
margin-left: 48px;
cursor: text;
}
/

table td.filename .nametext {
position: absolute;
left: 87px;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
max-width: 800px;
height: 100%;
}

.has-favorites #headerName-container {
padding-left: 82px;
}

Also, the apps/files/js/filelist.js file needs modified to change the thumbnail display size (all the CSS changes will make the display area bigger, but the thumbnail will tile).

At this point I still have a few items out of alignment, and the thumbnails are still low-res.


#3

There are some additional settings to increase the image size that fall outside of the CSS:

  • apps/files/js/filelist.js - background-size
  • apps/files/templates/list.php - data-preview-x, data-preview-y
  • apps/files_sharing/ajax/publicpreview.php - $maxX, $maxY
  • apps/files_sharing/js/public.js - urlSpec.x, urlSpec.y

You’ll likely need to delete the thumbnails folder to force OwnCloud to update them to the new size.

It’s turned out that this isn’t going to work for our use-case, so I’m going to abandon it. Hopefully these details will help anyone else needing to increase the size of the thumbnails for whatever reason, though. That’ll get the images larger, leaving you with “just” the task of lining everything up on the page.

Martin.