Increasing size of thumbnails

[Michael Bozza]

Hello,

I was asked to increase the size of the thumbnails that are available on the side panel.

Is there a simple way to do this without throwing the whole side panel out of whack?

Thank you.

[Anatoly Kudrevatukh]

Hello Michael,

1) In ReaderControl.js `receivedThumb` function replace the magic number 150 to a larger value to control the size ratio of the thumbnail or directly set height and width. 
2) In `ReaderControl` constructor replace `this.thumbContainerWidth` and `this.thumbContainerHeight` with larger values to control the size of the thumbnail container.

3) In ReaderControl.css replace #sidePanel width value to control the size of the side panel.

[Michael Bozza]

Thank you very much for both replies, Anatoly.

I was able to get everything going.

I have one last question for you.

Is it possible to center a thumbnail that is in a landscape format instead of a portrait format?

I have mainly portrait formatted thumbnails, but have about 50 landscape thumbnails.

The landscape thumbnails are off center and the client would like it to be centered (if possible).

Do you know of any way to do this?

Thank you.

[Anatoly Kudrevatukh]

I do not see any problem with portrait or landscape thumbnails. What version of WebViewer are you using? Could you attach a screenshot and your modifications?

[Michael Bozza]

There isn't necessarily an issue with them. They just seem off center. I have attached an image.
In the image, you can see that the thumbContainer doesn't line up.

This is not a real issue, just something the user wanted to know if it was possible.

[Michael Bozza]

I figured out a little bit of a hack for this.

I have overwritten the receivedThumb method and in the if statement, I set the height and width to the number I'd like.

Then I have a variable that I assign to the received thumb (ex: var testThumb = thumb)

Then I assign another variable to equal the height of the portrait size thumbs minus the height of the landscape thumb, divided by 2. (var center = ('height of portrait thumb' - 'height of landscape thumb') / 2)

Then I set the "marginBottom" style to equal the 'center' variable. 

All in all, it looks like: 

        if (thumb.width > thumb.height) {
            ratio = thumb.width / 150;
            height = Math.round(thumb.height / ratio)
            width = 155;
            landscapeThumb = thumb;
            var center = (190 - height) / 2
            landscapeThumb.style.marginBottom = center +  'px';

I have posted this in case anyone else asks a similar question. 

Thank you for your help.

On Thursday, November 12, 2015 at 1:04:30 PM UTC-5, Michael Bozza wrote:

[Perry]

Where is the 'receivedThumb' function in the v5.0? as there is no ReaderControl.js any more.

[Andy Huang]

Hi Perry,

'receivedThumb' has since been removed for a while now. If you want to change the size of the thumbnail, I suggest cloning, modifying, and building the WebViewer UI from our GitHub repo (https://github.com/PDFTron/webviewer-ui). We are looking to add an API for changing the thumbnail size which you can follow and contribute to in this ticket here: https://github.com/PDFTron/webviewer-ui/issues/49.

Best Regards,

Andy Huang

Software Developer

PDFTron Systems, Inc.

www.pdftron.com

[Perry]

I emailed PDFTron support the same question and got the solution I was actually looking for. Here it is if others need it:

const thumbNailSize = 400;




var doc = instViewer.docViewer.getDocument();

for (i = 0; i < instViewer.getPageCount(); i++) {
    var pageInfo = doc.getPageInfo(i);
    doc.loadCanvasAsync({
        pageIndex: i,
        zoom: thumbNailSize / Math.max(pageInfo.width, pageInfo.height),
        drawComplete: (canvas) => {
           // display each thumbnail found in your document in your own UI
        }
    });
}