oui_instagram - Display Instagram user infos and recent images

NicolasGraph · 2017-01-25 14:23:06

There’s a new beta version available online; it should be the last one and the final version should be out next week.

There are few improvements included in this release but you should mainly care about the fact that oui_instagram_ tags are now deprecated in favour of oui_insta_ shorter tags, that’s why these deprecated tags are not registered anymore and will throw a warning in debug mode.

Otherwise, I kept the same plugin and pref names for better consistency and easy update.

NicolasGraph · 2017-01-30 09:34:30

It’s time to update to v1.0.0!

zenman · 2019-04-25 18:14:08

Thanks Nicolas for the plugin. It works fine.

Question is this: using <txp:oui_insta_image type=“thumbnail” /> I get very small thumbnails (160 × 160 px) whereas Instagram standart thumbnails are 320 × 320. Is there anyway I can change the resolution to improve thumbnails quality on my site?

jakob · 2019-04-25 20:35:02

zenman wrote #317772:

Question: using <txp:oui_insta_image type=“thumbnail” /> I get very small thumbnails (160 × 160 px) whereas Instagram standart thumbnails are 320 × 320. Is there anyway I can change the resolution to improve thumbnails quality on my site?

Try using standard_resolution instead of thumbnail for the type attribute. See the help for oui_insta_images and our_insta_image.

zenman · 2019-04-26 03:06:27

jakob wrote #317773:

Try using standard_resolution instead of thumbnail for the type attribute. See the help for oui_insta_images and our_insta_image.

yes, i see. but they are not always square. i am satisfied with type=“thumbnail” but need larger pics.

jakob · 2019-04-26 07:57:06

zenman wrote #317774:

yes, i see. but they are not always square. i am satisfied with type=“thumbnail” but need larger pics.

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.

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.

Textpattern CMS

Textpattern CMS support forum

#25 2017-01-25 14:23:06

Re: oui_instagram - Display Instagram user infos and recent images

#26 2017-01-30 09:34:30

Re: oui_instagram - Display Instagram user infos and recent images

#27 2019-04-25 18:14:08

Re: oui_instagram - Display Instagram user infos and recent images

#28 2019-04-25 20:35:02

Re: oui_instagram - Display Instagram user infos and recent images

zenman wrote #317772:

#29 2019-04-26 03:06:27

Re: oui_instagram - Display Instagram user infos and recent images

jakob wrote #317773:

#30 2019-04-26 07:57:06

Re: oui_instagram - Display Instagram user infos and recent images

zenman wrote #317774:

#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:

Board footer