oui_instagram - Display Instagram user infos and recent images

zenman · 2019-04-26 09:08:19

jakob wrote #317775:

Ah, that’s probably because not all the instagram shots are square. I’m not an instagram user, but from looking around, I see conflicting information. Some say you can get a cropped square image by modifying the url of the image, others say that no longer works. See, for example here and here (note: on medium). Some provide some code that could be patched into the plugin, but I’m not sure if those tips still work (the first of those posts, for example, has broken demo images).

What should work regardless is to use the large image size and then use CSS object-fit: cover; to constrain the large image cropped in a square container. More details and examples here. The main payoff is your motif may not always be in the centre of the crop.

Well, I would not dare to mess with the TXP plugin code. I assume the above instructions are about using instafeed.min.js. I will try object-fit: cover; though

jakob · 2019-04-26 09:29:48

I did mean the plugin code. If the src url alteration tips described in the tips above do still work, you would add a few lines to the getImage function in oui_instagram between line 199 where the image src is retrieved from the instagram feed and line 211 where it is used to output the img tag.

Using CSS’s object-fit: cover; sidesteps all that, though :-)

zenman · 2019-04-26 09:33:15

jakob wrote #317777:

I did mean the plugin code. If the src url alteration tips described in the tips above do still work, you would add a few lines to the getImage function in oui_instagram between line 199 where the image src is retrieved from the instagram feed and line 211 where it is used to output the img tag.

Using CSS’s object-fit: cover; sidesteps all that, though :-)

Ок, I will try. Many thanks!

zenman · 2019-04-27 11:54:01

jakob wrote #317777:

I did mean the plugin code. If the src url alteration tips described in the tips above do still work, you would add a few lines to the getImage function in oui_instagram between line 199 where the image src is retrieved from the instagram feed and line 211 where it is used to output the img tag.

Using CSS’s image-crop: cover; sidesteps all that, though :-)

I think, image-crop: cover (you mean object-fit: cover;?) requires a fixed height, otherwise it will not work. I this case a picture remains always 200px…, for example…

Do you think the place where I have added the code from the article is right?

public static function getImage($shot, $type = 'thumbnail', $link = 'auto')
        {
            $src = 'src="' . $shot->{'images'}->{$type}->{'url'}.'" ';
            $width = 'width="' . $shot->{'images'}->{$type}->{'width'}.'" ';
            $height = 'height="' . $shot->{'images'}->{$type}->{'height'}.'" ';
           /**************** added ***********************/
           $thumbnail_url = $post->images->thumbnail->url;
           $thumbnail_url = str_replace('s150x150/', 's320x320/', $thumbnail_url);
           $thumbnail_url = preg_replace('/vp\/[^\/]*/', 'hphotos-xfp1', $thumbnail_url);
            /**************** end of the added ***********************/
            if (isset($shot->{'caption'}->{'text'})) {
                $alt = 'title="' . $shot->{'caption'}->{'text'}.'" ';
            } else {
                $alt = ' ';
            }
            $title = $alt;
            $url = ($link === 'auto') ? $shot->{'link'} : $shot->{'images'}->{$type}->{'url'};
            $img = '<img ' . $src . $alt . $width . $height . '/>';
            return $link ? href($img, $url, $title) : $img;
        }

jakob · 2019-04-27 15:34:26

zenman wrote #317785:

I think, image-crop: cover (you mean object-fit: cover;?) requires a fixed height, otherwise it will not work. I this case a picture remains always 200px…, for example…

Duh, yes, of course I meant object-fit: cover;. I’ve corrected that above. Thanks for spotting that.

To maintain the aspect ration with css without specifying an explicit height, you can use the padding-bottom aspect-ratio trick:

<div class="container">
  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg" />
</div>

with this css:

.container {
  position: relative;
  display: block;
  width: 33%;
}

.container::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}

.container > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100%;
  height: 100%;
}

.object-fit-cover {
  object-fit: cover;
}

changing the 33% to match whatever width you want. The width: 100%; padding-bottom: 100%; keeps it as a pure square aspect ratio. Change the value for padding-bottom to get another aspect ratio. You can play with the above in this codepen.

