Welcome
Thanks for stopping by the Photo Feed Display site. I created a Widget that will allow you to easily display pictures from your Photo Feed on any website that gives you at least basic levels of access. You can test your feed out below to make sure it reads properly, then click on the 'Get the Widget' link to see the implementation options. There are simple to advanced ways to use the widget, and customizable options so that even the simple code can be used to provide some fairly varied results.The project is being actively developed and I will read all comments promptly, doing my best to correct any bugs discovered or help implement the code successfully!
News
(8/18) Web Host down in the morning (~8:30 - 9:30 EST) after I was experimenting with image resizing in PHP and memory limits for a client. Site is back up (profound, eh?) and, hopefully, did not cause millions of iframe/div source failures.(8/16) HTML Widget Spacing broken, then fixed. I tried to clean the formatting in the HTML source so it looked a little nicer and added a line break that didn't translate. It ended up simulating additional, unrequested image padding. The problem has been resolved and I apologize if it broke your layout temporarily.
Input Photo Feed
Demo Feeds
Each demo feed is displayed below using the Photo RSS Feed Display Widget code. Click 'details' to display the thumbnail photo output of the feed followed by other feed information not directly related to this project; pretty much a straight dump of the SimplePie parsed feed information.- Nick See's PhotoStream / [details]
- Waterbury CT (and surrounding areas) group stream / [details]
- Tagged with 'HDR' feed / [details]
- ZenPhoto Demo / [details]
- Iwaruna Gallery / [details]
- demo2.phpopen.net Gallery / [details]
- Picasa Album - Puppies. Puppies will put them to sleep. / [details]
- myPics.at | Wallpaper Gallery / [details]
- Gallery 3 Demo / [details]
- Crossland Films / [details]
- LillyPad Photography Studio / [details]
- Photo Finish / [details]
- Everyday Snapshots by Kitsune Noir / [details]
[Flickr]
[ZenPhoto]
[Picasa]
[Gallery2/3]
[Plogger]
[Tumblr.]
Compatibility
Works with the following feeds:- Flickr
- Picasa*
- ZenPhoto**
- Gallery (2/3)
- Plogger
- SmugMug
- Tumblr.***
Issues
- Thumbnail duplication may occur under the following circumstances: Items contain similar (or, no) title AND photo date/time properties are not properly set. This is because file naming is determined as follows: [date/time]_[title]_[thumbsize]px.jpg. This should make each unique, as long as titles and/or date-time properties are correct for the photo.
- *Large Picasa feeds may error out due to a problem with PHP versions prior to 5.3. I hope this will not be a problem for long, as I expect a server update soon.
- **When using ZenPhoto Album RSS, I sometimes get blank thumbnails. I am looking into this. It seems to be due to the feed not being URL Encoded / Special Characters removed. A temporary fix may be to (1) URL Encode it yourself using a site like The URL Encode/Decode Page or (2) Submit your feed at the top of this page and take the result (after ?feed= in the resulting URL) and use it as your feed.
- ***Because Tumblr feeds (and any other feeds that don't always include pictures) don't always include pictures, this will break on posts/items that do not include photos. The plan is to either (1)add code to skip 'items' which do not include image references and/or (2)refer to a default thumbnail when creating one is unsuccessful.
Planned Updates
- » show 'completed' updates
- Add function to check for more than 10 thumbnails in a folder and remove older ones. This could be called on (after) page load, daily, weekly, or manually.
- Create 'Embed Code Generator' -- allowing easy selection of available options and outputting the proper embed code
- Add a check for pictures and skip 'items' which do not contain them (instead of displaying a broken image, as is currently done. This will allow the code to work for mixed Feeds containing items with and without pictures to display properly.
Comments | Jump to bottom »
Mel (2010-04-24 12:29:18 pm) « permalink
Hello,
I'm using the html form of your widget, and I get the strip of small thumbs - but all of the thumbs are just a small black square... they dont actually show a thumb of the linked pic. When clicked on, they do take you to the image, but how can I get the small thumbs to show up correctly?
I'm using the html form of your widget, and I get the strip of small thumbs - but all of the thumbs are just a small black square... they dont actually show a thumb of the linked pic. When clicked on, they do take you to the image, but how can I get the small thumbs to show up correctly?
Nick C (2010-07-20 11:37:46 pm) « permalink
Thanks for trying this out. I'll be happy to help. What is the feed you are trying to display? I'll do my best to get it working and hopefully determine why it wasn't working; to correct the problem.
Also, if you can link me to the page your are trying to embed from (if it is accessible), I can view source and that may help, too.
nc
Also, if you can link me to the page your are trying to embed from (if it is accessible), I can view source and that may help, too.
nc
Mel (2010-07-20 11:37:46 pm) « permalink
Thanks Nick,
I got it working using the Zen Photo functions and the instructions on the "Zenphoto as a plug-in page" http://www.zenphoto.org/2009/12/zenphoto-as-a-plug-in-using-zenphoto-functions-from-outside-zenphoto/
I think I'll stay 'native' instead of using your widget. Thank you for your work and your reply though!
Mel
I got it working using the Zen Photo functions and the instructions on the "Zenphoto as a plug-in page" http://www.zenphoto.org/2009/12/zenphoto-as-a-plug-in-using-zenphoto-functions-from-outside-zenphoto/
I think I'll stay 'native' instead of using your widget. Thank you for your work and your reply though!
Mel
Nick C (2010-07-20 11:37:46 pm) « permalink
Mel,
Glad you found what you needed. I haven't even read the stuff at the link you sent. I'll check it out and try to make a 'read this first'...section or something to prevent people from trying to use this solution if there is a better one available for their situation.
I am pretty happy about how many Feeds this thing seems to work with. And I'm finally about to finish up the advanced PHP embedding...whch will let people do much more versatile things with the code than is currently possible.
Thanks again for stopping by and commenting. Oh, I got your link to work. Not 100% sure how...just refreshed the thumbs and did a hard page reload (ctrl-F5) and they showed up. ;-p
Glad you found what you needed. I haven't even read the stuff at the link you sent. I'll check it out and try to make a 'read this first'...section or something to prevent people from trying to use this solution if there is a better one available for their situation.
I am pretty happy about how many Feeds this thing seems to work with. And I'm finally about to finish up the advanced PHP embedding...whch will let people do much more versatile things with the code than is currently possible.
Thanks again for stopping by and commenting. Oh, I got your link to work. Not 100% sure how...just refreshed the thumbs and did a hard page reload (ctrl-F5) and they showed up. ;-p
Beachy (2010-07-20 11:40:27 pm) « permalink
I'd like to be able to get a little space between the photos and maybe add some text below them (I've made the photos bit bigger). Is this possible? Thanks!
Nick C (2010-07-20 11:40:27 pm) « permalink
Thanks for giving it a try. It is possible to change how the photos are laid out, just not with the widget, currently.
If you can use PHP, I can link you the (alpha-stage) advanced php embedding; basically you call a php function which derives what the images are going to be named, where they are located (url) and other useful information about them, then passes it back as an array. I'd be happy to help with what you are trying to do if this is the case.
If not, and you've waited since submission and checked back frequently enough to see this, I can add another option (arguement) just for you to modify the current 'spacer' between images. You could send a couple of blank spaces or something and the images would be spaced out, then.
Alternately, I haven't looked into it much, but this may be possible using fancy javascript (which I'm not amazing at) or even CSS. The CSS solution would be to throw the iframe inside of a div...and style all images inside the div so that they have some padding-left or something like that? This may not work, though...but it is worth a shot.
Thanks, again, for commenting! I'll be glad to help get stuff working for you.
If you can use PHP, I can link you the (alpha-stage) advanced php embedding; basically you call a php function which derives what the images are going to be named, where they are located (url) and other useful information about them, then passes it back as an array. I'd be happy to help with what you are trying to do if this is the case.
If not, and you've waited since submission and checked back frequently enough to see this, I can add another option (arguement) just for you to modify the current 'spacer' between images. You could send a couple of blank spaces or something and the images would be spaced out, then.
Alternately, I haven't looked into it much, but this may be possible using fancy javascript (which I'm not amazing at) or even CSS. The CSS solution would be to throw the iframe inside of a div...and style all images inside the div so that they have some padding-left or something like that? This may not work, though...but it is worth a shot.
Thanks, again, for commenting! I'll be glad to help get stuff working for you.
Beachy (2010-07-20 11:40:27 pm) « permalink
I've made some attempts to get the spacing, but unsuccessful so far. I'll keep checking back to see if you've been able to add the option. Thanks!
Johan Peijnenburg (2010-07-20 11:41:53 pm) « permalink
Hi,
I am trying this on a feed from PhotoShelter. I would also be very interested in adding some spacing around each of the images. Is it possible to include a padding parameter, or maybe just give each image a CSS class so that one can apply any styling?
I managed to get the html version working. The PHP version doesn't show thumbs however, although the clickthrough works. I will be testing putting the source on my own server at some point too.
Thanks,
Johan
I am trying this on a feed from PhotoShelter. I would also be very interested in adding some spacing around each of the images. Is it possible to include a padding parameter, or maybe just give each image a CSS class so that one can apply any styling?
I managed to get the html version working. The PHP version doesn't show thumbs however, although the clickthrough works. I will be testing putting the source on my own server at some point too.
Thanks,
Johan
Nick C (2010-07-20 11:41:53 pm) « permalink
The (real) PHP version is finally ready. You can see it in action here (all feeds viewed more than 5 times -- not that seeing it helps much, I understand).
I've just been waiting to clean up the code. Right now the linked page references one minimal function (minimal) for deriving the filename; calling this page to create thumbs. The standard page (this page) references a more robust function which creates thumbs and derives filenames. I need to separate the 'derive filenames' function out so that it can be one function called by whoever needs it, and this page can be the only one which actually creates the thumbs. Hope that makes sense.
Anyway, once that is finished (I'd like to say tonight, but can't promise), I'll post the advanced php embedding (and likely axe the basic php embedding -- who needs it?) and a least SOME type of argument to the html widget where either padding or at least blank spaces ( ) can be passed. I'll make some type of notification at the top of the page and (hopefully) not break any widget calls.
That's the plan. Thanks for your patience (and yours, Beachy)!
I've just been waiting to clean up the code. Right now the linked page references one minimal function (minimal) for deriving the filename; calling this page to create thumbs. The standard page (this page) references a more robust function which creates thumbs and derives filenames. I need to separate the 'derive filenames' function out so that it can be one function called by whoever needs it, and this page can be the only one which actually creates the thumbs. Hope that makes sense.
Anyway, once that is finished (I'd like to say tonight, but can't promise), I'll post the advanced php embedding (and likely axe the basic php embedding -- who needs it?) and a least SOME type of argument to the html widget where either padding or at least blank spaces ( ) can be passed. I'll make some type of notification at the top of the page and (hopefully) not break any widget calls.
That's the plan. Thanks for your patience (and yours, Beachy)!
johan Peijnenburg (2010-07-20 11:41:53 pm) « permalink
Hi Nick,
As per my email, setting the thumbnail size no longer seems to work since you added the possibility to set the spacing. In my case also using non-square thumbs does not work. Hope you will look into this soon.
The spacing between the thumbs works great btw!
Cheers,
Johan
As per my email, setting the thumbnail size no longer seems to work since you added the possibility to set the spacing. In my case also using non-square thumbs does not work. Hope you will look into this soon.
The spacing between the thumbs works great btw!
Cheers,
Johan
Nick C (2010-07-20 11:43:54 pm) « permalink
Johan,
The &thumbsize=## option was broken. It is fixed now. Sorry for the trouble.
As far as I can tell, the &square=FALSE option was still working. My guess is that the thumbs have been created as squares, and aren't being recreated because there is no name distinction between square and nonsquare thumbs. If this is correct, it can be fixed by using the &alwayscreatethumbs=TRUE option. The option can be removed after a successful call which (hopefully) will create the thumbs. Alternately, the &thumbsize value changing will cause new thumbs to be created since this affects the file name. If this is not the problem, I'll keep looking into it!
The &thumbsize=## option was broken. It is fixed now. Sorry for the trouble.
As far as I can tell, the &square=FALSE option was still working. My guess is that the thumbs have been created as squares, and aren't being recreated because there is no name distinction between square and nonsquare thumbs. If this is correct, it can be fixed by using the &alwayscreatethumbs=TRUE option. The option can be removed after a successful call which (hopefully) will create the thumbs. Alternately, the &thumbsize value changing will cause new thumbs to be created since this affects the file name. If this is not the problem, I'll keep looking into it!
Beachy (2010-05-20 7:15:40 am) « permalink
I lost my sizing also but the spacing didn't work for me. Size and other attributes including display: block are still gone even through I edited back to the original code.
Nick C (2010-07-20 11:49:59 pm) « permalink
Beachy,
Your page is displaying correctly for me now (since I fixed the &thumbsize issue). Are you still having trouble? Have a look at this sample page for some variations on the option usage.
Your page is displaying correctly for me now (since I fixed the &thumbsize issue). Are you still having trouble? Have a look at this sample page for some variations on the option usage.
Beachy (2010-07-20 11:49:59 pm) « permalink
It is back now but I'm not able to get the &htmlwidgetspacer=5 to have any impact.
Nick C (2010-07-20 11:49:59 pm) « permalink
You should be good to go, now. Your page was displaying correctly(ish) in Firefox and Chrome, but not IE...because IE doesn't always play nice with the CSS 'padding' property, which I had used to space the images. Instead, I modified the code to use the 'margin' property...essentially the same end, this is just handled better by IE.
Your IFRAME may need some adjustment, though. The code on the 'Get the Widget' page (with altered height and width, of course -- taking the newly added margins into account; you may need to reduce your thumb size to get them to display as three rows of three) should help with calling an iframe that isn't bordered if that is what you are going for.
Let me know if you have any other trouble. Thanks for pointing this out, as loads of people still use IE and I want the code to display properly for as many people as possible.
Your IFRAME may need some adjustment, though. The code on the 'Get the Widget' page (with altered height and width, of course -- taking the newly added margins into account; you may need to reduce your thumb size to get them to display as three rows of three) should help with calling an iframe that isn't bordered if that is what you are going for.
Let me know if you have any other trouble. Thanks for pointing this out, as loads of people still use IE and I want the code to display properly for as many people as possible.
Beachy (2010-07-20 11:49:59 pm) « permalink
WooHoo, thanks so much! It looks great! What shall we work on next? Perhaps an option for title and text? :D
Nick C (2010-07-20 11:49:59 pm) « permalink
Currently, I'm not inclined to add this option...mostly because I can't imagine people not wanting to have a fair amount of control to what the text would be, how it would be styled, and where it would be displayed in relation to the picture. That'd be a lot to take into account.
Also, it would probably have to have some type of size restriction...so small thumbs didn't get text, but larger ones did.
For now, I'd recommend the Advanced PHP solution for this type of customization. It isn't really as \'advanced\' as you may be thinking. In addition, I would be happy to assist if you choose to give it a shot and have the ability to add PHP on your page.
If you do not, feel free to detail your request -- even make a mockup or something...I may talk tough, but in the long run I just want to make people happy. If I'm not working on something else urgent, I'll probably do my best to help out.
Also, it would probably have to have some type of size restriction...so small thumbs didn't get text, but larger ones did.
For now, I'd recommend the Advanced PHP solution for this type of customization. It isn't really as \'advanced\' as you may be thinking. In addition, I would be happy to assist if you choose to give it a shot and have the ability to add PHP on your page.
If you do not, feel free to detail your request -- even make a mockup or something...I may talk tough, but in the long run I just want to make people happy. If I'm not working on something else urgent, I'll probably do my best to help out.
Beachy (2010-07-20 11:49:59 pm) « permalink
No problem, you're right... I didn't think about all the options people would want. The hover text might be enough of a description anyway.
Beachy (2010-05-27 9:11:07 am) « permalink
Hi Nick, it looks like it's lost the square photo default? It looks a little wonky today. :)
Beachy (2010-07-20 11:54:03 pm) « permalink
If I reduce the photo size they go back to square.
Nick C (2010-07-20 11:54:03 pm) « permalink
Fixed.
It could have been fixed (in case you have the problem again) by adding the '&alwayscreatethumbs=TRUE' option to your iframe source (once, then removing it to help with page load times).
On a side note, you are using (probably at my mistaken advice) '&thumbsize=150px' when it should be '&thumbsize=150' [no px]. I'd fix that.
Have a good one!
It could have been fixed (in case you have the problem again) by adding the '&alwayscreatethumbs=TRUE' option to your iframe source (once, then removing it to help with page load times).
On a side note, you are using (probably at my mistaken advice) '&thumbsize=150px' when it should be '&thumbsize=150' [no px]. I'd fix that.
Have a good one!
Beachy (2010-06-21 11:45:33 pm) « permalink
Hi Nick, just added this to my new page here:
www.independentartisans.com
Loving it and planning to keep it as a permanent addition! Thanks so much. :)
www.independentartisans.com
Loving it and planning to keep it as a permanent addition! Thanks so much. :)
Sasha (2010-07-20 11:54:03 pm) « permalink
An easy fix to tumblr's not-showing-images for text posts. Add all of your image posts to a category for example "#art." Each category has it's own rss feed. Example: "http://sasha-s.tumblr.com/tagged/art/rss." Since this category only has images, no blank/black images. :D
Nick C (2010-07-20 11:54:03 pm) « permalink
Thanks for the tip. I hope it helps any tumblr. users who are having trouble displaying what they want!
Sam (2010-07-20 11:54:03 pm) « permalink
» Add Comment
I am using SmugMug, but I can't get the html widget to work. When I put the feed into the preview textfield on the page, the pictures display perfectly, but when I try to put the feed into the code to embed in my own page, I get a request by firefox to use google reader to view the rss feed. Do you have any idea what I might be doing wrong? Thanks in advance.
Nick C (2010-07-20 11:54:03 pm) « permalink
It will depend on a few things. I'm assuming you are embedding this in an iframe? If not, you will probably not get it to work.
Otherwise, your ISP may not allow iframe usage or remote website display through iframes...perhaps?
Email me and I'll post some demo code that I know works on my host...that's really all I can guarantee. Or you can send me the code you are trying to get to work (the html source) and I'll be happy to try and help out!
Are you posting on a blog or a personally maintained site?
You can email me at nick[at]chapmanit.com
Otherwise, your ISP may not allow iframe usage or remote website display through iframes...perhaps?
Email me and I'll post some demo code that I know works on my host...that's really all I can guarantee. Or you can send me the code you are trying to get to work (the html source) and I'll be happy to try and help out!
Are you posting on a blog or a personally maintained site?
You can email me at nick[at]chapmanit.com
Sam (2010-07-22 5:10:44 pm) « permalink
Thanks for the quick response, Nick. It turned out to be something embarassingly simple - I wasn't including your demo.chapmanit... in the src. Sorry to bother you. One other thing: is it possible to turn off the linking ability of the pictures (so that they aren't taken away from the page by clicking on the photostream)? Thanks again!
Nick C (2010-07-22 10:13:17 pm) « permalink
This seems like a pretty reasonable request. Hope other people can use it. I've added an arguement/option to the html widget.
You can add either of the following:
&makelinks=no << removes link from image
&makelinks=external << opens links in a new tab/window
Let me know if you have any trouble with this!
You can add either of the following:
&makelinks=no << removes link from image
&makelinks=external << opens links in a new tab/window
Let me know if you have any trouble with this!