We want to change the height of thumbnails in OMERO.iviewer

As you can see on our CHAMBER website (http://chamber.mrc.ox.ac.uk/iviewer/?images=120&dataset=51), the thumbnails are squares of 80 x 80 pixels with a lot of black spaces.

We tried the CSS hack as below:

.thumbnail-wrapper {
    display: inline-block;
    background: #000000;
    width: 80px;
    height: 40px;
    margin: 0px;

And it looked nice at the first glance, but later it turned out that with this CSS hack, not all of the thumbnails are loaded when loading a page. So we undid the change.

It appears that the page’s algorithm calculates the number of thumbnails to load depending on the height information.

Is there a CSS hack to avoid this problem and show all of them with the 40 px height?

Or does it has to be taken care of at OMERO.iviewer side?


Hi Kouichi,

There’s no way to hack a 40px height in css I’m afraid, without breaking the thumbnail loading.
In fact, I noticed that your setting of:

.thumbnail_wrapper {
    margin: 0px

is already causing a bug with the failure to load the last 3 thumbnails.
See http://chamber.mrc.ox.ac.uk/iviewer/?images=129 (missing last 3 thumbnails) vv http://chamber.mrc.ox.ac.uk/iviewer/?images=130 (they are loaded).

I’m afraid that the current layout doesn’t try to respond to images of different shapes (e.g. square or portrait), so it gives a square space for each thumbnail to make the loading calculation easier.

The best fix I could do with css alone was to make the thumbnails a bit bigger to fill the gaps:
e.g (removing the margin 0px from above and making the .thumbnail-scroll-panel {background:black}, this:

thumbnail-slider img {
    /* max-width: 80px; */
    height: 60px;
    position: relative;
    left: -33px;

gives you: [sorry, screenshot upload didn’t seem to work]

You can play with the numbers to your liking, but I hope that’s an improvement?



1 Like