Last active
June 29, 2021 23:12
-
-
Save TheeBryanWhite/d411591fd747587824223e975fea5b0f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| props.input.aboutAdditionalImages.map((image) => { | |
| const addImages = withArtDirection(getImage(image.additionalImage.imgDesktop), [ | |
| { | |
| media: "(max-width: 991px)", | |
| image: getImage(image.additionalImage.imgDesktop), | |
| }, | |
| ]) | |
| return( | |
| <div key={image.additionalImage.id}> | |
| <GatsbyImage | |
| alt={image.additionalImage.altText} | |
| image={addImages} | |
| /> | |
| </div> | |
| ) | |
| }) | |
| } | |
| // The GraphQL query | |
| ... on WpPage_Pagelayouts_GlobalLayouts_About { | |
| aboutBody | |
| aboutTitle | |
| fieldGroupName | |
| aboutAdditionalImages { | |
| fieldGroupName | |
| imgMobile:additionalImage { | |
| altText | |
| id | |
| localFile { | |
| childImageSharp { | |
| gatsbyImageData( | |
| height: 262 | |
| width: 262 | |
| transformOptions: { | |
| cropFocus: ATTENTION | |
| } | |
| ) | |
| } | |
| } | |
| } | |
| imgDesktop:additionalImage { | |
| altText | |
| id | |
| localFile { | |
| childImageSharp { | |
| gatsbyImageData( | |
| height: 400 | |
| transformOptions: { | |
| cropFocus: ATTENTION | |
| } | |
| ) | |
| } | |
| } | |
| } | |
| } | |
| // The array that gets mapped | |
| [ | |
| { | |
| "fieldGroupName": "about_additional_images", | |
| "additionalImage": { | |
| "altText": "", | |
| "id": "cG9zdDo3Nw==", | |
| "imgMobile": { | |
| "childImageSharp": { | |
| "gatsbyImageData": { | |
| "layout": "constrained", | |
| "placeholder": { | |
| "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQD/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAYKlcTsRjSJkF//EABsQAAICAwEAAAAAAAAAAAAAAAACAREDBBIT/9oACAEBAAEFAombjosTW6J1aGx8szsp6vJdn//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EAB0QAAIBBAMAAAAAAAAAAAAAAAABEQIQMUESIZH/2gAIAQEABj8C0ZXpknkagaFFTO6rf//EABoQAQADAQEBAAAAAAAAAAAAAAEAESExYUH/2gAIAQEAAT8hDccS2nCAfTBpxXrBzfpU8AYsCHauVgRHNltM/9oADAMBAAIAAwAAABBQx3z/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAVEQEBAAAAAAAAAAAAAAAAAAARIP/aAAgBAgEBPxBj/8QAHRABAQEBAAIDAQAAAAAAAAAAAREhADFRQZGh4f/aAAgBAQABPxAOtl1Pip+t7IRACAn98/bwCETJj1D8FAl9dAuUq3bPHASphLxcfgYt51RwK0o9erVfXf/Z" | |
| }, | |
| "images": { | |
| "fallback": { | |
| "src": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/c9e2f/Image-2.jpg", | |
| "srcSet": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/c9e2f/Image-2.jpg 262w,\n/static/e0f515b43d8ce36c5ab0d0692f3a3af5/7ff75/Image-2.jpg 288w", | |
| "sizes": "(min-width: 262px) 262px, 100vw" | |
| }, | |
| "sources": [ | |
| { | |
| "srcSet": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/512e4/Image-2.avif 262w,\n/static/e0f515b43d8ce36c5ab0d0692f3a3af5/06fde/Image-2.avif 288w", | |
| "type": "image/avif", | |
| "sizes": "(min-width: 262px) 262px, 100vw" | |
| }, | |
| { | |
| "srcSet": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/8b8ba/Image-2.webp 262w,\n/static/e0f515b43d8ce36c5ab0d0692f3a3af5/9fc01/Image-2.webp 288w", | |
| "type": "image/webp", | |
| "sizes": "(min-width: 262px) 262px, 100vw" | |
| } | |
| ] | |
| }, | |
| "width": 262, | |
| "height": 262 | |
| } | |
| } | |
| }, | |
| "imgDesktop": { | |
| "childImageSharp": { | |
| "gatsbyImageData": { | |
| "layout": "constrained", | |
| "placeholder": { | |
| "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAZABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAMABf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAECRLkto5UN4Fy2hj//xAAcEAACAgIDAAAAAAAAAAAAAAAAAQIRAxITITH/2gAIAQEAAQUC1TahAqJ1aquQhPCiTwk62yeiP//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABwQAAICAgMAAAAAAAAAAAAAAAABEBESMTJRkf/aAAgBAQAGPwKdHF+mhZVfRaodQo//xAAeEAACAgICAwAAAAAAAAAAAAAAAREhMUFRkWGhsf/aAAgBAQABPyFJ1NsWal2eR9ku9uzOMkVe4g3GSNsvgbjJMAvowP/aAAwDAQACAAMAAAAQn8w8/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPxAf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxAf/8QAIRABAAICAAYDAAAAAAAAAAAAAQARITFBUWGRsfBxocH/2gAIAQEAAT8QrgKOlWvgLl6di8LgfTuEKij6AIZhcqpKb7NIDvLIIB1t4lDSqOAF7usxdOIKBuk4c4lM3hqfT/Zp6cJs+Z//2Q==" | |
| }, | |
| "images": { | |
| "fallback": { | |
| "src": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/fb6b8/Image-2.jpg", | |
| "srcSet": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/fb6b8/Image-2.jpg 288w", | |
| "sizes": "(min-width: 288px) 288px, 100vw" | |
| }, | |
| "sources": [ | |
| { | |
| "srcSet": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/9afd4/Image-2.avif 288w", | |
| "type": "image/avif", | |
| "sizes": "(min-width: 288px) 288px, 100vw" | |
| }, | |
| { | |
| "srcSet": "/static/e0f515b43d8ce36c5ab0d0692f3a3af5/715d8/Image-2.webp 288w", | |
| "type": "image/webp", | |
| "sizes": "(min-width: 288px) 288px, 100vw" | |
| } | |
| ] | |
| }, | |
| "width": 288, | |
| "height": 364 | |
| } | |
| } | |
| } | |
| } | |
| }, | |
| { | |
| "fieldGroupName": "about_additional_images", | |
| "additionalImage": { | |
| "altText": "", | |
| "id": "cG9zdDo3NQ==", | |
| "imgMobile": { | |
| "childImageSharp": { | |
| "gatsbyImageData": { | |
| "layout": "constrained", | |
| "placeholder": { | |
| "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAMCBAH/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAeenPLHXKqiHhU5A/wD/xAAbEAADAAIDAAAAAAAAAAAAAAAAAQISEwMRIf/aAAgBAQABBQLQqu+BM0sm/dlZOn2mx00ZM//EABcRAAMBAAAAAAAAAAAAAAAAAAABIRD/2gAIAQMBAT8BhBZ//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEhEP/aAAgBAgEBPwGlHn//xAAcEAABBAMBAAAAAAAAAAAAAAAAARAhYRESIjH/2gAIAQEABj8CyL2tEqTsU3r/AP/EABwQAQADAQADAQAAAAAAAAAAAAEAEVEhMUFxkf/aAAgBAQABPyF7h1qdJwxMUYlLU0igjxhf1gPbpBNvYs3R+T//2gAMAwEAAgADAAAAEOgQgf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAEBH/2gAIAQMBAT8QWcqc/8QAGBEBAQADAAAAAAAAAAAAAAAAAQAQEVH/2gAIAQIBAT8QDu3QY//EAB0QAQACAgIDAAAAAAAAAAAAAAEAESExQWFRobH/2gAIAQEAAT8QA2aANQgvaNC+vspXMNbloYzAc7LlLi2wc+UHiOb7MdOI4BsXMGZLG6XFCtW4/9k=" | |
| }, | |
| "images": { | |
| "fallback": { | |
| "src": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/c9e2f/SLKSN_Great_Hall_Fireplace_01-1.jpg", | |
| "srcSet": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/c9e2f/SLKSN_Great_Hall_Fireplace_01-1.jpg 262w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/4694a/SLKSN_Great_Hall_Fireplace_01-1.jpg 576w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/b9792/SLKSN_Great_Hall_Fireplace_01-1.jpg 768w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/ccd15/SLKSN_Great_Hall_Fireplace_01-1.jpg 802w", | |
| "sizes": "(min-width: 262px) 262px, 100vw" | |
| }, | |
| "sources": [ | |
| { | |
| "srcSet": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/512e4/SLKSN_Great_Hall_Fireplace_01-1.avif 262w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/25d17/SLKSN_Great_Hall_Fireplace_01-1.avif 576w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/dd894/SLKSN_Great_Hall_Fireplace_01-1.avif 768w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/b3aa9/SLKSN_Great_Hall_Fireplace_01-1.avif 802w", | |
| "type": "image/avif", | |
| "sizes": "(min-width: 262px) 262px, 100vw" | |
| }, | |
| { | |
| "srcSet": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/8b8ba/SLKSN_Great_Hall_Fireplace_01-1.webp 262w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/aa866/SLKSN_Great_Hall_Fireplace_01-1.webp 576w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/482be/SLKSN_Great_Hall_Fireplace_01-1.webp 768w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/26455/SLKSN_Great_Hall_Fireplace_01-1.webp 802w", | |
| "type": "image/webp", | |
| "sizes": "(min-width: 262px) 262px, 100vw" | |
| } | |
| ] | |
| }, | |
| "width": 262, | |
| "height": 262 | |
| } | |
| } | |
| }, | |
| "imgDesktop": { | |
| "childImageSharp": { | |
| "gatsbyImageData": { | |
| "layout": "constrained", | |
| "placeholder": { | |
| "fallback": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAMCBP/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAYw52d0ZM//EABkQAAMBAQEAAAAAAAAAAAAAAAECEQADIf/aAAgBAQABBQIDnSiMSmvgaaHf/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Bp//EABURAQEAAAAAAAAAAAAAAAAAABEQ/9oACAECAQE/AQn/xAAaEAACAgMAAAAAAAAAAAAAAAAAAQIxEBEh/9oACAEBAAY/AnI3EvHEWf/EAB0QAAICAQUAAAAAAAAAAAAAAAERACExUWGhwfH/2gAIAQEAAT8hbALWYKlIe/MSa7wYlKdCOsHjn//aAAwDAQACAAMAAAAQbC//xAAWEQADAAAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8Qhoh//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARMf/aAAgBAgEBPxAa7bf/xAAdEAEBAAIBBQAAAAAAAAAAAAABEQAxIUFRYcHw/9oACAEBAAE/EGSdCKTzemHm7ApLOa9YYcYg7a+7ZVI8w24Koo1hVkl0Y//Z" | |
| }, | |
| "images": { | |
| "fallback": { | |
| "src": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/74879/SLKSN_Great_Hall_Fireplace_01-1.jpg", | |
| "srcSet": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/c3d72/SLKSN_Great_Hall_Fireplace_01-1.jpg 576w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/74879/SLKSN_Great_Hall_Fireplace_01-1.jpg 635w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/462fc/SLKSN_Great_Hall_Fireplace_01-1.jpg 768w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/ab877/SLKSN_Great_Hall_Fireplace_01-1.jpg 802w", | |
| "sizes": "(min-width: 635px) 635px, 100vw" | |
| }, | |
| "sources": [ | |
| { | |
| "srcSet": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/1b9a3/SLKSN_Great_Hall_Fireplace_01-1.avif 576w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/6f452/SLKSN_Great_Hall_Fireplace_01-1.avif 635w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/91e35/SLKSN_Great_Hall_Fireplace_01-1.avif 768w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/bdb4a/SLKSN_Great_Hall_Fireplace_01-1.avif 802w", | |
| "type": "image/avif", | |
| "sizes": "(min-width: 635px) 635px, 100vw" | |
| }, | |
| { | |
| "srcSet": "/static/688f70b0cdb43c0cc1ab8ddb6c55e649/dc621/SLKSN_Great_Hall_Fireplace_01-1.webp 576w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/7addb/SLKSN_Great_Hall_Fireplace_01-1.webp 635w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/8f39e/SLKSN_Great_Hall_Fireplace_01-1.webp 768w,\n/static/688f70b0cdb43c0cc1ab8ddb6c55e649/d9811/SLKSN_Great_Hall_Fireplace_01-1.webp 802w", | |
| "type": "image/webp", | |
| "sizes": "(min-width: 635px) 635px, 100vw" | |
| } | |
| ] | |
| }, | |
| "width": 635, | |
| "height": 400 | |
| } | |
| } | |
| } | |
| } | |
| } | |
| ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment