Skip to content
Snippets Groups Projects
Commit 0b9cf093 authored by Chris Beer's avatar Chris Beer
Browse files

Extend ManifestCanvas#thumbnail to accept a width, height, or both to constrain the image by

parent 92cd077a
No related branches found
No related tags found
No related merge requests found
......@@ -43,14 +43,28 @@ describe('ManifestoCanvas', () => {
});
});
describe('thumbnail', () => {
it('calculates a thumbnail image API request based off of height', () => {
it('calculates a thumbnail image API request based off of width, height and aspect ratio', () => {
expect(instance.thumbnail(100, 100)).toEqual(
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/,100/0/default.jpg',
);
expect(instance.thumbnail(100, 1000)).toEqual(
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/100,/0/default.jpg',
);
});
it('calculates a thumbnail image API request based off of width', () => {
expect(instance.thumbnail(100)).toEqual(
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/66,/0/default.jpg',
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/100,/0/default.jpg',
);
});
it('calculates a thumbnail image API request based off of height', () => {
expect(instance.thumbnail(null, 100)).toEqual(
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/,100/0/default.jpg',
);
});
it('defaults to using 150 as a height', () => {
expect(instance.thumbnail()).toEqual(
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/100,/0/default.jpg',
'https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/full/,150/0/default.jpg',
);
});
......
......@@ -73,7 +73,7 @@ export class ThumbnailNavigation extends Component {
>
<CanvasThumbnail
onClick={() => setCanvas(window.id, currentGroupings[0].index)}
imageUrl={new ManifestoCanvas(canvas).thumbnail(config.thumbnailNavigation.height)}
imageUrl={new ManifestoCanvas(canvas).thumbnail(null, config.thumbnailNavigation.height)}
height={config.thumbnailNavigation.height}
/>
</div>
......
......@@ -48,7 +48,7 @@ export class WindowSideBarCanvasPanel extends Component {
<CanvasThumbnail
className={classNames(classes.clickable)}
isValid={isValid}
imageUrl={manifestoCanvas.thumbnail(config.canvasNavigation.height)}
imageUrl={manifestoCanvas.thumbnail(config.canvasNavigation.width, config.canvasNavigation.height)}
onClick={onClick}
style={{
cursor: 'pointer',
......
export default {
canvasNavigation: {
height: 100,
height: 50,
width: 50,
},
theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
palette: {
......
......@@ -43,14 +43,37 @@ export default class ManifestoCanvas {
* Creates a canonical image request for a thumb
* @param {Number} height
*/
thumbnail(height = 150) {
const width = Math.floor(height * this.aspectRatio);
thumbnail(maxWidth = undefined, maxHeight = undefined) {
let width;
let height;
if (!this.imageInformationUri) {
return undefined;
}
return this.canonicalImageUri.replace(/\/full\/.*\/0\//, `/full/${width},/0/`);
if (maxWidth && maxHeight) {
const { aspectRatio } = this;
const desiredAspectRatio = maxWidth / maxHeight;
// size to width
if (desiredAspectRatio < aspectRatio) {
height = null;
width = maxWidth;
} else {
height = maxHeight;
width = null;
}
} else if (!maxWidth && !maxHeight) {
width = null;
height = '150';
} else {
width = maxWidth;
height = maxHeight;
}
// note that, although the IIIF server may support sizeByConfinedWh (e.g. !w,h)
// this is a IIIF level 2 feature, so we're instead providing w, or h,-style requests
// which are only level 1.
return this.canonicalImageUri.replace(/\/full\/.*\/0\//, `/full/${width || ''},${height || ''}/0/`);
}
/**
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment