New Add-on: Flickr for EE

I’ll take a sneak peak, I don’t use all the features so I can’t be that comprehensive in feedback, but I can offer feedback on what I do use.

See some of my own FRs in there. Lovin’ it. 😉

Thanks Lisa, hopefully the new file setup will fix one of the issues you were having. Let me know how it goes!

I see this has a different folder name. Does it need to be uninstalled/reinstalled? Or are you handling that already?

Interesting. Uninstalling the fieldtype didn’t drop dww_flicker from exp_fieldtypes. Visiting it in the CP didn’t update it to the new names. The custom fieldtype of Flickr didn’t get updated either. Bought my site down for a few but got it working by dropping all of that in PHPMyAdmin and deleting the custom field. If people are using this on more important sites you may want some update routines. =)

Nevermind, I had to submit the activated details. Silly error.

But, custom field works - clicking on a photo does nothing. How does one actually insert the image into the custom field? Is there a multi-select option

Also, the docs still refer to dww_flicker which doesn’t seem to work. Is it now eehive_flickr? Updated docs would help a lot figuring this out if so. 😉

Nevermind, I had to submit the activated details. Silly error. But, custom field works - clicking on a photo does nothing. How does one actually insert the image into the custom field? Is there a multi-select option Also, the docs still refer to dww_flicker which doesn’t seem to work. Is it now eehive_flickr? Updated docs would help a lot figuring this out if so. 😉

Hi Lisa, sorry for the confusion. I’ve updated the documentation (http://www.ee-hive.com/expressionengine-2/flickr/beta.php) and will try to explain some of the other issues below.

The new ee_hive fieldtype replaces Flickr for EE v2.0.x (which was under the name of dww_flickr). If you’re upgrading from v2.0.x you should first install the new eehive_flickr fieldtype. You can use the same API Key and Secret as you were before. Then go to Admin > Channel Configuration > Custom Fields page and change all your previous dww_flickr fields to the new eehive_flickr fieldtype. You can then uninstall the dww_flickr fieldtype.

So you’re now getting the pop-up browser, but you can’t select an image? Clicking an image within the browser should select the image, close the window and insert a thumbnail in place of the file chooser button.

It’s cool, I basically started from scratch so avoided the upgrade issues 😉 Had to as I brought my site down.

So you’re now getting the pop-up browser, but you can’t select an image? Clicking an image within the browser should select the image, close the window and insert a thumbnail in place of the file chooser button.

Clicking an image highlights it in green and that’s it. In Safari.

I’m still also not sure what the tag names should look like, would love to get an example of the recent photos tag in the eehive naming convention.

Thanks!

I updated the beta docs page with the new tag names. But yes, if you replace dww with eehive all the tags should work. So the photostream tag would be

{exp:eehive_flickr:photostream}{/exp:eehive_flickr:photostream}

Also, could you give it a shot on Firefox or Chrome on your Mac and let me know if that works. Wondering if its a browser issue thats not allowing you to select the image.

And again, THANK YOU for all your help in getting this debugged.

It’s not inserting on FF, Chrome, or Safari.

I’ll update those tags. Thanks!

It’s not inserting on FF, Chrome, or Safari. I’ll update those tags. Thanks!

Must still be the directory structure setup you have. In Chrome, can you open the pop-up browser and do a right-click > View Frame Source. In the header you should see some included js files, like this:

<link rel="stylesheet" type="text/css" href="http://www.YOURSITE.com/themes/eehive_flickr/css/browser.css" /> 
<s type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></s> 
<s type="text/javascript" src="http://www.YOURSITE.com/themes/eehive_flickr/javascript/jquery.jscrollpane.js"></s> 
<s> 
    $(document).ready(function() {                           
        
        $("a.select").click(function() {
            // Get the base URL for the selected image
            var picURL = $(this).attr('rel');
            var picData = $(this).attr('href');
            
            // Set the image URL for the hidden input
            $("input[rel='field_id_6']", top.document).attr('value',picData);
                
            // Add the image URL to the hidden field
            $("#field_id_6_image > a.singleImage > span", top.document).html(picURL);
            $("#field_id_6_image > a.singleImage > img", top.document).attr('src',picURL + '_s.jpg');
            $("#field_id_6_image > a.singleImage", top.document).attr('href',picURL + '.jpg');
            
            // Hide the image chooser
            $("div#field_id_6_chooser", top.document).css("display","none");
                
            // Display the image thumbnail and URL
            $("div#field_id_6_image", top.document).css("display","block");
                        
            // Bind Fancybox to the new image chooser                                                                                                                     
            parent.top.$("a.singleImage").fancybox();
                    
            // Close the Fancybox
            parent.top.$.fancybox.close();
                
        });
        
        $(function() {
            $('.scrollpane').jScrollPane({scrollbarWidth:11});
        });
 
    });
</s>

I had to replace “script” with “s” in the code above for it to display. Does yours look like that with all the correct URLs to the js files?

I’m just using the recommended, documented way to have the system folder above webroot. Nothing special

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Flickr Browser</title> 
<link rel="stylesheet" type="text/css" href="http://lisajill.net/themes/eehive_flickr/css/browser.css" /> 
[removed][removed] 
[removed][removed] 
[removed] 
    $(document).ready(function() {                           
        
        $("a.select").click(function() {
            // Get the base URL for the selected image
            var picURL = $(this).attr('rel');
            var picData = $(this).attr('href');
            
            // Set the image URL for the hidden input
            $("input[rel='field_id_16']", top.document).attr('value',picData);
                
            // Add the image URL to the hidden field
            $("#field_id_16_image > a.singleImage > span", top.document).html(picURL);
            $("#field_id_16_image > a.singleImage > img", top.document).attr('src',picURL + '_s.jpg');
            $("#field_id_16_image > a.singleImage", top.document).attr('href',picURL + '.jpg');
            
            // Hide the image chooser
            $("div#field_id_16_chooser", top.document).css("display","none");
                
            // Display the image thumbnail and URL
            $("div#field_id_16_image", top.document).css("display","block");
                        
            // Bind Fancybox to the new image chooser                                                                                                                     
            parent.top.$("a.singleImage").fancybox();
                    
            // Close the Fancybox
            parent.top.$.fancybox.close();
                
        });
        
        $(function() {
            $('.scrollpane').jScrollPane({scrollbarWidth:11});
        });
 
    });
[removed] 
</head>

is that what you wanted?

Meh, here’s the whole frame source.

I’ve changed my setup so my /system directory is above my webroot. Made all the appropriate changes to my files and fired it back up and everything seems to be working.

I compared our two source files and everthing looks exactly the same with the exception of URLs.

Are you using relative or absolute paths in your system_path variable?

Also, what other add-ons do you have enabled? Another person is having an issue that might be related.

Whipped up a quick video on Flickr for EE in use - http://vimeo.com/12374351. Enjoy!