0

I'm trying to make a basic gallery and I'm struggling printing the caption of the images from a JSON file I have on top of each image. It's only printing the first value in the JSON file.

Here's an example picture of what I'm talking about:

Example Gallery

Here's the PHP code I'm using:

$feed_dir = file_get_contents(__DIR__ . "/scripts/instagram/feed/feed.json");
$json = json_decode($feed_dir, true);

// (B) GET LIST OF IMAGE FILES FROM GALLERY FOLDER
$dir = __DIR__ . DIRECTORY_SEPARATOR . "scripts/instagram/feed" . DIRECTORY_SEPARATOR;
$images = glob($dir . "*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);

// (C) OUTPUT IMAGES
foreach ($json['GraphImages'] as $obj)
{
    $feed_caption = $obj['edge_media_to_caption']['edges']['0']['node']['text'];

    foreach (array_reverse($images) as $i)
    {
        printf("<div id='container' style='position: relative;'><img src='scripts/instagram/feed/%s'/><span style='font-size: 20px; color: #FFF; position: absolute; top: 100px; left: 20px;'>" . $feed_caption . "</span></div>", basename($i));
    }
    break;
}

And here's the JSON file I'm using:

{
    "GraphImages": [
        {
            "edge_media_to_caption": {
                "edges": [
                    {
                        "node": {
                            "text": "featuring dropping on all platforms October 22nd!"
                        }
                    }
                ]
            }
        },
        {
            "edge_media_to_caption": {
                "edges": [
                    {
                        "node": {
                            "text": "My new album “lostnfound” is coming soon! 14 tracks with a lot of awesome features. Also, a music video. I spent over a year on this album and I’m glad it’s finally almost finished. I put everything into this album. I’ll be dropping the track list in the next upcoming week. Love you all ✌️ ❤️"
                        }
                    }
                ]
            }
        },
        {
            "edge_media_to_caption": {
                "edges": [
                    {
                        "node": {
                            "text": "lovelu$t EP with @yungscythe TBD"
                        }
                    }
                ]
            }
        },
        {
            "edge_media_to_caption": {
                "edges": [
                    {
                        "node": {
                            "text": "shoutout"
                        }
                    }
                ]
            }
        }
    ]
}
thinkerbot
  • 13
  • 4
  • You are `break`ing after the first found item. – mickmackusa Oct 16 '21 at 23:56
  • @mickmackusa Now it prints each picture and slogan 4 times. It does print all the slogans this time, though. Any suggestions? – thinkerbot Oct 17 '21 at 01:13
  • You should not be nesting the `$images` loop inside of the `$json` loop. If these two payloads of data are meant to be related, then find a way to relaye them -- susch as iterating one and accessing the other during the same loop. Also, read the documentation on `printf()` -- I like that you are using it, but you are not using it properly with placeholders. – mickmackusa Oct 17 '21 at 01:48
  • Hey @mickmackusa I'm still struggling to figure this out. Is there any way you could show me an example? – thinkerbot Oct 22 '21 at 17:31
  • I don't see how `$json['GraphImages']` relates to `images`. In truth, they don't seem to be related to me. Perhaps simply the problem/question by presenting these two arrays (from the text generated by `var_export()`), then explain how _you_ want to relate the values from each array. I don't need any screenshorts, I want to know what the desired result is as generated html markup. – mickmackusa Oct 22 '21 at 20:32

0 Answers0