Closed travisjupp closed 1 month ago
Posts may contain image galleries with multiple image sources that Reddit displays using a carousel.
From the data below create a Gallery.jsx component that uses a React-bootstrap Carousel component to responsively render the images from a srcset.
Gallery.jsx
srcset
Truncated post with gallery sample:
{ "is_gallery": true, "media_metadata": { "q95xb7sm1kdd1": { "status": "valid", "e": "Image", "m": "image/jpg", "p": [ { "y": 81, "x": 108, "u": "https://pre" }, { "y": 162, "x": 216, "u": "https://pre" } ], "s": { "y": 4284, "x": 5712, "u": "https://previ" }, "id": "q95xb7sm1kdd1" }, "wgcfd9sm1kdd1": { "status": "valid", "e": "Image", "m": "image/jpg", "p": [ { "y": 81, "x": 108, "u": "https://pre" }, { "y": 162, "x": 216, "u": "https://pre" } ], "s": { "y": 3024, "x": 4032, "u": "https://previ" }, "id": "wgcfd9sm1kdd1" } }, "media_embed": { }, "secure_media_embed": { }, "gallery_data": { "items": [ { "caption": "", "outbound_url": "", "media_id": "q95xb7sm1kdd1", "id": 488934070 }, { "caption": "", "outbound_url": "", "media_id": "wgcfd9sm1kdd1", "id": 488934071 } ] } }
Note: Image source urls' html entities need to be decoded.
See data/gallery/postWithGallery.json for a post from "r/Home" with full JSON structure.
data/gallery/postWithGallery.json
Posts may contain image galleries with multiple image sources that Reddit displays using a carousel.
From the data below create a
Gallery.jsx
component that uses a React-bootstrap Carousel component to responsively render the images from asrcset
.Truncated post with gallery sample:
Note: Image source urls' html entities need to be decoded.
See
data/gallery/postWithGallery.json
for a post from "r/Home" with full JSON structure.