@primoz.rome My apologies. The block
is just the GraphQL API response for the particular block inside the Modular Content array field. The entire field is an array (see example field below), and each block
is a single element of that array, like:
{props.page.modularContentField.map((block, key) => <BlockRenderer key={key} block={block}/>)}
So the whole thing would fit together like:
- Query DatoCMS inside
getStaticProps()
and return the API response
- The page function (
default function MyPage(props)
) receives the response as something like props.page
(where page
is the model name in Dato)
- Then you must
props.page.modularContentField.map
the MCF field array into specific blocks.
- For each block, use Next.js to dynamically import a file and return its component, passing along the
block
to the component so it can handle the actual content (in this case, the image parameters)
- That’s it! (~
Future Todo: Figure out a way to auto-import a component based on its name & filename, instead of having to still use a switch statement for each .__typename
.~ Unfortunately this doesn’t seem possible in Next.js)
Here’s an example Modular Content field. The block
would just be a single element of this array. Sorry for the length of this! You can change what fields you get back in the MCF by modifying the GraphQL query. In our case, we re-use an GraphQL fragment for our images across the site, which is why this has so many fields. In any case, here it is:
[
{
"__typename": "HeaderRecord",
"id": "54208740",
"text": "Image Gallery - Slide",
"level": "2",
"anchor": "image-galleries-under-development"
},
{
"__typename": "ImageGalleryRecord",
"id": "54374542",
"images": [
{
"alt": "A woven basket that’s red and covered in spikes next to its lid, which has green leaves and stem and a white flower.",
"basename": "black-ash-basketexhibitions022021item-3589",
"blurhash": "LC9r%@[ErY={aKxGs.Na0}OrkWE2",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDhgQFQ0NDh0VHR0dJSclJBYfHSYmIS0vGh0tHR0WMDUxKC0vMjIyHSI4PTcwPCsxMjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7Ozs7Ozs7OzsvOzs7Ozs7Oy87Oy87Ozs7NTs7Oy8vNTs7OzsvLy8vOy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAABBQAAAAAAAAAAAAAAAAAFAAEDBAf/xAAdEAABBQEBAQEAAAAAAAAAAAABAAIDBREEIVEU/8QAFgEBAQEAAAAAAAAAAAAAAAAABQMC/8QAHBEBAAIBBQAAAAAAAAAAAAAAAQACAwQRISJB/9oADAMBAAIRAxEAPwDO+yuPON3Qm5aJvY0OdulTWFkyduAq1V2McUYGqXcOYvq7Y0D2CbGg/JGXNcfPqSJXNkyWItb6Skt1LJCbWxjtP//Z",
"exifInfo": {},
"customData": {},
"copyright": "Michelle Kuo",
"filename": "black-ash-basketexhibitions022021item-3589.jpg",
"focalPoint": {
"x": 0.5,
"y": 0.5
},
"height": 933,
"id": "19320646",
"mimeType": "image/jpeg",
"size": 129905,
"smartTags": [
"paper",
"origami",
"art"
],
"tags": [],
"title": "Strawberries and blueberries are sacred fruits to the Pokagon Potawatomi people. This strawberry basket by Jamie Chapman is covered in curled spikes called curlicues, which require time and masterful skill to weave.",
"url": "https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg",
"width": 1400,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?dpr=0.25 350w,https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?dpr=0.5 700w,https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?dpr=0.75 1050w,https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg 1400w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?dpr=0.25&fm=webp 350w,https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?dpr=0.5&fm=webp 700w,https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?dpr=0.75&fm=webp 1050w,https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg?fm=webp 1400w",
"sizes": "(max-width: 1400px) 100vw, 1400px",
"src": "https://www.datocms-assets.com/44232/1625853067-black-ash-basketexhibitions022021item-3589.jpg",
"width": 1400,
"height": 933,
"aspectRatio": 1.5005359056806002,
"alt": "A woven basket that’s red and covered in spikes next to its lid, which has green leaves and stem and a white flower.",
"title": "Strawberries and blueberries are sacred fruits to the Pokagon Potawatomi people. This strawberry basket by Jamie Chapman is covered in curled spikes called curlicues, which require time and masterful skill to weave.",
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDhgQFQ0NDh0VHR0dJSclJBYfHSYmIS0vGh0tHR0WMDUxKC0vMjIyHSI4PTcwPCsxMjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7Ozs7Ozs7OzsvOzs7Ozs7Oy87Oy87Ozs7NTs7Oy8vNTs7OzsvLy8vOy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAABBQAAAAAAAAAAAAAAAAAFAAEDBAf/xAAdEAABBQEBAQEAAAAAAAAAAAABAAIDBREEIVEU/8QAFgEBAQEAAAAAAAAAAAAAAAAABQMC/8QAHBEBAAIBBQAAAAAAAAAAAAAAAQACAwQRISJB/9oADAMBAAIRAxEAPwDO+yuPON3Qm5aJvY0OdulTWFkyduAq1V2McUYGqXcOYvq7Y0D2CbGg/JGXNcfPqSJXNkyWItb6Skt1LJCbWxjtP//Z"
}
},
{
"alt": "A young boy wearing a face mask poses for a photo next to a dinosaur bone that's twice his height, in front of a mural of a rocky landscape. Another young boy and a man take his photo.",
"basename": "michelle-kuo-field-museummktg071720196d-1",
"blurhash": "LOG[sJrs?b-=~pIB%MoztRxvRkRi",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLEg0PDiMQDQ0NFxgMFhYOFxoZGCIfFhUaHysjGh0oHRUWJDUlKC0vMjIyGSU4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIhw7Oy87Oy8vLy8vLzsvLzUvOzUvOy8vLy8vLy8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAAFBgEDBwD/xAAeEAABBAIDAQAAAAAAAAAAAAABAAIDBQRBESExEv/EABUBAQEAAAAAAAAAAAAAAAAAAAMB/8QAGREAAgMBAAAAAAAAAAAAAAAAACEBERIC/9oADAMBAAIRAxEAPwBht85jIiSUGrrFks3R2q7dzpYSOUBwfvGlJ52jqdCqjQ2ZbAwdqUmzXJjZ6uVnlhn/2Q==",
"exifInfo": {},
"customData": {},
"copyright": "Photo by Michelle Kuo, © 2012 The Field Museum,",
"filename": "michelle-kuo-field-museummktg071720196d-1.jpg",
"focalPoint": {
"x": 0.37,
"y": 0.52
},
"height": 933,
"id": "19421930",
"mimeType": "image/jpeg",
"size": 246951,
"smartTags": [
"shorts",
"clothing",
"apparel",
"person",
"human",
"shoe",
"footwear",
"helmet",
"soil"
],
"tags": [],
"title": null,
"url": "https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg",
"width": 1400,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?dpr=0.25 350w,https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?dpr=0.5 700w,https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?dpr=0.75 1050w,https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg 1400w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?dpr=0.25&fm=webp 350w,https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?dpr=0.5&fm=webp 700w,https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?dpr=0.75&fm=webp 1050w,https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg?fm=webp 1400w",
"sizes": "(max-width: 1400px) 100vw, 1400px",
"src": "https://www.datocms-assets.com/44232/1626123758-michelle-kuo-field-museummktg071720196d-1.jpg",
"width": 1400,
"height": 933,
"aspectRatio": 1.5005359056806002,
"alt": "A young boy wearing a face mask poses for a photo next to a dinosaur bone that's twice his height, in front of a mural of a rocky landscape. Another young boy and a man take his photo.",
"title": null,
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLEg0PDiMQDQ0NFxgMFhYOFxoZGCIfFhUaHysjGh0oHRUWJDUlKC0vMjIyGSU4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIhw7Oy87Oy8vLy8vLzsvLzUvOzUvOy8vLy8vLy8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAAFBgEDBwD/xAAeEAABBAIDAQAAAAAAAAAAAAABAAIDBQRBESExEv/EABUBAQEAAAAAAAAAAAAAAAAAAAMB/8QAGREAAgMBAAAAAAAAAAAAAAAAACEBERIC/9oADAMBAAIRAxEAPwBht85jIiSUGrrFks3R2q7dzpYSOUBwfvGlJ52jqdCqjQ2ZbAwdqUmzXJjZ6uVnlhn/2Q=="
}
},
{
"alt": "Four women dressed in Apsáalooke attire stand in front of the Field Museum. ",
"basename": "c-adam-sings-in-the-timber-20190419-cam22610",
"blurhash": "LFG*jBM_.mbv0hkDIpogKiX9m-r@",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEggQChALDhUXDQ0NFhEODQ0OFxMZGBYVFhUaHysjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8cIh07Ly87Ly8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAABQMEBv/EABwQAAIDAAMBAAAAAAAAAAAAAAECAAMEESEjEv/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/EABoRAAICAwAAAAAAAAAAAAAAAAECAAMREiH/2gAMAwEAAhEDEQA/AI9dJVIrrf1+ZptdIZD1E4xgXc8QzYcyupK9ey1noLqIRlipAUQmw8BkGZ//2Q==",
"exifInfo": {},
"customData": {},
"copyright": " Adam Sings In The Timber",
"filename": "c-adam-sings-in-the-timber-20190419-cam22610.jpg",
"focalPoint": {
"x": 0.41,
"y": 0.12
},
"height": 933,
"id": "22486932",
"mimeType": "image/jpeg",
"size": 364961,
"smartTags": [
"costume",
"person",
"human",
"festival",
"crowd",
"clothing",
"apparel"
],
"tags": [],
"title": "From left to right: Phenocia Bauerle, Charmaine Hill, Nina Sanders, JoRee LaFrance.",
"url": "https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg",
"width": 1400,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?dpr=0.25 350w,https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?dpr=0.5 700w,https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?dpr=0.75 1050w,https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg 1400w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?dpr=0.25&fm=webp 350w,https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?dpr=0.5&fm=webp 700w,https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?dpr=0.75&fm=webp 1050w,https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg?fm=webp 1400w",
"sizes": "(max-width: 1400px) 100vw, 1400px",
"src": "https://www.datocms-assets.com/44232/1629989908-c-adam-sings-in-the-timber-20190419-cam22610.jpg",
"width": 1400,
"height": 933,
"aspectRatio": 1.5005359056806002,
"alt": "Four women dressed in Apsáalooke attire stand in front of the Field Museum. ",
"title": "From left to right: Phenocia Bauerle, Charmaine Hill, Nina Sanders, JoRee LaFrance.",
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEggQChALDhUXDQ0NFhEODQ0OFxMZGBYVFhUaHysjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8cIh07Ly87Ly8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAABQMEBv/EABwQAAIDAAMBAAAAAAAAAAAAAAECAAMEESEjEv/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/EABoRAAICAwAAAAAAAAAAAAAAAAECAAMREiH/2gAMAwEAAhEDEQA/AI9dJVIrrf1+ZptdIZD1E4xgXc8QzYcyupK9ey1noLqIRlipAUQmw8BkGZ//2Q=="
}
},
{
"alt": "This is a test image",
"basename": "test-color-pattern",
"blurhash": "LFI#u+.4p1+7TfS~bnVc~pVzIqTu",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHCw4RCg4TEAoPDg4ODQkPDxMNFg0YFxUZGBYVFiEaHzcjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIiY1Ly87Oy8vLy8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABIAGAMBIgACEQEDEQH/xAAaAAACAgMAAAAAAAAAAAAAAAAABAEDAgUG/8QAGhAAAwEAAwAAAAAAAAAAAAAAAAIDAQQFFP/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAD/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIxIQMREyJh/9oADAMBAAIRAxEAPwDqPWotfsEQwaDZgjfhUqA5JSyZRfJ4Op2CuAhLhPIgdsnQGqu2Df1KlzCQI9WyhFdswAAqhQt2f//Z",
"exifInfo": {},
"customData": {},
"copyright": null,
"filename": "test-color-pattern.jpg",
"focalPoint": {
"x": 0.51,
"y": 0.77
},
"height": 993,
"id": "17437392",
"mimeType": "image/jpeg",
"size": 120001,
"smartTags": [
"text",
"label"
],
"tags": [],
"title": null,
"url": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg",
"width": 1300,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.25 325w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.5 650w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.75 975w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg 1300w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.25&fm=webp 325w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.5&fm=webp 650w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.75&fm=webp 975w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?fm=webp 1300w",
"sizes": "(max-width: 1300px) 100vw, 1300px",
"src": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg",
"width": 1300,
"height": 993,
"aspectRatio": 1.309164149043303,
"alt": "This is a test image",
"title": null,
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHCw4RCg4TEAoPDg4ODQkPDxMNFg0YFxUZGBYVFiEaHzcjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIiY1Ly87Oy8vLy8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABIAGAMBIgACEQEDEQH/xAAaAAACAgMAAAAAAAAAAAAAAAAABAEDAgUG/8QAGhAAAwEAAwAAAAAAAAAAAAAAAAIDAQQFFP/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAD/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIxIQMREyJh/9oADAMBAAIRAxEAPwDqPWotfsEQwaDZgjfhUqA5JSyZRfJ4Op2CuAhLhPIgdsnQGqu2Df1KlzCQI9WyhFdswAAqhQt2f//Z"
}
},
{
"alt": "The accessible East entrance is on the side of the building that's closest to Lake Michigan and farthest from Lake Shore Drive. ",
"basename": "field-museum-east-entrance-google-maps-1",
"blurhash": "LFE.,~~WD%sk9a-:xuIVs+M|ogxu",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEggLEA8VDg4QDQ0LDhEOFg0SFxQZGBYTFhUmHysjJh0oHSEWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oHSgvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAADBAEFBgD/xAAdEAACAQQDAAAAAAAAAAAAAAAAAQIDBBESBSEi/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwIA/8QAGBEBAQADAAAAAAAAAAAAAAAAAQACEUH/2gAMAwEAAhEDEQA/ADxWwre0moMbXgI6arxD5Wlir2Mt30QXnJWEY5eDjGRG4u7/2Q==",
"exifInfo": {},
"customData": {},
"copyright": "Google",
"filename": "field-museum-east-entrance-google-maps-1.jpg",
"focalPoint": {
"x": 0.43,
"y": 0.73
},
"height": 933,
"id": "16573481",
"mimeType": "image/jpeg",
"size": 276555,
"smartTags": [
"person",
"human",
"pedestrian"
],
"tags": [],
"title": "Field Museum East Entrance",
"url": "https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg",
"width": 1400,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?dpr=0.25 350w,https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?dpr=0.5 700w,https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?dpr=0.75 1050w,https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg 1400w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?dpr=0.25&fm=webp 350w,https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?dpr=0.5&fm=webp 700w,https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?dpr=0.75&fm=webp 1050w,https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg?fm=webp 1400w",
"sizes": "(max-width: 1400px) 100vw, 1400px",
"src": "https://www.datocms-assets.com/44232/1621982756-field-museum-east-entrance-google-maps-1.jpg",
"width": 1400,
"height": 933,
"aspectRatio": 1.5005359056806002,
"alt": "The accessible East entrance is on the side of the building that's closest to Lake Michigan and farthest from Lake Shore Drive. ",
"title": "Field Museum East Entrance",
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEggLEA8VDg4QDQ0LDhEOFg0SFxQZGBYTFhUmHysjJh0oHSEWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oHSgvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAADBAEFBgD/xAAdEAACAQQDAAAAAAAAAAAAAAAAAQIDBBESBSEi/8QAFgEBAQEAAAAAAAAAAAAAAAAAAwIA/8QAGBEBAQADAAAAAAAAAAAAAAAAAQACEUH/2gAMAwEAAhEDEQA/ADxWwre0moMbXgI6arxD5Wlir2Mt30QXnJWEY5eDjGRG4u7/2Q=="
}
},
{
"alt": "This is a test image",
"basename": "test-color-pattern",
"blurhash": "LFI#u+.4p1+7TfS~bnVc~pVzIqTu",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHCw4RCg4TEAoPDg4ODQkPDxMNFg0YFxUZGBYVFiEaHzcjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIiY1Ly87Oy8vLy8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABIAGAMBIgACEQEDEQH/xAAaAAACAgMAAAAAAAAAAAAAAAAABAEDAgUG/8QAGhAAAwEAAwAAAAAAAAAAAAAAAAIDAQQFFP/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAD/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIxIQMREyJh/9oADAMBAAIRAxEAPwDqPWotfsEQwaDZgjfhUqA5JSyZRfJ4Op2CuAhLhPIgdsnQGqu2Df1KlzCQI9WyhFdswAAqhQt2f//Z",
"exifInfo": {},
"customData": {},
"copyright": null,
"filename": "test-color-pattern.jpg",
"focalPoint": {
"x": 0.51,
"y": 0.77
},
"height": 993,
"id": "17437392",
"mimeType": "image/jpeg",
"size": 120001,
"smartTags": [
"text",
"label"
],
"tags": [],
"title": null,
"url": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg",
"width": 1300,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.25 325w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.5 650w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.75 975w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg 1300w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.25&fm=webp 325w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.5&fm=webp 650w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?dpr=0.75&fm=webp 975w,https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg?fm=webp 1300w",
"sizes": "(max-width: 1300px) 100vw, 1300px",
"src": "https://www.datocms-assets.com/44232/1623445368-test-color-pattern.jpg",
"width": 1300,
"height": 993,
"aspectRatio": 1.309164149043303,
"alt": "This is a test image",
"title": null,
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHCw4RCg4TEAoPDg4ODQkPDxMNFg0YFxUZGBYVFiEaHzcjGh0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHC8oIiY1Ly87Oy8vLy8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABIAGAMBIgACEQEDEQH/xAAaAAACAgMAAAAAAAAAAAAAAAAABAEDAgUG/8QAGhAAAwEAAwAAAAAAAAAAAAAAAAIDAQQFFP/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAD/xAAdEQACAgEFAAAAAAAAAAAAAAAAAQIxIQMREyJh/9oADAMBAAIRAxEAPwDqPWotfsEQwaDZgjfhUqA5JSyZRfJ4Op2CuAhLhPIgdsnQGqu2Df1KlzCQI9WyhFdswAAqhQt2f//Z"
}
},
{
"alt": "Black ash basket",
"basename": "black-ash-basketexhibitions022021item-2833",
"blurhash": "LADRD}t75SI;wvI;$%s.0~Eg%0xZ",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEAgNDRAKDg0NCA0ODhEaFg4YFxUZGBYVIhUaHysjGh0oHRUiJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHRAQHDsdIhwvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAXAAADAQAAAAAAAAAAAAAAAAAAAwQG/8QAHRAAAQUAAwEAAAAAAAAAAAAAAAECAwQREhMiBf/EABUBAQEAAAAAAAAAAAAAAAAAAAUB/8QAGREAAgMBAAAAAAAAAAAAAAAAABIBAhEh/9oADAMBAAIRAxEAPwDKQ0uxSlfn8G6Jp3GopbLcarA60W0TqmcIXx4uAJns+gIslaD/2Q==",
"exifInfo": {},
"customData": {},
"copyright": null,
"filename": "black-ash-basketexhibitions022021item-2833.jpg",
"focalPoint": {
"x": 0.56,
"y": 0.52
},
"height": 933,
"id": "19320136",
"mimeType": "image/jpeg",
"size": 167285,
"smartTags": [
"basket",
"purse",
"accessories",
"bag",
"handbag",
"accessory"
],
"tags": [],
"title": null,
"url": "https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg",
"width": 1400,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?dpr=0.25 350w,https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?dpr=0.5 700w,https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?dpr=0.75 1050w,https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg 1400w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?dpr=0.25&fm=webp 350w,https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?dpr=0.5&fm=webp 700w,https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?dpr=0.75&fm=webp 1050w,https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg?fm=webp 1400w",
"sizes": "(max-width: 1400px) 100vw, 1400px",
"src": "https://www.datocms-assets.com/44232/1625852224-black-ash-basketexhibitions022021item-2833.jpg",
"width": 1400,
"height": 933,
"aspectRatio": 1.5005359056806002,
"alt": "Black ash basket",
"title": null,
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoIEAgNDRAKDg0NCA0ODhEaFg4YFxUZGBYVIhUaHysjGh0oHRUiJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHRAQHDsdIhwvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAXAAADAQAAAAAAAAAAAAAAAAAAAwQG/8QAHRAAAQUAAwEAAAAAAAAAAAAAAAECAwQREhMiBf/EABUBAQEAAAAAAAAAAAAAAAAAAAUB/8QAGREAAgMBAAAAAAAAAAAAAAAAABIBAhEh/9oADAMBAAIRAxEAPwDKQ0uxSlfn8G6Jp3GopbLcarA60W0TqmcIXx4uAJns+gIslaD/2Q=="
}
},
{
"alt": "A woven tan and red basket. ",
"basename": "pokagon-baskets-secondary-image-cutout",
"blurhash": "L-OWB8xG_No#xafQayj??vW;RPs:",
"blurUpThumb": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0gFhEYIx8lJCIfIiEtKysvKCk0NSEeJEExNDk7PjU+LSJEPkM6SCsxPi8BCgsLDg0OHBAQHDsoIig7Oy87Ozs7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzU7Oy87Ozs7Lzs7O//AABEIABAAGAMBIgACEQEDEQH/xAAXAAEAAwAAAAAAAAAAAAAAAAAHAAUG/8QAIhAAAQIFBAMAAAAAAAAAAAAAAQIEAAMFESEGEhMxBxRB/8QAFQEBAQAAAAAAAAAAAAAAAAAABAP/xAAbEQACAgMBAAAAAAAAAAAAAAABEgAhAxExAv/aAAwDAQACEQMRAD8AUqtVpLFqpRPyDhXkthKqHGVG26262I3tfo4ds1pBwRaCKb4zXOqV+Y8e7q2Yh7ZqjsAwIX7F6j6ikP26VJIIIwREiv07pz0GqJaekiwiRW4Ikbqf/9k=",
"exifInfo": {},
"customData": {},
"copyright": "MORGAN ANDERSON",
"filename": "pokagon-baskets-secondary-image-cutout.png",
"focalPoint": {
"x": 0.49,
"y": 0.52
},
"height": 1333,
"id": "19320627",
"mimeType": "image/png",
"size": 3236106,
"smartTags": [
"basket"
],
"tags": [],
"title": null,
"url": "https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png",
"width": 2000,
"responsiveImage": {
"srcSet": "https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?dpr=0.25 500w,https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?dpr=0.5 1000w,https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?dpr=0.75 1500w,https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png 2000w",
"webpSrcSet": "https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?dpr=0.25&fm=webp 500w,https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?dpr=0.5&fm=webp 1000w,https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?dpr=0.75&fm=webp 1500w,https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png?fm=webp 2000w",
"sizes": "(max-width: 2000px) 100vw, 2000px",
"src": "https://www.datocms-assets.com/44232/1629212638-pokagon-baskets-secondary-image-cutout.png",
"width": 2000,
"height": 1333,
"aspectRatio": 1.5003750937734435,
"alt": "A woven tan and red basket. ",
"title": null,
"base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0gFhEYIx8lJCIfIiEtKysvKCk0NSEeJEExNDk7PjU+LSJEPkM6SCsxPi8BCgsLDg0OHBAQHDsoIig7Oy87Ozs7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzU7Oy87Ozs7Lzs7O//AABEIABAAGAMBIgACEQEDEQH/xAAXAAEAAwAAAAAAAAAAAAAAAAAHAAUG/8QAIhAAAQIFBAMAAAAAAAAAAAAAAQIEAAMFESEGEhMxBxRB/8QAFQEBAQAAAAAAAAAAAAAAAAAABAP/xAAbEQACAgMBAAAAAAAAAAAAAAABEgAhAxExAv/aAAwDAQACEQMRAD8AUqtVpLFqpRPyDhXkthKqHGVG26262I3tfo4ds1pBwRaCKb4zXOqV+Y8e7q2Yh7ZqjsAwIX7F6j6ikP26VJIIIwREiv07pz0GqJaekiwiRW4Ikbqf/9k="
}
}
],
"galleryStyle": "Horizontal Slides"
},
{
"__typename": "HeaderRecord",
"id": "54382924",
"text": "Image Gallery - Scroll",
"level": "2",
"anchor": "image-gallery-scroll"
}
]
And when you map.()
that, each block
would be a single object (i.e. a single image or header or whatever kinda MCF block, with all its data) inside that array.
Hope that makes it clearer…