Release: InputfieldFlickr

[apeisa]

Quick screencast: http://screencast.com/t/7uLnAgD1SkP

Grab the code: https://github.com/apeisa/InputfieldFlickr

Not production ready, since it doesn't save authors name nor url anywhere (and most of the Creative Commons licenses require attribution by name or link). I will develop this further soon, but decided to post this already since it is pretty nice to play with. Especially if you are building site with lots of images and need to test with placeholder images, then this is easy way to grab those quickly.

Code is not prettiest and there are many places to improve, but this is my first "independent" module, meaning that it is developed without Ryan's direct input. So I am kind a proud of this one

[ryan]

Thanks for making this, i can't wait to check this one out when I get back! Congrats on this module, based on the video I saw before, this is a pretty awesome thing you've put together.

[slkwrm]

@Apeisa I tried your module yesterday, added some cool pics to my test site Working great! Do you think about implementing some kind of pagination? How long did it take you to write it?

[apeisa]

Ryan thanks! Now get back to your holidays man!

slkwrm: Thanks, glad you tried it and all worked. I was thinking about pagination and might do that at some point, but for my current needs (one personal project where I need this) this works very well now  (takes max 100 images and loads them asynchronously).

As what coding took. PHP code required very little time, and that was super easy. I had working "load image from url" module in under 2 hours. And this was my first inputfield, so took some time to look and learn how these work. Before this I spend also little time to understand what inputfield does compared to fieldtype (I somehow first thought that fieldtype saves values to db process their own input (see ryan's clarification), but it is inputfield what does that).

Then JS coding.. it was little bit harder. I have done some ajax coding and used few JSONP APIs before, but this one was little harder beast than earlier ones I have done. I thought this one would be one ajax call, and looping through results, but it required a little bit more... Flickr has nice API (especially the documentation), but I had to create 3 different calls - and as they are asynchronous - it took a lot of trial and error to get all working. First call to get image ID:s, then loop images and from inside that loop 2 more calls for each images separately (one for image sizes and another one for details like description & author - the latter is not yet done btw). Right after all information for one image is found => draw image.

Probably never done anything that complicated with js/ajax before (still learning the basics), but it ended up pretty well (the actual code is not probably very nice, but at least it works ). I didn't find any tutorial that would worked for me, so I made a lot of mistakes first. That took probably one full work day (7,5 hours - not sure since I developed at the night time few hours at time). And probably finishing this takes few more hours - so probably something like total 2 days of work.

But what is important here is that most of the time this took was me reading and learning javascript. Nothing to do with Processwire - that part was super quick.

[ryan]

Before this I spend also little time to understand what inputfield does compared to fieldtype (I somehow first thought that fieldtype saves values to db, but it is inputfield what does that)

Just to clarify, fieldtypes handle data to/from DB (not inputfields). Every field in your site has a type (where the name fieldtype comes from). Part of that type is a database schema and methods to load/save the data from the db. Though most fieldtypes just use the inherited load and save functionality from the Fieldtype base class.  Whereas inputfields just handle interactive input in the admin (aka input widgets). At their simplest, they are just an HTML form field like a text or textarea. If you were working just with the PW API, inputfields would never come into play (unless you wanted them to for some reason), because there would be no form or user typing stuff in. Of course there are no rules about any of this, so  just describing the way the core and core modules work. Something like the flickr importer obviously goes far beyond a typical input widget, so approach changes with needs.

[apeisa]

Ryan: thanks for your clarification. What I meant to say "saves values to db" => "process their own input". I first somehow thought that inputfield handles that (since schema and db saving etc are there), but of course not - inputfield cannot know how fieldtype collects data.

When I found ___processInput -method from InputfieldFile then I understood (at least something)

[apeisa]

Something like the flickr importer obviously goes far beyond a typical input widget, so approach changes with needs.

Actually this works just like the others. InputfieldFlickr is mostly javascript, it just adds hidden fields to form which holds urls to images as their values. Then images are saved straight from those urls with simple $image->add($url).

It was just me writing nonsense in my reply to slkwrm which changed approach here

[slkwrm]

Apeisa, thanks for thorough answer! Very educative.

I wander would it be hard to implement inputfield module "Tagcloud select". It would work with pages used as tags and let user select\unselect tags by clicking on them in a tagcloud. Also would be nice to have special field to manually input tags with autocomplete and "synched" with tagcloud (the way it's done when you tag a bookmark on delicious.com). So if user adds a tag that doesn't exist yet, a new tag-page is created in the backgroud. I'm a beginner at js and have limited experience with php, so don't really know how effort it will require. Maybe just should start writing it 

[apeisa]

Sounds like a very useful inputfield, and not that difficult to implement, I think. Not so much different from asmSelect or any other multiselect field for page field, so there is not too much work. Doing tag cloud with html/css, tag selection with js and then allow for new input, which saves as a page in PW API. I might try to implement that at some point. Next I will try to finish my ProcessDataImport module and maybe try inline editing module (and integrating that to AdminBar).

[ryan]

I got to play with the new InputfieldFlickr today – it's fantastic. Everything worked perfectly and this is such a cool option to have. It opens up all kinds of possibilities.

Only question I ran into is on the search: If I typed in multiple words like "disney dream" I didn't get any results. Whereas if I typed "disneydream" (1 word) I got plenty of results. So I think it must be a tag search, but just wanted to make sure I was using it correctly?

This module is so nicely put together and useful–Thanks for building this!

[apeisa]

Ryan, thanks for your feedback and kind words!

I haven't tested it with multiple words. It is tag search and I see no reason why it won't work with multiple words. I just need some separator or encoding to make it work. Thanks for letting me know this.

I have few questions for you (these are not important and probably I can figure out myself later, but if you have quick answers that would be appreciated):

I use this code to save images:

<?php
foreach($input as $key => $url_array) {
 if($key == $this->getAttribute('name') . '_flickr') {
   foreach($url_array as $url) {
     if (strlen($url) > 8) {
       $this->value->add($url);
       $this->message("Added new image: " . $url);
     }
   }
 }
}

Is there any way to save description also? Using normal InputfieldImages description is saved after file is uploaded, so I am not sure if there is any way of doing that in inputfield?

Second question: If you look at source from line 108 and below you see lot's of copied code there. My OO skills came little short here There is probably better ways to handle this?

EDIT: There are few things just awkward in my code snippet above, so I post here the better version:

<?php
$fieldname = $this->getAttribute('name') . '_flickr';
foreach($input->$fieldname as $flickr_image) {
$img = explode(" ", $flickr_image, 2); // $image[0] is url, $image[1] is description
if (strlen($img[0]) > 8) {
	$this->value->add($img[0]);
	$image = $this->value->last();
	$image->set('description', $img[1]);
	$this->message("Added new image: " . $img[0]);
}
}

[ryan]

Is there any way to save description also? Using normal InputfieldImages description is saved after file is uploaded, so I am not sure if there is any way of doing that in inputfield?

There's a couple ways you could approach it:

Example 1:

<?php
$this->value->add($url);
$image = $this->value->last();
$image->description = "some description";
$this->message("Added new image: " . $url);

Example 2:

<?php
$image = new Pageimage($this->value, $url); 
$image->description = "some description";
$this->value->add($image); 
$this->message("Added new image: " . $url);

Second question: If you look at source from line 108 and below you see lot's of copied code there. My OO skills came little short here  There is probably better ways to handle this?

I think you can replace line 108 and everything after with just this:

return parent::___processInput($input); 

[Soma]

That looks great so far, seems very useful for prototyping... thanks for this great new inputfield, I will try out and help test.

[apeisa]

Soma: thanks!

Ryan: thanks for your help again, I will implement descriptions and hope to "officially" release this soon.

[apeisa]

Ok guys, I consider this ready. Hope you will enjoy, this has been huge timesaver already on my personal project.

What I did in last commit:

• It pulls image title and author from flickr, shows those when it lists images and saves those as image description
  
• Changed from tag search to text search (fixed also the bug with spaces)
  
• Cleaned the code a little bit on php side (js is and will probably stay messy )
  

https://github.com/apeisa/InputfieldFlickr

I will probably add some kind of disclaimer to the module, as always when you use images that you have not taken yourselves or bought from reliable source, be careful with copyrights. This uses flickr search with licences 1,2,3,4,5,6,7 (when using on non-commercial site) and licences 4,5,6,7 when on commercial usage (what those numbers mean: http://www.flickr.com/services/api/explore/flickr.photos.licenses.getInfo).

[ryan]

Great update! Thanks for this!

[Craig]

I don't know if this will be any good for your situation or not - but I recently forked this module for a specific purpose. The functionality I used it for was to allow a whole Flickr photoset to be added to an image field, just by the URL.

A text box is appended to the image list, where the URL of a photoset can be entered. When clicking Save, the module will retrieve the photos from the set, and add them to the field. The PW description field will be populated from the photo's title.

Find it here: InputfieldFlickrset.

It's rather simple, but you may find it useful to use or to customise as you need.

[Craig]

That's strange. Which version of ProcessWire are you using?

[Craig]

OK, sorry about that. Just pushed an update to Github, can you try again with the updated file?

[Craig]

Excellent

Yes, that's probably right. A more robust way might be to add the photos via an AJAX, one at a time, showing progress as it goes, and PW would only deal with one picture at a time. It was a quick win for a site that only has a handful of photos at a time, and the server it's on can do those rather quickly, and it hasn't been a problem.

The screenshot is displaying the "Grid" functionality, which is part of the new default admin theme on the development branch of the main PW repository.

Perhaps there is scope here to work towards a grand, unified Flickr module that offers multiple ways to access and display photos?

[apeisa]

Perhaps there is scope here to work towards a grand, unified Flickr module that offers multiple ways to access and display photos?

That would be great. Also same for YouTube-videos would be great!

[jacmaes]

This module seems to no longer work in 2.5. The loading image keeps spinning but no images are retrieved. Can anyone confirm this?

[Jozsef]

This module seems to no longer work in 2.5. The loading image keeps spinning but no images are retrieved. Can anyone confirm this?

It did the same to me but it works now with 2.5.

The issue is that Flickr switched all API requests to the https protocol.

Change http:// to https:// in the InputfieldFlickr.js file and it will work again.

@apeisa, thanks for the great module, you might want to update it with https, cheers.

[apeisa]

It did the same to me but it works now with 2.5.

The issue is that Flickr switched all API requests to the https protocol.

Change http:// to https:// in the InputfieldFlickr.js file and it will work again.

@apeisa, thanks for the great module, you might want to update it with https, cheers.

Thanks, updated! https://github.com/apeisa/InputfieldFlickr/commit/66de0f2efbea3574b9836aec8e27449c0b0e9bfa

This is fun module, pretty rough on the edges, but I did found this super useful in certain projects (also in quick prototyping).