How can I use third party class in EE to render instagram images on templates?

Question

I have been using an instagram class in projects for Laravel and other small php sites and it has seemed to work well. I include a require_once in my functions file. I then create a function that calls the instagram class and then in my template I call the function and it works.

This is the instagram class on github: https://github.com/cosenary/Instagram-PHP-API

Heres a simple example on a recent wp site I did:

The function

require_once('includes/instagram.class.php');

function get_instagram_image() {

    $instagram = new Instagram('253daacbd2b849dd9d1255ecf26088b7');
    $name = 'Ahastag';
    $result = $instagram->getTagMedia($name);

    foreach ($result->data as $media) {
            $content = "<li class='col5-1'>";

            // output media
            if ($media->type === 'video') {
              // video
              $poster = $media->images->standard_resolution->url;
              $source = $media->videos->standard_resolution->url;
              $content .= "<video class=\"media video-js vjs-default-skin\" width=\"250\" height=\"250\" poster=\"{$poster}\"
                           data-setup='{\"controls\":true, \"preload\": \"auto\"}'>
                             <source src=\"{$source}\" type=\"video/mp4\" />
                           </video>";
            } else {
              // image
              $image = $media->images->standard_resolution->url;
              $content .= "<img class=\"media\" src=\"{$image}\"/>";
            }

            // create meta section
            $avatar = $media->user->profile_picture;
            $username = $media->user->username;
            $comment = $media->caption->text;
            $content .= "<div class=\"content\">
                           <div class=\"avatar\" style=\"background-image: url({$avatar})\"></div>
                           <h3>{$username}</h3>
                           <div class=\"comment\"><p>{$comment}</p></div>
                         </div>";

            // output media
            echo $content . "</li>";
          }

}

What I used in the template

<?php get_instagram_image(); ?>

Now I am trying to do the same in Expression Engine. I am aware of libraries/addons etc but I am struggling to keep it as simple as I have done in WP above and I am sure it can be as its only a php script at the end of the day.

What I want to do is either create a plugin or new ee class that does exactly what I have done above but in my ee templates and frontend.

Can anyone point me in the right direction? I want to develop my own and not use one already out there because I want to keep as clean as possible and not overly bloated and complex.

Thanks

Answer 1

What you have there you can almost just wrap in a plugin. Start by reading the plugin development docs.

However, you can probably simplify your code - and make it more flexible - by instead of building your output markup inside of the plugin, populating an array of data, then returning it to the template, where you use EE variables to create your markup.

Read the docs on the Template class for an overview of how this works.

Here's a real quick bit of code as an example:

$vars = array();
foreach ($result->data as $media)
{
    $vars[] = array(
        'type' => $media->type,
        'image' => $media->images->standard_resolution->url,
        'video' => $media->videos->standard_resolution->url,
        'avatar' => $media->user->profile_picture,
        'username' => $media->user->username,
        'comment' => $media->caption->text
    );
}
return ee()->TMPL->parse_variables(ee()->TMPL->tagdata, $vars);

Then you can use this in your template:

{exp:my_plugin:instagram_image}
    {if type == 'video'}
        // build your video embed using the above variables ({source}, {image}, etc)
    {/if}
    {if type == 'image'}
        <img src="{image}" alt="{caption}" />
    {/if}
{/exp:my_plugin:instagram_image}