Skip to content

Commit

Permalink
Calculate fixed image width if necessary
Browse files Browse the repository at this point in the history
  • Loading branch information
mrseanbaines committed May 23, 2020
1 parent 7423aa3 commit 1da5b37
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,34 @@ Object {
}
`;

exports[`contentful extend node type resolveFixed generates responsive resolution data for images using height option 1`] = `
Object {
"aspectRatio": 1,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"height": 400,
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=400&fit=fill",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=400&fit=fill 1x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=600&fit=fill 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=800&fit=fill 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1200&fit=fill 3x",
"width": 400,
}
`;

exports[`contentful extend node type resolveFixed generates responsive resolution data for images using width option 1`] = `
Object {
"aspectRatio": 0.75,
"baseUrl": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg",
"height": 533,
"src": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400",
"srcSet": "//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=400&h=533 1x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=600&h=800 1.5x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=800&h=1067 2x,
//images.contentful.com/ubriaw6jfhm1/10TkaLheGeQG6qQGqWYqUI/5421d3108cbb699561acabd594fa2cb0/ryugj83mqwa1asojwtwb.jpg?w=1200&h=1600 3x",
"width": 400,
}
`;

exports[`contentful extend node type resolveFluid filters out sizes larger than the image's width 1`] = `
Object {
"aspectRatio": 0.75,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,16 @@ describe(`contentful extend node type`, () => {
}

describe(`resolveFixed`, () => {
it(`generates responsive resolution data for images`, async () => {
it(`generates responsive resolution data for images using width option`, async () => {
const resp = await resolveFixed(image, { width: 400 })
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
})
it(`generates responsive resolution data for images using height option`, async () => {
const resp = await resolveFixed(image, { height: 400 })
expect(resp.srcSet.length).toBeGreaterThan(1)
expect(resp).toMatchSnapshot()
})
it(`generates responsive resolution data for images using all options`, async () => {
const resp = await resolveFixed(image, {
width: 450,
Expand Down Expand Up @@ -75,15 +80,15 @@ describe(`contentful extend node type`, () => {
expect(resp.width).toBe(450)
expect(resp.height).toBe(600)
})
it(`if width and height are set that's what is returned`, async () => {
it(`returns the correct width and height when both are supplied`, async () => {
const resp = await resolveFixed(image, {
width: 450,
height: 399,
})
expect(resp.width).toBe(450)
expect(resp.height).toBe(399)
})
it(`Always outputs ints`, async () => {
it(`always outputs ints`, async () => {
const resp = await resolveFixed(image, {
width: 450.1,
height: 399.1,
Expand All @@ -105,6 +110,7 @@ describe(`contentful extend node type`, () => {
expect(resp).toMatchSnapshot()
})
})

describe(`resolveFluid`, () => {
it(`generates responsive size data for images using a default maxWidth`, async () => {
const resp = await resolveFluid(image, {})
Expand Down Expand Up @@ -145,6 +151,7 @@ describe(`contentful extend node type`, () => {
expect(resp).toMatchSnapshot()
})
})

describe(`resolveResize`, () => {
it(`generates resized images using a default width`, async () => {
const resp = await resolveResize(image, {})
Expand Down
5 changes: 5 additions & 0 deletions packages/gatsby-source-contentful/src/extend-node-type.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,11 @@ const resolveFixed = (image, options) => {
options.width = 400
}

// If only a height is given, calculate the width based on the height and the aspect ratio
if (options.height !== undefined && options.width === undefined) {
options.width = Math.round(options.height * desiredAspectRatio)
}

// If we're cropping, calculate the specified aspect ratio.
if (options.width !== undefined && options.height !== undefined) {
desiredAspectRatio = options.width / options.height
Expand Down

0 comments on commit 1da5b37

Please sign in to comment.