travisjupp / reddit-client

Reddit client
3 stars 0 forks source link

Post image gallery #19

Closed travisjupp closed 1 month ago

travisjupp commented 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.

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.