jakob · 2019-04-27 15:42:29

zenman wrote #317785:

Do you think the place where I have added the code from the article is right?

No, you need to match up the variables.

public static function getImage($shot, $type = 'thumbnail', $link = 'auto')
{
    $src = 'src="' . $shot->{'images'}->{$type}->{'url'}.'" ';
    $width = 'width="' . $shot->{'images'}->{$type}->{'width'}.'" ';
    $height = 'height="' . $shot->{'images'}->{$type}->{'height'}.'" ';

    if (isset($shot->{'caption'}->{'text'})) {
        $alt = 'title="' . $shot->{'caption'}->{'text'}.'" ';
    } else {
        $alt = ' ';
    }

    // MOD: rewrite img src to use higher-resolution square
    $thumb_url = $shot->{'images'}->{$type}->{'url'};
    $thumb_url = str_replace('s150x150/', 's320x320/', $thumb_url);
    $thumb_url = preg_replace('/vp\/[^\/]*/', 'hphotos-xfp1', $thumb_url);
    $src = 'src="' . $thumb_url . '" ';
    // END MOD

    $title = $alt;
    $url = ($link === 'auto') ? $shot->{'link'} : $shot->{'images'}->{$type}->{'url'};
    $img = '<img ' . $src . $alt . $width . $height . '/>';

    return $link ? href($img, $url, $title) : $img;
}

This all presupposes that those URL patterns still work. You might want to check that by manually typing in the corrected thumbnail urls into the browser beforehand.

zenman · 2019-04-28 08:57:27

jakob wrote #317787:

Duh, yes, of course I meant object-fit: cover;. I’ve corrected that above. Thanks for spotting that.

To maintain the aspect ration with css without specifying an explicit height, you can use the padding-bottom aspect-ratio trick:

<div class="container">...

with this css:

.container {...

changing the 33% to match whatever width you want. The width: 100%; padding-bottom: 100%; keeps it as a pure square aspect ratio. Change the value for padding-bottom to get another aspect ratio. You can play with the above in this codepen.

Oh Thanks! I tried the CSS with the cover. It works well – https://lpgtectonica.ru

I used instafeedjs plugin instead of oui_instagram. But I will switch back to oui_instagram having the css method. Easier to edit.

<script src="../js/instafeed.min.js"></script>
<script type="text/javascript">
var userFeed = new Instafeed({
    target: 'instafeed',
    get: 'user',
    userId: 'xxxxxxx',
    clientId: 'xxxxxxxxx',
    accessToken: 'xxxxxxxxxx',
    limit: '8',
    sortBy: 'most-recent',
    resolution: 'standard_resolution',   
    template: '<div class="col-lg-4 col-sm-6 col-xl-3 mb-2"><div class="overlay-container insta"><img class="object-fit-cover" src="{{image}}" /><div class="overlay-top"><div class="text"><p class="small">{{caption}}</p></div></div><div class="overlay-bottom"><div class="links"><a rel="nofollow" target="_blank" href="{{link}}" class="btn btn-gray-transparent btn-animated btn-sm">More</a></div></div></div></div>'
});
userFeed.run();
</script>
/*** pics output ***/
<div class="row mt-2" id="instafeed"></div>


<style>
.insta {
  position: relative;
  display: block;
  /*width: 33%;*/
}
.insta::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}
.insta > img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:100%;
  height: 100%;
}
.object-fit-cover {
  object-fit: cover;
}
</style>

Last edited by zenman (2019-04-28 09:08:22)

Gallex · 2019-06-28 12:40:29

zenman wrote #317798:

Oh Thanks! I tried the CSS with the cover. It works well – https://lpgtectonica.ru

where exactly on a page, i can’t see…

admi · 2019-06-28 14:26:10

Gallex wrote #318590:

where exactly on a page, i can’t see…

it is not on the TXP site homepage now.
see old html page index.html

Last edited by admi (2019-06-28 14:27:47)

