modInstagram2

modInstagram2

modstore.pro: https://modstore.pro/packages/photos-and-files/modinstagram2

Подробная документация и инструкция по получению токена в modstore.pro.

Результат работы

Компонент позволяет выводить на сайте последние посты из Instagram с использованием Basic Display API.

Пример использования:


[[!modInstagram2?
    &limit=`21`
    &showLog=`1`
    &tpl=`tpl.modInstagram2.item.custom`
]]


{if ($idx - 1) % 3 == 0}
    <div class="row">
{/if}
    <div class="col-12 col-md-4 mb-4 in-item">
        <div class="card">
            {switch $media_type}
                {case 'CAROUSEL_ALBUM'}
                    <div id="carouselInstagram{$idx}" class="carousel slide">
                        <div class="carousel-inner">
                            {foreach $children.data as $item}
                                <div class="carousel-item {$item@index == 0 ? 'active' : ''}">
                                    <a data-fancybox="instagram" href="{$item.media_url}">
                                        {if $item.media_url | preg_match : '(.mp4)Ui' }
                                            <video class="card-img-top" width="100%" controls="controls">
                                                <source src="{$item.media_url}" type="video/mp4">
                                            </video>
                                        {else}
                                            {set $img = '!pthumb' | snippet : [
                                                'input' => $item.media_url,
                                                'options' => 'w=400',
                                            ]}
                                            <img class="d-block w-100" src="{$img}" alt="">
                                        {/if}
                                    </a>
                                </div>
                            {/foreach}
                        </div>
                        <a class="carousel-control-prev" href="#carouselInstagram{$idx}" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Предыдущий</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselInstagram{$idx}" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Следующий</span>
                        </a>
                    </div>
                {case 'VIDEO'}
                    <a data-fancybox="instagram" href="{$media_url}">
                        <video class="card-img-top" width="100%" controls="controls">
                            <source src="{$media_url}" type="video/mp4">
                        </video>
                    </a>
                {case default}
                    {set $img = '!pthumb' | snippet : [
                        'input' => $media_url,
                        'options' => 'w=400',
                    ]}
                    <a data-fancybox="instagram" href="{$media_url}">
                        <img class="card-img-top" src="{$img}" alt="">
                    </a>
            {/switch}
        	<div class="card-body">
        		<h6 class="card-subtitle mb-2 text-muted">{$timestamp | date : 'd.m.Y'}</h6>
        		<p class="card-text">{$caption | strip : true | truncate : 100}</p>
        		<a href="{$permalink}" class="btn btn-primary" target="_blank" rel="nofollow">Подробнее</a>
        	</div>
        </div>
    </div>
{if $idx % 3 == 0}
    </div>
{/if}

Результат работы Basic Display API:

24.10.2020

Купабельно 👌#lycianway #likyayolu

Подробнее
23.10.2020

Маяк на мысе Геледонья. Вэри инстаграммабл. #turkey #gelidonyafeneri @accidentallywesanderson

Подробнее
16.10.2020

Особняки остова Büyükada. Части архипелага Принцевы острова. #turkey #adalar

Подробнее
15.10.2020

Очень уютный район Arnavutköy с деревянными османскими особняками. #turkey #istanbul

Подробнее
14.10.2020

Мечеть Сулеймание - отличный вид на город и залив, всегда мало туристов. #turkey #istanbul

Подробнее
09.10.2020

Немного карточек с Ликийской тропы #turkey #likyayolu #lycianway

Подробнее
07.10.2020

Олюдениз, начало Ликийской тропы.

Подробнее
02.10.2020

Уральская осень, как всегда, радует #southural #chelyabinsk

Подробнее
28.09.2020

Индустриальные и природные красоты Саткинского района.

Подробнее
12.09.2020

Веломарофон чистой воды

Подробнее
02.08.2020

Незаслуженно обделённый вниманием туристов хребет Уреньга. Особенно хорош, если не просто взойти на ...

Подробнее
13.07.2020

Река Миасс примерно в 40 километрах от своего истока за миллионы лет пробила путь в известняках, обр...

Подробнее
12.07.2020

Тургоякское рудоуправление

Подробнее
04.07.2020

Тайгинский карьер #ural #southural

Подробнее
01.07.2020

Очередной необычный маршрут на велике от @zavbus

Подробнее
26.06.2020

Санаторий УралВО

Подробнее
21.06.2020

Вокруг Тургояка на велике #zavbusteam @zavbus

Подробнее
31.05.2020

Черная скала #taganay_park #southural

Подробнее