Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

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

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

Re: oui_instagram - Display Instagram user infos and recent images

It’s time to update to v1.0.0!


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: oui_instagram - Display Instagram user infos and recent images

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?

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,743
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.


TXP Builders – finely-crafted code, design and txp

Online

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,743
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.


TXP Builders – finely-crafted code, design and txp

Online

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: oui_instagram - Display Instagram user infos and recent images

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

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,743
Website

Re: oui_instagram - Display Instagram user infos and recent images

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


TXP Builders – finely-crafted code, design and txp

Online

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: oui_instagram - Display Instagram user infos and recent images

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!

Offline

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

zenman
Member
Registered: 2017-08-28
Posts: 41
Website

Re: oui_instagram - Display Instagram user infos and recent images

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;
        }

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,743
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.


TXP Builders – finely-crafted code, design and txp

Online

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,743
Website

Re: oui_instagram - Display Instagram user infos and recent images

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.


TXP Builders – finely-crafted code, design and txp

Online

Board footer

Powered by FluxBB