Project-Pro/pomysloweprezenty.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Instagram box component to use Splide slider

Browse Source
This commit is contained in:
Jacek Pyziak
2024-10-23 12:57:48 +02:00
parent 85c92aa932
commit eeaa77b244
2 changed files with 47 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
templates_user/components/instagram-box-dev.php
View File

@@ -1,58 +1,54 @@
<?php
require_once "vendor/Yizack/Config.php";
require_once "vendor/Yizack/InstagramFeed.php";
use Yizack\InstagramFeed;
$instagramToken = 'IGQWRPTU9mbHRVUDdBUWVuNE5UWDE2OElwVlp2QVJpWTdWSXNXUzF6X3l4T2FvMV9yNm9nVUcxZA3JLdk5jRllFNmI3c292S00tRldmQ1IwQkZAmM3FYQkFoaFJ0TkxVWDY3QUExWjQxRGI4eGxqMUY1SVl6VWZAzZAXMZD';
$feed = new InstagramFeed($instagramToken);
$instagramToken = 'IGQWROR1p4UFRFS1ZAoQm5BWTZAmYnQ2TXpHVVJoTHdRdVVycEVhRWdzRTJhTHVGa0hmS3VYVjR5MG9URWRETllpbnFOcXBuLU1PQVRYUXdPTjZAMYVFBTEVYQTBuV0twSjI0N2pzZA0JWWVg0SlJuTU5Oa3loTXJNUUkZD';
$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;
}
?>
<div class="box-title">Sprawdź nas na Instagramie</div>
<!-- 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>
<section class="splide" id="instagram-feed-box" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<? foreach($postsData->data as $post): ?>
<?
$postId = $post->id;
$permalink = $post->permalink;
$mediaUrl = $post->media_url;
$mediaType = $post->media_type;
$description = $post->caption;
?>
<li class="splide__slide">
<a href="<?= $permalink; ?>">
<img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: fit-content;">
</a>
</li>
<? endforeach ?>
</ul>
</div>
</section>
<!-- Get instagram card (iframe) -->
<ul>
<? foreach($feed->getFeed() as $value) : ?>
<?
$username = $value["username"];
$permalink = $value["permalink"];
$timestamp = $value["timestamp"];
$caption = "";
<script class="footer" type="text/javascript">
let instagramFeedBox = new Splide("#instagram-feed-box", {
type: "loop",
perPage: 6,
perMove: 1,
gap: 20,
pagination: false,
arrows:true,
breakpoints: {
1400: {
perPage: 5,
},
991: {
perPage: 4,
},
600: {
perPage: 3,
},
500: {
perPage: 2,
},
},
});
if(isset($value["caption"])) {
$caption = $value["caption"];
}
?>
<li class="glide__slide">
<div class="instagram-wrapper"><?= post($username, $permalink, $caption, $timestamp); ?></div>
</li>
<? endforeach; ?>
</ul>
instagramFeedBox.mount();
</script>

54
templates_user/components/instagram-box.php
View File

@@ -1,54 +0,0 @@
<?php
$instagramToken = 'IGQWROR1p4UFRFS1ZAoQm5BWTZAmYnQ2TXpHVVJoTHdRdVVycEVhRWdzRTJhTHVGa0hmS3VYVjR5MG9URWRETllpbnFOcXBuLU1PQVRYUXdPTjZAMYVFBTEVYQTBuV0twSjI0N2pzZA0JWWVg0SlJuTU5Oa3loTXJNUUkZD';
$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));
?>
<div class="box-title">Sprawdź nas na Instagramie</div>
<section class="splide" id="instagram-feed-box" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<? foreach($postsData->data as $post): ?>
<?
$postId = $post->id;
$permalink = $post->permalink;
$mediaUrl = $post->media_url;
$mediaType = $post->media_type;
$description = $post->caption;
?>
<li class="splide__slide">
<a href="<?= $permalink; ?>">
<img src="<?=$mediaUrl; ?>" style="width: 100%; max-width: fit-content;">
</a>
</li>
<? endforeach ?>
</ul>
</div>
</section>
<script class="footer" type="text/javascript">
let instagramFeedBox = new Splide("#instagram-feed-box", {
type: "loop",
perPage: 6,
perMove: 1,
gap: 20,
pagination: false,
arrows:true,
breakpoints: {
1400: {
perPage: 5,
},
991: {
perPage: 4,
},
600: {
perPage: 3,
},
500: {
perPage: 2,
},
},
});
instagramFeedBox.mount();
</script>