Gallex · 2019-07-08 12:29:16

please take a look inside <section class="content-3 bg-2"> at this page

can anybody tell me, where comes those extra <p></p> before and after <div class="insta-user"> ?

my form:

<div class="insta-wrapper">
<txp:oui_insta_author break="" access_token="5603.....">
 <div class="insta-user">
    <txp:oui_insta_author_info type="avatar" link="instagram" wraptag="div" class="avatar" />
    <txp:image class="instalogo" escape="" id="821" />
    <txp:oui_insta_author_info type="username" link="instagram" />
</div>
</txp:oui_insta_author>
<txp:oui_insta_images limit="18" class="oui-insta" access_token="5603304411.1677ed0.9880764e267f4969a78dbf9ab49ffe49">
    <txp:oui_insta_image_url link="1"><txp:oui_insta_image type="thumbnail" /></txp:oui_insta_image_url>
</txp:oui_insta_images>
</div>

colak · 2019-07-08 14:15:42

Your form is a miscellaneous form? How do you call it in the article? If it is via the write tab you many need to add a space. ie


 <txp::your_form />

Gallex · 2019-07-09 06:35:05

colak wrote #318657:

Your form is a miscellaneous form? How do you call it in the article? If it is via the write tab you many need to add a space. ie

...

yes, it is a miscellaneous and i call it via page template <txp:output_form form="oui_insta" />

colak · 2019-07-09 18:22:23

Hmmm.. It is indeed strange. Maybe change
<txp:oui_insta_author break="" access_token="5603.....">
to
<txp:oui_insta_author break="" wraptag="" access_token="5603.....">

Gallex · 2019-07-10 06:31:04

colak wrote #318667:

Hmmm.. It is indeed strange. Maybe change
<txp:oui_insta_author break="" access_token="5603.....">
to
<txp:oui_insta_author break="" wraptag="" access_token="5603.....">

genius! ;)

peterj · 2020-02-19 08:01:55

I just found out that the current Instagram API will cease to work on March 2nd 2020, which is quite soon… Looking at the instafeed.js github and pixel union’s access token service , everyone is packing up and going home.

How are people dealing with this – I can’t see an affordable way to keep a person’s instagram feed displaying on a TXP site.

Textpattern CMS support forum

#31 2019-04-26 09:08:19

Re: oui_instagram - Display Instagram user infos and recent images

jakob wrote #317775:

#32 2019-04-26 09:29:48

Re: oui_instagram - Display Instagram user infos and recent images

#33 2019-04-26 09:33:15

Re: oui_instagram - Display Instagram user infos and recent images

jakob wrote #317777:

#34 2019-04-27 11:54:01

Re: oui_instagram - Display Instagram user infos and recent images

jakob wrote #317777:

#35 2019-04-27 15:34:26

Re: oui_instagram - Display Instagram user infos and recent images

zenman wrote #317785:

#36 2019-04-27 15:42:29

Re: oui_instagram - Display Instagram user infos and recent images

zenman wrote #317785:

#37 2019-04-28 08:57:27

Re: oui_instagram - Display Instagram user infos and recent images

jakob wrote #317787:

#38 2019-06-28 12:40:29

Re: oui_instagram - Display Instagram user infos and recent images

zenman wrote #317798:

#39 2019-06-28 14:26:10

Re: oui_instagram - Display Instagram user infos and recent images

Gallex wrote #318590:

#40 2019-07-08 12:29:16

Re: oui_instagram - Display Instagram user infos and recent images

#41 2019-07-08 14:15:42

Re: oui_instagram - Display Instagram user infos and recent images

#42 2019-07-09 06:35:05

Re: oui_instagram - Display Instagram user infos and recent images

colak wrote #318657:

#43 2019-07-09 18:22:23

Re: oui_instagram - Display Instagram user infos and recent images

#44 2019-07-10 06:31:04

Re: oui_instagram - Display Instagram user infos and recent images

colak wrote #318667:

#45 2020-02-19 08:01:55

Re: oui_instagram - Display Instagram user infos and recent images

Board footer