Bring in a Thumbnail for a URL field

[thmsnhl]

Hi, I'm currently working on a small blog for a friend of mine, he wants to use external images as title Images in his posts and therefore I need some kind of backend gallery, to collect all URLs.

To make this a little bit more manageable I want to include a thumbnail in the backend next to the URL field.

Now I'm asking myself some things:

1. Is there a solution already? I searched the forums and fieldtypes for something like this but did not find one.
2. How can I create my own fieldtype to solve this problem? Maybe there is a "mix and match"-solution with URL- and Image-Fieldtype?!

I'm thankful for every answer!

Cheers, Tommy

[LostKobrakai]

You could just hook the render function of InputfieldUrl and add an image tag before the input for that exact field. This would be the laziest of methods.

[thmsnhl]

Thank you for the quick response.

Could you explain a little more in detail where I have to define this hook and what has to be in there to render an image?
I checked the module files for about an hour and still I'm not sure where to put my own code.

[Peter Knight]

Do you mean that in the Admin you want a thumbnail beside the title?

[thmsnhl]

Yes, exactly Peter. 

[horst]

I'm not completely sure if this is possible within the admin, but I think yes: one way can be to build a simple little module, another way can be to use one of the new implemented _ready.php | _install.php etc. files, if you use the one of the latest dev versions (PW 2.6.9+ ??)

But regardless of that, you need to hook into after InputfieldURL::render

Within your function you fetch the result ($event->return) and the url, if any given and prepend an image tag to the result.

pseudo code, simplified:

$url = ... ; // you need to fetch the url here
$event->return = "<img src='{$url}' width='100' alt='' />" . $event->return;
$event->replace = true;

.

EDIT:

After rethinking it, I think you need to build a little custom module and cannot use the new _ready.php etc. files, but would be nice if some one can clarify this more precisly than I currently can.

Edited July 30, 2015 by horst

[Sergio]

Take a look at this module by Adrian -> http://modules.processwire.com/modules/process-get-video-thumbs/

I think you can adapt it to your use case.

Also, maybe it is worth to study the Embed.ly API http://embed.ly/

[LostKobrakai]

wire()->addHookAfter('InputfieldURL::render', function($event) {
  $field = $event->object;

  if($field->name != "yourField") return;

  $url = $field->value;
  if($url) return $event->return = "<img src='$url' width='100' alt='' />" . $event->return;
});

This should do the job pasted at the beginning of site/templates/admin.php.

[Peter Knight]

Yes, exactly Peter. 

Soma has a Module called Page List Image Label. Would that work?

You could also try the ListerPro module (paid but very reasonably priced) where you can create a custom view of lists of pages arranged by columns.

One of those columns could be an image associated with a page. Next column could be the title.

[thmsnhl]

Thank you LostKobraKai, this worked straightaway.

This community is awesome!