{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/customize-image-sizes/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Customize image sizes","slug":"customize-image-sizes","updated":"2021-02-12T00:00:00.000Z","category":"how-to-design","ingress":"Flex's custom image variants functionality allows you to fine-tune image sizes to your marketplace's needs.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Flex provides a selection of predefined image sizes, or "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"variants"}]},{"type":"text","value":" as\nthey are called, to be used in your marketplace website. However, when\nnone of the predefined variants suits your needs, a custom variant can\nbe requested. In this how-to guide, we'll recap how to fetch different\nimage variants. We'll also take a look at how to define custom image\nvariants when Flex's predefined variants don't offer the dimensions that\nwork best in by your marketplace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"image-variants-in-flex","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#image-variants-in-flex","ariaLabel":"image variants in flex permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Image variants in Flex"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A quick recap on how to request image variants: Image variants are\ndefined using a Flex concept called\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/index.html#sparse-attributes","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"sparse attributes"}]},{"type":"text","value":".\nThey can be used to declare what attributes of a given resource is\nreturned for a resource. For example, the following query parameter\npassed in listings search query to the JS SDK:\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'fields.image': ['variants.landscape-crop', 'variants.landscape-crop2x']"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"viewing-vertical-content","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#viewing-vertical-content","ariaLabel":"viewing vertical content permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Viewing vertical content"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Like mentioned, the image variants above are used on the search page to\npresent search results. However, those image variants do not suit all\nneeds. This may be the case when listing images tend to have some\nvertical content. Let's say we are building a clothes sharing\nmarketplace. If we use the variants mentioned above, we may end up with\nsearch results page like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/43649/landscape-search.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 58.490566037735846%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAC9ElEQVQoz22T329TZRzGXzO958Ib/wouvDIxISYmegFEAzKiW10H2GQCGjcyTASC3JiQkDgSL0jUiBYFHBEKAlthTa1ubTe7tutK29OO0s6uP7aetuecnh9tP+ZUR4jxmzx5vu/3efPNmzfPIxRFQZZlVFVla2sL0zTpdDpYltXn7X77/Oz8/yB0XUfT2uiGgapqGIbZ7202+mw8XWjDMC10w0I3/4Vhz8ynujBNg1arSccy6XYsoIuqNLFLabWQ5TqWrXU70Ov0deg9g3+q1+3QtV9YLFVZzRSIJLJc+flXpq8/4MrVWS5fvUl4KUJKWuOv8iaNVptirc3lYJ0L3g2m5ipMzdW4cCeH27tKua7RUAzEcjKPdz7N9OyfjH78BfudE+wdGmfEdZL7/jCh2GNWpQ3ypSb3ojI7joUQB+YQo2GEM4LYe5cXD7rxrVQpVFr2wiJz4Rw/3l7kg4nzOA6dYujwJKMffcbDhSSRRxWSuSqPSy28kQo7P7yGGAnwvCvEwOEQA47feMl5ixt/rFEsNxDheJ57gTRT39/HMXKW4UOfMHRknOGxSTzeIMHYOqtSmXShSTRVxfWthHAEGRgNIIb8POcM8fl3PhZiWXLrMmJhOcethyucvfgT+46e5o39R9h98CjvDB/n+k0f/sUcS/E1kvk60XSN4UsZxHt+XnD6GHh3FvF+iK88y/1vkYp1hD+Uwu0JMX7ua97eN8muNwd57XUHe3a7uOT+hRl/gkAwTixbI7RSYnAqgXhrBjF4F7HnBmLQx8XpIIsreRLZDcRCJMM1T5Az57/BdeIcI8cmcB7/lLGx0/zg9vAgEGUpmiLzZIt4usyXd7LsPDnPK6d+5+XxGV49M89tf5xYqkD2SQWxWShQliQyUo5EMkU6LVGrblKXGzSaLewktXWdxvo6crFAaaNENrdGuVJFa+t9Y5umhblt7LamYbTbGIadGBVVVfpGptej2+32DW2zfU/XNDRNQ1FaqIqCHYruf6L3N2IiHyAhx8jzAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/82e29/landscape-search.webp 159w","/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/ef33f/landscape-search.webp 318w","/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/f1837/landscape-search.webp 635w","/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/489d9/landscape-search.webp 848w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/8b9b5/landscape-search.png 159w","/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/fa108/landscape-search.png 318w","/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/53fb6/landscape-search.png 635w","/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/43649/landscape-search.png 848w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/793042a0a5463c46a469f4bf149e2dc4/53fb6/landscape-search.png","alt":"Landscape variants on tall images","title":"Landscape variants on tall images","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The selected image variants crop out the images in an undesired way. To\npresent dresses in the search page, we will need to change the image\nvariants that are fetched for the page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"using-custom-variants","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#using-custom-variants","ariaLabel":"using custom variants permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Using custom variants"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To present dresses well in listing images we would need an image in\nportrait mode. However, none of the\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#images","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"predefined image variants"}]},{"type":"text","value":"\noffer us a portrait image that would be a good fit for tall images. Thus\nwe will need to use "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"custom image variants"}]},{"type":"text","value":" to define our own image\nvariant. Custom image variants, like the predefined variants, are\nrequested using sparse attributes. What's different with custom variants\nis that the requester will decide the variant name and will provide and\naccompanying "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"imageVariant.*"}]},{"type":"text","value":" parameter that describes the variant\ndimensions and how is the original image fitted to those dimensions. For\nexample:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'fields.image'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'variants.my-variant'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","string-property","property"]},"children":[{"type":"text","value":"'imageVariant.my-variant'"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'w:400;h:800;fit:scale'"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See custom image variants in\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#image-variants","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"the Flex Marketplace API reference"}]},{"type":"text","value":"\nfor more information on the custom variant description syntax."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's now update our marketplace website to use image variants that work\nbetter with pictures of clothing. What we are looking to do, is change\nthe aspect ratio of the images presented on the search page. In the\npicture above the image ratio is 3:2. Let's change that to 2:3 and see\nif that would work better."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First off, make sure that your "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sdkLoader"}]},{"type":"text","value":" has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"util"}]},{"type":"text","value":" imported from the\nFlex SDK and exported from the file:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── util\n        └── sdkLoader.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"const { createInstance, types, transit, util } = exportSdk;\n\nexport { createInstance, types, transit, util };"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This allows us to use a utility function provided by the SDK to define\nimage variants as objects."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next up, we'll need to define new image variants. The component that\nshows the image in the search page uses a source set of two images so\nlet's replace the current 3:2 variants with two 2:3 ones:\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"portrait-crop"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"portrait-crop2x"}]},{"type":"text","value":". This is done by updating the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"SearchPage.duck.js"}]},{"type":"text","value":" file:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── containers\n        └── SearchPage\n            └── SearchPage.duck.js"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Import the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sdkLoader"}]},{"type":"text","value":" in the top of the file:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"import { util as sdkUtil } from '../../util/sdkLoader';"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"And update the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"loadData"}]},{"type":"text","value":" function to define the new image variants:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"text","value":"export const loadData = (params, search) => {\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const queryParams = parse(search, {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   latlng: ['origin'],\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   latlngBounds: ['bounds'],\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" });\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const { page = 1, address, origin, ...rest } = queryParams;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const originMaybe = config.sortSearchByDistance && origin ? { origin } : {};\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" return searchListings({\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   ...rest,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   ...originMaybe,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   page,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   perPage: RESULT_PAGE_SIZE,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   include: ['author', 'images'],\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   'fields.listing': ['title', 'geolocation', 'price'],\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   'fields.user': ['profile.displayName', 'profile.abbreviatedName'],\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"   'fields.image': ['variants.landscape-crop', 'variants.landscape-crop2x'],\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   'fields.image': ['variants.portrait-crop', 'variants.portrait-crop2x'],\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   'imageVariant.portrait-crop': sdkUtil.objectQueryString({\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     w: 400,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     h: 600,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     fit: 'crop',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   }),\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   'imageVariant.portrait-crop2x': sdkUtil.objectQueryString({\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     w: 800,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     h: 1200,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"     fit: 'crop',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"   }),\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"   'limit.images': 1,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" });\n"}]},{"type":"text","value":"};"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next we'll need to tell the listing card component to load the newly\ndefined image variants. In "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ListingCard"}]},{"type":"text","value":" perform the following change:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"└── src\n    └── components\n        └── ListingCard\n            └── ListingCard.js\n            └── ListingCard.module.css"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"LazyImage\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" rootClassName={css.rootForImage}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" alt={title}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" image={firstImage}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" variants={['landscape-crop', 'landscape-crop2x']}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" variants={['portrait-crop', 'portrait-crop2x']}\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" sizes={renderSizes}\n"}]},{"type":"text","value":"/>"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, update the aspect ratio in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ListingCard.module.css"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"text","value":".aspectWrapper {\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" padding-bottom: 150%; /* 2:3 Aspect Ratio */\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" background: var(--matterColorNegative); /* Loading BG color */\n"}]},{"type":"text","value":"}"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now we have images that suit the content of the marketplace:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/4c4f1/portrait-search.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 102.51572327044025%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFklEQVQ4y4WU6U+UVxTGr+DSRr+YJm2/9h/ol6Zp0g9NusW61KhRkAgiU0FgLIgbCuIWrVqX2tatLtVKq6nUKBasYBFEhXFYhAGBWRhm5p1hVmbmnX2A4dfMGI2mTXqSk/Pcc58895zc5BGxWIxQKESyRiKRFB4fH2dycpKJiYl/5fN+sv5XiqSIx+MhHA6nxNxuN/F4nEQi8Qrx+fn/REXyIhKNpgixWDwllpww+UA0Gk3h55NHY7EXYuPjEy+4L28gkgSvd4x4PEYsFiUUDJIMWQ4QTOKpKQIBOTV5KBhgairBxMQkL8dkYoqpRIJEIrVyHK8cxieH8QciOFxedHoDw4YBJMsIdocLORgmPj6JPxglHImSGI9hslhpam7GbNYTDXnxykGC4Shi1CXT0S/R2jHE6epb7Pn+CrUNjzhx8Sonzp6lpU3NsMmK0xti0OSiTeth46U+tuw/y+Ejx9m6ax9Ha9oYNNmxu30Iq8OPesDJqQu1ZCg2sGRZJaXlh8kr2si67Xu5+FsjtlE3Dm8Is91HxXUzoqCftzf18N6WO7ypbGHm+j5uqiR8chBhtfv4W2Wg8sgZluYq2Vx6gOLiUgrXVVJYcpBte06iGTLhkWOM2AMUX9KRrtQwu9zCNGU/szYPIwqesLNGh08OICT7GLdbNBRW7OeDTxeTv3kPyu0HKak8SkaOkszindQ1PcIfTqCXgnx19ilC0cbsrSO8XtLLaxu1iNXt5J0fYszrR5htLu4+7KW6pomV+WUsyihjvfIHsvK38UVGNpu27ODBIxXuwAQDI36yz5sQa9qZWaZjurKXGSWDiNVq5h3qwuXxJgXdNLUPcr9zmMNnbpCxehsK5V5W5GynfMcBmtu70RklHN44GoOXZT97EDkPma7UkF6gJl05hFh0lfc33MTsDCJMtjGa1cM0PdZz4KfrZBVVsTK/nKW5ZVR9c4y2HjNGyYt9LEr3cICPd7UillxjelEvaYqHpBX1I5bU8sbqOrqMPoRR8tDwSEdd6yCbKi6QmVXO+qLdZOZu4OuKg9xTaTFYxrB5onRpvez+Rc3MvJbUR6StuY9QdDMnr4UFVXWoh6wIvdlFfesgl2vbKNzxHZn5m1miKGTZWiXFm/ZQf6+LIaMbqydCt9bNxRYns/I7EIrHpGffRWS3M7dIRc1dNSabG6E1Oqht6ufUlQZWlR5jYVYx8xblM39hAYrCSv6ob6VPa0NyR+gadHHijpX03FamKdpIy6pHZN1nToGKXxt6MY/6EQMGG7/f7uLwuRsoCr9lweK1fL4im/kL1pKXu4VL1+7Q89SExRlCpRnl5F9mZuQ0kbbmATMzriMyGnlrXTPXGjsZljyIPq1E9c12qg5dZvn6cj7LzOWjhdnMyypgZU4Jp8//TkePFpM9SGunhdp2ibl5DYjsVsSXlxELbvBOcSN/Nj1GO+JEdPTqOX6hjqrj1Sxfu4NsxUYy87ayofIARRW7+PFcNW3qPvSSj9oWHQ80Rt4tvcWMVbfJ2VfDJ+X1fLi1gdv3VGi0VsToqJPOzn66NQZUXQN09wyhGdCjN44yYnagM1iwOz2Mjclo9TZsDhf9egPtTwZxOFy43T4MFjeS3YPbG0BEPW4i5mHGgzI2mxWHw47FYiYYkF/xvLDTTsioI+DxIEkSo1YLdoc9ZbAwlcqkV4pwJIJflonF48iynMJ+vz+Vzxz5mRMneXIgkOoleUkD9vn8KRx/ybX/AUVuP6KOB3tSAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/82e29/portrait-search.webp 159w","/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/ef33f/portrait-search.webp 318w","/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/f1837/portrait-search.webp 635w","/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/73894/portrait-search.webp 662w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/8b9b5/portrait-search.png 159w","/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/fa108/portrait-search.png 318w","/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/53fb6/portrait-search.png 635w","/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/4c4f1/portrait-search.png 662w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/4359ac4c5d53baf49a66bcf75028823a/53fb6/portrait-search.png","alt":"Portrait variants on tall images","title":"Portrait variants on tall images","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order to make sure that the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ListingCard"}]},{"type":"text","value":" component renders correctly\neverywhere, make sure to fetch the 2:3 image variants we used here on\nevery page where the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ListingCard"}]},{"type":"text","value":" component is used. Furthermore, the\nchanges listed in this how-to guide can be applied to other components\nthat view listing images too. The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":".aspectWrapper"}]},{"type":"text","value":" class name is usually\na good search keyword when finding all components that need to be\nupdated."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Image variants in Flex","depth":2},{"value":"Viewing vertical content","depth":2},{"value":"Using custom variants","depth":2}]}},"pageContext":{"slug":"customize-image-sizes","category":"how-to-design"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}