Preview an externally hosted image in admin

[Margie]

Hi,

I'm currently working on a website that embeds images that are hosted on SmugMug (there are many images already stored there, so there's no sense in uploading them in two places). The unique SmugMug ID is entered in a text field and the template provides the rest of the URL.

Getting the images to display on the website is not a problem. However, I'm wondering if there's a way to get the image to display in the admin interface when editing a page (or at the very least a link to open the image in a new tab)?

I'm assuming this could potentially be achieved with a hook. I've been using PW for a while but I've never used hooks. I've had a look at the documentation on the website but I don't really know where to begin. If someone could point me in the right direction it would be greatly appreciated.

Thanks!

Margaret

[elabx]

The most simple approach I can think of right now is hook into after InputfieldText::render:

Put this code in site/ready.php:

$wire->addHookAfter("InputfieldText::render", function($event){
    $field = $event->object;
    if($field->name == "text_field_name" && $field->value){
        $markup = $event->return;
		$url = "https://somedomain.com";
        $markup .= "<img width='100' src='". $url . $field->value ."'>";
        $event->return = $markup;
    }
});

I'm assuming $url is whatever you need to append to complete the url with the ID in place.

This should render the image right below the text input. If you want to dig a bit more, check the code in the link I pasted and debug with a $log->save() the $markup variable which basically gets it's content from the $event->return property which matches the return value of the render function in the Inpufield code. 

[Autofahrn]

A more complex approach would be a new fieldtype which allow to browse and select through the SmugMug API.

Edit: just found this, which may help to go that way: http://phpsmug.com/

[kongondo]

8 hours ago, Margie said:

I'm assuming this could potentially be achieved with a hook. I've been using PW for a while but I've never used hooks. I've had a look at the documentation on the website but I don't really know where to begin. If someone could point me in the right direction it would be greatly appreciated.

Or you could just use a RuntimeMarkup field ? with WireHttp() and $cache.

I'd never heard of SmugMug before ?.

Here's a demo for how this could be done in RM. We are mimicking a ProcessWire image field by using similar markup and including Image field's JS and CSS. Please see the notes in the code. We are also caching the response for 1 hour so we don't hit SM limits. I created a free 14-day trial account for this. Here it is...I couldn't think of a better name for it ?. As you can see in the demo video, we are pulling the exact images. The code could be improved. You could get all fancy and even push changes to SM using Ajax, for instance.

Please see the examples in RM docs. This code goes into the file you are rendering.

<?php namespace ProcessWire;

// set PW image assets
$url = $config->urls->InputfieldImage;
$config->styles->add($url . "InputfieldImage.css");
// @note: JS just in case you need it but in that case, you will also need Magnific, etc
$config->scripts->add($url . "InputfieldImage.js");

// get cache only if it’s less than or equal to 1 hour old (3600 seconds)
// @note: cache is unique for this page
$cacheName = "smugmug_{$page->id}";
$images = $cache->get($cacheName, 3600);
// no cache or expired, request data from smugmug
if(is_null($images)) {
    // Get an instance of WireHttp
    $http = new WireHttp();
    // we want JSON, so set headers accordingly
    $headers = array('Accept'=>'application/json');
    $http->setHeaders($headers);
    // an example public album
    $url = 'https://www.smugmug.com/api/v2/album/xxxxxx!images';

    $data = array('APIKey'=>'12345678900987654321');// API key
    $response = $http->getJSON($url, true, $data);
    $images = $response['Response']['AlbumImage'];

    // cache the response, and expire after 1 hour (3600 seconds)
    // @note: only caching the albmum!
    $cache->save($cacheName, $images, 3600);
}

// outer list markup for images (c & p from PW with slight modifications)
$out = "<ul class='gridImages ui-helper-clearfix ui-sortable'>";


// iterate through response.
// @todo: You might want to do some error checking first
foreach($images  as $image) {

    // file size to kB
    $fileSize = ceil($image['OriginalSize'] / 1000);

    $out .= "
        <li id='file_{$image['UploadKey']}' class='ImageOuter gridImage ui-widget'>
            <div class='gridImage__tooltip'>
                <table>
                    <tbody>
                        <tr>
                            <th>Dimensions</th>
                            <td>{$image['OriginalWidth']}x{$image['OriginalHeight']}</td>
                        </tr>
                        <tr>
                            <th>Filesize</th>
                            <td>{$fileSize} kB</td>
                        </tr>
                        <tr>
                            <th>Description</th>
                            <td><small>{$image['Title']}</small></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class='gridImage__overflow' style='width: 130px; height: 130px;'>
                <img src='{$image['ThumbnailUrl']}'
                alt='{$image['Caption']}'
                data-w='{{$image['OriginalWidth']}}}' data-h='{{$image['OriginalHeight']}}'
                data-original=''
                style='max-height: 100%; max-width: none; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px);'>
            </div>
            <div class='gridImage__hover'>
                <div class='gridImage__inner'>
                    <label for='' class='gridImage__trash'>
                        <input class='gridImage__deletebox' type='checkbox'
                            name='delete_images_{$image['UploadKey']}' value='1' title='Delete'>
                        <span class='fa fa-trash-o'></span>
                    </label>
                    <a class='gridImage__edit' style='line-height: 130px;'>
                        <span>Edit</span>
                    </a>
                </div>
            </div>
        </li>
    ";


}

$out .= '</ul>';

$out = "<div id='my_album'>{$out}</div>";

return $out;

 

Screenshot

 

Video Demo

 

[Margie]

Oh my goodness, thanks to all of you for your responses. I'll sit down and take a proper look tonight and let you know how I go. This community is so awesome! ?

[Margie]

So I started off with your suggestion @elabx, but I'd forgotten my field is actually a multiplier, not just a straightforward text field. After messing around with it for a while I gave up. I couldn't even get it to look into the array and pull out the first one.

While your suggestion sounds very cool @Autofahrn it's a bit beyond me at this stage. Maybe one day I'll have the confidence to go there...! ?

In the end I used RuntimeMarkup (thanks @kongondo - especially for going to all that effort to set up a trial account!), but in a very basic way. I've just used it to do what I would've done with the method suggested by @elabx if I could've figured out how to correctly hook the multiplier.

The end result is I now have a nice little thumbnail preview of the first specified image showing on my edit screen, which is all I really need at this point. Later on I might look at putting in something a little more advanced.

Thanks once again to all of you. ?

[kongondo]

49 minutes ago, Margie said:

The end result is I now have a nice little thumbnail preview of the first specified image showing on my edit screen, which is all I really need at this point. Later on I might look at putting in something a little more advanced.

Glad you got it sorted :-).

If possible, please post a showcase/use case in the RM thread. I also realised I pointed you to the docs of RM and they are really outdated! Hope you were able to find your way around the setup!