Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

zenman
Member
Registered: 2017-08-28
Posts: 36
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: 3,426
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

Offline

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

zenman
Member
Registered: 2017-08-28
Posts: 36
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: 36
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: 3,426
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

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 3,426
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

Offline

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

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

Re: oui_instagram - Display Instagram user infos and recent images

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)

Offline

Board footer

Powered by FluxBB