Instagram Feed

Instagram feed on your website

Back to Instagram Feed Support

anthonoff
anthonoff

Hello! Please tell me how to display a certain number of posts and the desired type of content on the site. For example: import the last 12 photos, but exclude carousels and videos. Attempts to implement this through Twig have been unsuccessful.

Darkrogua
Darkrogua

I foresaw during development that someone would use their own ribbon appearance, so I made a second component Instagram feed, and if you look at what it consists of, you can write the following code

{% if arInstagramFeedData != [] %}
    <div class="instagram-feed">
        {% for media in arInstagramFeedData|slice(0,15) if media.media_type != 'VIDEO'%}
        <div class="instagram-media">
            <img src="{{ media.url }}" alt="{{media.description}}">
            <p>{{ media.description }}</p>
        </div>
        {% endfor %}
    </div>
{% else %}
    <h1>Feed is empty!</h1>
{% endif %}
anthonoff
anthonoff

Thank. I tried this option, but it does not fit my task, since unnecessary elements are counted in the number of posts. If you set "slice (0,15)" and 15 posts include 3 videos, then in this case the last 12 are displayed instead of 15.

Darkrogua
Darkrogua

anthonoff said:

Thank. I tried this option, but it does not fit my task, since unnecessary elements are counted in the number of posts. If you set "slice (0,15)" and 15 posts include 3 videos, then in this case the last 12 are displayed instead of 15.

Then add a counter

{% if arInstagramFeedData != [] %}
   {% set countMedia = 0 %}
    <div class="instagram-feed">
        {% for media in arInstagramFeedData if media.media_type != 'VIDEO' and countMedia < 15 %}
        {% set countMedia = countMedia + 1 %}
        <div class="instagram-media">
            <img src="{{ media.url }}" alt="{{media.description}}">
            <p>{{ media.description }}</p>
        </div>
        {% endfor %}
    </div>
{% else %}
    <h1>Feed is empty!</h1>
{% endif %}
anthonoff
anthonoff

Works great! Thank :)

1-5 of 5