<?php
    require_once "vendor/Yizack/Config.php";
    require_once "vendor/Yizack/InstagramFeed.php";

    use Yizack\InstagramFeed;

    $instagramToken = 'IGQWRPTU9mbHRVUDdBUWVuNE5UWDE2OElwVlp2QVJpWTdWSXNXUzF6X3l4T2FvMV9yNm9nVUcxZA3JLdk5jRllFNmI3c292S00tRldmQ1IwQkZAmM3FYQkFoaFJ0TkxVWDY3QUExWjQxRGI4eGxqMUY1SVl6VWZAzZAXMZD';
    $feed = new InstagramFeed($instagramToken);
    $postsData = json_decode(file_get_contents('https://graph.instagram.com/me/media?limit=25&fields=thumbnail_url,permalink,media_url,media_type,caption&access_token=' . $instagramToken));
?>

<?
    function post($username, $permalink, $caption, $timestamp) {
        $html = '<blockquote class="instagram-media" data-instgrm-permalink="' . $permalink . '" data-instgrm-captioned data-instgrm-version="13">';
        $html .= '<a href="' . $permalink . '"></a>';
        $html .= '</blockquote>';
        $html .= '<script async src="//www.instagram.com/embed.js"></script>';
        return $html;
    }
?>

<!-- Get only image -->
<ul>
    <? foreach($postsData->data as $post): ?>
        <?
            $postId = $post->id;
            $permalink = $post->permalink;
            $mediaUrl = $post->media_url;
            $mediaType = $post->media_type;
            $description = $post->caption;
        ?>
        <li>
            <a href="<?= $permalink; ?>">
                <img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: 200px;">
            </a>
        </li>
    <? endforeach ?>
</ul>

<!-- Get instagram card (iframe) -->
<ul>
    <? foreach($feed->getFeed() as $value) : ?>
        <?
            $username = $value["username"];
            $permalink = $value["permalink"];
            $timestamp = $value["timestamp"];
            $caption = "";

            if(isset($value["caption"])) {
            $caption = $value["caption"];
            }
        ?>

        <li class="glide__slide">
            <div class="instagram-wrapper"><?= post($username, $permalink, $caption, $timestamp); ?></div>
        </li>
    <? endforeach; ?>
</ul>
