Photo Feed Display

Welcome

2015.01.24
Made the examples page more accessible and integrated it with the widget builder a little.
2013.08.03
I finally added support for PNG and GIF files. I had to update to php5 and the newest SimplePie (the RSS Parser behind this project). imgur feeds are supported.
2012.10.27
Check out the new Widget Builder, which helps create widgets by offering an easy interface for adding PFD options to a feed.
2012.10.26
I just added the option to specify border size and color. See the About the Widget page for details.

Use this widget? Love it?

Thanks for stopping by the Photo Feed Display site. The Widget will allow you to easily display thumbnails from any well-formed photo feed (RSS/Atom). You can test your feed or view some of the demo feeds below.

When you are ready, click 'Get the Widget' to see the implementation options and the code needed to start using the widget yourself.

The Photo Feed Display project is being actively developed and we try to read and respond to all comments promptly.

Demo Feeds

Each feed below is displayed using the Photo Feed Display Widget and some of the available options.

Planned Updates

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?
^^ Respond to this!
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
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
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
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!
^^ Respond to this!
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.
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
^^ Respond to this!
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)!
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
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!
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.
^^ Respond to this!
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.
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.
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.
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. :)
^^ Respond to this!
Beachy (2010-07-20 11:54:03 pm) « permalink
If I reduce the photo size they go back to square.
^^ Respond to this!
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!
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. :)
^^ Respond to this!
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
^^ Respond to this!
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
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.
^^ Respond to this!
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
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!
Sam (2010-07-26 4:10:00 pm) « permalink
Thank you so much! It works perfectly. Talk about service.
Sommer C. (2010-11-24 8:35:51 pm) « permalink
Using the Advanced PHP and feeling a little silly here... is it supposed to come out formatted by default, or does it just return the array and then I have to write script to manipulate it the way I want? Right now, I've included the file pfd_getphotos_include.php in my page and then used the function $feedPhotos=getPhotos('MyFeedURLisHere'); but I get nothing. If I do a print_r on $feedphotos, I can see the data it's dumped...

Thanks for your help. :)
^^ Respond to this!
Sommer C. (2010-11-24 8:41:20 pm) « permalink
Feeling a little dense as I see in the description of Advanced PHP that is what it's supposed to do - output an array for me to manipulate. Will have to work with it some more. :)
Nick C (2010-11-24 11:22:57 pm) « permalink
Hey. Hope the code is of some use.

I use the following code (a php function) to display the images on this page:

--code [replaced with link]
http://demo.chapmanit.com/picture_rss/_pfd_advanced_php_usage.txt
--end code
Sommer C. (2010-11-24 11:06:02 pm) « permalink
Awesome - thanks! This is a test site, so excuse all the ugliness, but at the bottom under "Whatcom Photos" and "Whatcom Videos" I am using your script:

http://bellingham.org.customers.tigertech.net/
Sommer C. (2010-11-24 11:04:02 pm) « permalink
It works with YouTube, too. ;)

The one problem I found with the Advanced PHP is that if you're storing your thumbnails locally, the script doesn't account for that because the path for $photoArray[$i]['imgsrc'] is hard-coded. I made a few tweaks to check the value of $localthumbs and then create the path accordingly.

I added this after line 197:

// Added by Sommer C. 11-24-2010 to create URL based on thumbnail location (remote or local)
if ($localthumbs==TRUE) {
$thumbnail='http://' . $_SERVER['SERVER_NAME'] . '/' . $fn;
} else {
$thumbnail='http://demo.chapmanit.com/picture_rss/' . $fn;
}

And then replaced this line:
$photoArray[$i]['imgsrc']=$'http://demo.chapmanit.com/picture_rss/' . $fn;

With this one:

$photoArray[$i]['imgsrc']=$thumbnail;

And it seems to work without issue now.
^^ Respond to this!
Nick C (2010-11-24 11:31:08 pm) « permalink
Thanks for the tip about YouTube! I had no idea, but it is certainly worth mentioning.

I'll update the base code with your additions. Much appreciated! Let me know if I can be of any help, though it sounds like you have it taken care of.
Luis Ramirez (2011-03-07 7:21:32 am) « permalink
Hello Nick, first of all thanks for the handy widget. Everything seems to be working smooth, except when I have two images with the same title and/or description. Then it duplicates the thumbnail, though it links it to the correct two, separate image pages. You mention this in the Zenphoto issues, how do I go about correcting this? Any help is appreciated. Thanks!
^^ Respond to this!
Nick C (2011-03-07 9:48:18 am) « permalink
Luis,

Glad the script is working for you. Sadly, there is currently no fix for this on my end. You have to modify the title/name of your picture(s) [in your case, add 1, 2, 3] or modify the date/time on the photo.

Possibly, you can find the root of the problem...maybe the camera isn't saving the time properly, or the photo editing/resizing software is discarding that information?

Sorry for the only available solution. Hope it is something you can address!
Luis (2011-03-07 8:55:16 pm) « permalink
Perfect! I modified the date/time on one of the images and it updated the thumbnail correctly. Thanks for responding so quickly!
Nick C (2011-03-07 10:05:47 pm) « permalink
We aim to please!

Glad you were able to correct it fairly easily. Take it easy.
Beachy (2011-03-20 9:59:06 am) « permalink
Hi Nick,
I can't get more than 20 to display here: http://www.boardwalkartisans.com even though I've got numtodisplay=24 and the feed contains more than 20. I think I've allowed room for it. Is there a limit on your end? Thanks!
^^ Respond to this!
Nick C (2011-03-20 10:33:28 pm) « permalink
try again. max was set to 20 (and not documented anywhere public) -- i bumped it to 24. you may need to use the alwayscreatethumbs=true argument once to refresh.
Beachy (2011-03-21 11:21:18 am) « permalink
Thank you! :)
denjell (2011-07-06 9:46:34 am) « permalink
Hi,
thanks for your work. Your php is a huge mess, and I wonder why you use simplepie at all... It is so much more powerful than what you are doing with it. This one-liner will save you not only code, but also LOTS of processing power on the server side:

$pic = $item->get_enclosure()->get_thumbnail();

it returns something like:
https://lh6.googleusercontent.com/-J35DuhcM9XA/TFbUSOqPQGI/AAAAAAAAFh0/10HlihmOiP0/s36-c/IMG_6062.JPG

(by the way, the /s36-c/ (s=size, 36=pixel, -c=square) in the picasa bit here can be switched to anything you like and google-servers take care of the rendering...

for example I use /s720/ as my default for showing the normal size image, but have had success at /s1280/

Just my two cents.
:Denjell
^^ Respond to this!
Nick C (2011-07-07 8:47:50 am) « permalink
i appreciate your feedback!

as for my php...yes, it is a huge mess! believe it or not, i cleaned that up a little before posting. my messiness always causes me a headache when i go back to modify the code after multiple months and decide to update... re-familiarizing myself with what it is going on takes some time and could be simplified with more clean code to start with!

thanks for the one-liner. i'll look into it when i can, as i'm definitely a fan of code optimization...despite the performance of this script. working on it was a learning process and i'm very happy with what it does...although how it goes about doing that could likely be drastically overhauled. i've implemented lots of additional featured since the script's inception...so a rewrite from scratch is definitely warranted, although i don't have the time to do something like that, currently.

thanks for the picasa tip. i'd like to write some bypassing into the code (when resizing isn't necessary), but probably won't unless some of my other (paid) projects subside.

thanks for the cents and sense!
Joel (2011-07-06 3:27:35 pm) « permalink
Hi, thanks so much for this awesome script! Its exactly what I've been looking for. I was wondering if you could provide me the actual php file you use in your simple php option. I have little experience with PHP, so I'm not sure how to iterate through the array to get the information out that i want. What is provided in the simple php solution is exactly what I'm looking for, but I would like to be able to run everything locally.

Thanks,
Joel
^^ Respond to this!
Joel (2011-07-06 3:52:54 pm) « permalink
Nevermind, I do believe I have figured it out! Now I'm just fiddling with locally hosting thumbnails. Thanks again!
Joel (2011-07-06 4:13:40 pm) « permalink
Actually, now that I've got this running, I do notice something. $thumbsize seems to be broken. If I change $thumbsize to anything other than 25, all it spits out is a generated image of the image title. You know why this is happening?
Nick C (2011-07-07 8:35:45 am) « permalink
thanks for the comments! hope I can help you out!

i'm not 100% sure why you are having issues with the $thumbsize variable. it is possible that I have updated the base code since offering the PHP for download (read: you may be using an older php file)...but I don't think the updates were substantial...

can you link to the page you are having trouble with. additionally, does the feed work if displayed via the iframe method?

i'll try to download the file myself and host it on an outside server and see if i can implement it. i'll report back if i can duplicate your problem.

...lastly, normally when i see duplication of any one thumb, it is due to the issues mentioned on the homepage...duplicate(or, no) titles and duplicate creation times for the photos.
Joel (2011-07-07 11:34:25 am) « permalink
Thanks for your quick response! Here is the link:

http://bluemt.co/testfeed/testfeed.php

I had been running it on my local server, which now I realize that I had php errors and warnings turned off. Now that its up on our actual server, its giving me a cache warning. I have no idea whats going on with it. When thumbsize is larger than 25, the images all i get is text (the names of each thumbnail.) hopefully, we'll figure out what's going on!
Nick C (2011-07-07 1:22:18 pm) « permalink
thanks for the link!

i think you have to (depending on how you connect to your server) change the permissions of the cache folder. if you use a ftp, i think permissions is a right-click option. you want it to be fully writable and modifiable. alternately, you may be able to delete the 'cache' folder and its contents, then recreate it (or rename it 'bu_cache', then create a new one...just in case). if you terminal in or something, i think you have to chmod the folder...but i'd have to look that up to be sure.

let me know if this doesn't help. i think it will!
Joel (2011-07-07 1:46:45 pm) « permalink
Man, you're good at this question answering thing! Anyways, It sounds like a good idea, but I have no idea where my cache folder is. I cant find it through ftp at all... I'm running off of 1and1, who is pretty strict... could they be not allowing me to access it?
Nick C (2011-07-07 3:04:16 pm) « permalink
thanks!

...shouldn't be a problem with them. that's who i host this site with. ;-p

try creating a 'cache' folder in the document root (http://bluemt.co/testfeed/). that's where mine is on two working implementations and it works. (on this site, it's: http://demo.chapmanit.com/picture_rss/cache/)

let me know!
Joel (2011-07-07 4:18:28 pm) « permalink
I feel terrible asking all these questions! Plus I feel pretty dense for never actually creating a cache folder. Anyways, I now have a cache folder set up in my root directory, CHMOD'ed to 777 (just to cover all my bases), and the warning message has now disappeared, but I'm still just getting text for my images, unless my thumbsize is 25. weird, right?
Joel (2011-07-07 4:35:03 pm) « permalink
Here is an update, it works with your default feed great now(which makes sense)! Thats got to mean that there is something wrong with the feed that I've given it, which is a plogger feed located at http://bluemt.co/gallery/plog-rss.php?level=album&id=2


Nick C (2011-07-08 12:27:01 am) « permalink
no problem with the questions. that's what i made the comment section for. seriously.

i pasted your feed () in the 'input photo feed' box above and hit submit. the feed displayed 5 square thumbs correctly at the default, 25px. in the resulting URL, I added '&thumbsize=65' and it worked properly.

this indicates that the problem isn't with the feed...as far as I can tell.

...i just checked your feed again () and it worked. i see 4 larger, linking thumbs. hopefully, this means the problem has been resolved. sometimes, after making changes, i have to do a hard refresh (ctrl+f5 or shift+f5 -- or even delete my browser temporary files).

let me know!
Joel (2011-07-08 11:53:52 am) « permalink
Hey, everything is working now! I had been clearing my browsers cache before, but it wasn't doing anything. All of a sudden, last night, everything seemed to work! FANTASTIC! I guess it must have been something on my end.. strange... anyways, thanks again for all your help!
Kevin Crow (2011-08-03 4:05:04 pm) « permalink
I think widget is exactly what we need, thanks for writing it!

I am having trouble getting the full php version active. Pardon the ignorance, but how do I call the function. Not sure where $feedPhotos=getPhotos($photoFeedURL); needs to be dropped or how to get our feed into the variable. Do you have any basic instructions?

Kevin at Tempo
^^ Respond to this!
Nick C (2011-08-03 8:59:48 pm) « permalink
I'm glad you like the widget and hope we can help you get it working!

Sadly, this widget does require a little PHP knowledge. If you aren't sure how to call a function, I may not be able to easily help you. You have to have a functional knowledge of variables and functions in PHP.

I made a simple page making use of the function...you can see the source here and the implementation here.

You can 'save' the source file contents or copy and paste them into an empty '.php' file and it should give you a starting place on getting familiar with the code.

Let me know if this doesn't help or you run into any trouble.
Kevin at TEMPO (2011-08-04 1:23:09 pm) « permalink
Nick,

90% success- the HTML doc you sent containing the PHP made it very clear how to implement this in ModX. We got the widget working perfectly using the demo Gallery 3 link you provide on your page, but not with our own: http://photos.gottempo.com/gallery/rss/feed/gallery/latest

The problem seems to be the "?m=[#]" appended to the .jpg in the RSS feed (in the CDATA area). Not sure why it's happening, but that's a Gallery3 problem, so I've posted on the G3 forums (http://gallery.menalto.com/node/103142).

Thanks again for your most useful contribution, and we'll be sure to submit our www.gottempo.com/home/ilovetempo link when it is fully up and running.
Kevin at TEMPO (2011-08-04 8:17:03 pm) « permalink
Nick,

I was posting at the Gallery 3 support forums, and an alternate solution was suggested: rather than stripping "+4" characters to arrive at the image name, use a number appropriate to eliminate ".jpg?m=[#]".

I believe +17 should do it, but no success: www.gottempo.com/home/ilovetempo

Any tweak to solve this? Surely other Gallery 3 users have encountered similar problems.

Best,
-Kevin at TEMPO
Kevin at TEMPO (2011-08-05 10:59:49 am) « permalink
Nick,

I succeeded in stripping the "?m=[#]" by editing the Gallery3 function, but it made no difference to your widget. I've no idea what to try next. Any suggestions?

Best,
-Kevin at TEMPO
Nick C (2011-08-06 9:54:03 am) « permalink
First of all, sorry for the delay. I just went on vacation and had a 13 hour drive...with a 2 year old, after my normal day's work...recovery time...and motorcycles waiting on me at the inlaws house. Then, when I went to reply last night, it seems my web server was non responsive for at least 30 mins...so I couldn't even comment. Been busy. ;-p

Strange indeed. I don't think there are many 'advanced php' widget users, to be honest. 90% of the sites hits come from 4 main sites and a number of smaller (etsy, mostly) commercial sites.

I've only had a few other inquiries about the advanced php and, while I haven't tracked downloads, I feel these users would be more inclined to comment on the forum if they had issues.

I'm not sure, but when I visit the link you mentioned, I get absolutely nothing. Even when I 'view source', I get no RSS. Visiting a RSS page normally gets some type of well formed xml like this (browse to that or 'view source', depending on your browser). This seems highly likely part of the problem.

However, your fix of the cdata issues via stripping indicates that you do have some CSS...so I'm again at a loss. Can you tell me exactly what RSS feed you are using?
Hellen (2011-11-22 8:29:36 pm) « permalink
This is exactly what I needed. I just have one problem, I need it to show one picture, and I want it to be 300 px, but it doesn't go over 199 px. I tried changing the size of the frame, but I put over 199 px it shows up as 25 px. What should I do? I'm using the html version, I don't know how to use the other one.
Thanks!
^^ Respond to this!
Nick C (2011-11-22 11:32:14 pm) « permalink
Sorry...but the size is an intentional limitation. This is to prevent my server from hosting gigantic 'thumbs' and me running out of space. This site gets ~8000 hits a month and uses a fair amount of my available server space...so I try to keep the bandwith low by restricting the image size and limiting the # of thumbs displayed to 20.

That said, the size of photos in many feeds I've seen are pretty small as they reference a smallish, thumbnail to (similarly) prevent unnecessary large file downloads. I was going to prove my point with a link to a flickr feed...but it has both a reference to the large file and a 'thumbnailed' version.

At this point, your only options are to (1) offer me a bribe, (2) use the 'advanced php' version of this code which allows self-hosting of thumbnails, or (3) find an alternate solution.

Best of luck! Let me know if I can be of further assistance.
Yvonne (2012-01-29 4:26:15 pm) « permalink
Hi Nick! I found this page via a blogger support forum question because I needed help display images from a photo feed that wasn't compatible with the blogger slideshow widget. Since discovering your code, I'm now using it for my blog to display my latest pins from pinterest! I'm so happy it works :)

Thanks :)
^^ Respond to this!
Nick C (2012-01-29 4:29:16 pm) « permalink
Glad to help! That forum post was a little shameless self promotion by my alter-ego, dotaloc. I'm happy it pointed you this way and you found something that helped.

This is by far my most utilized web code/project and the use, comments, and response is very rewarding. I hope to continue supporting and occasionally developing the Photo Feed Display indefinitely and appreciate all feedback!
Yvonne (2012-01-29 10:12:42 pm) « permalink
Is there a way to make the links open in a new tab? And my iframe tag isn't closing for some reason. I use «/iframe» but blogger automatically changes it to «iframe src="http:»...
Yvonne (2012-01-29 8:20:58 pm) « permalink
Ah crap. Okay~ Blogger changes my iframe closing tag to < / iframe "http: >
Nick C (2012-01-29 10:22:17 pm) « permalink
Not sure about blogger auto-correcting. I used iframe embedding successfully on my blogger to announce/demo the site, so I'm sure it can be done. Maybe you have to use the newer method of closing the tag IN the original tag? Use «iframe src="" [other options] /» ... and you won't have to have a separate, closing tag?

As for the linking options, there is an option to disable, or make links external (uses the target="_parent" modification to the «a» tag). Just append &makelinks=external to your feed.

To use the available options, you may have to URL encode your actual feed, then use standard practices for adding arguments. Let me know if you have trouble.
Harry (2012-06-27 10:14:12 pm) « permalink
Hi Nick,

Firstly I want to say a utterly HUGE thank you for this amazing widget - I cannot tell you how many hours it's taken me to find any kind of way of putting a simple RSS image gallery from my Pinterest feed onto my site - and your widget does it all in seconds ah!! I'll def whack something in your donation pot at the weekend (ha when a lowly graphic designer gets paid) and if you want more traffic I'll gladly write a blog post about it on my site. You realise until Pinterest bring out a public API you're essentially the only brilliant solution to having a feed on your site - epic!

Anyway, now I know you will probably tell me to just use the PHP version if I want to start styling bits but I'm a graphic designer and have noooo PHP knowledge - plus your HTML widget already has it nailed! But the final thing I need to do in order to get the thumbnail gallery to perfectly match the rest of my site's CSS is for each thumbnail to have an 8px solid black border (each thumbnail is 78px) - is this possible either through your widget or by defining a CSS img class?

Thanks so so much for this widget, you have saved me so many hours of torture haha.

Harry
^^ Respond to this!
Nick C (2012-06-27 11:41:48 pm) « permalink
Harry,

Thanks for the comments and appreciation! I'm glad the widget saved you some time!

I've actually done very little in the way of updating this code for the last while. However, most of my additions/optimizations have been based on user review/request. Your request (custom border colors/sizes) is actually one I had considered a while back but have been too busy with other work, and maybe a little lazy, to implement.

That said, your kind words will certainly encourage me to get my act together and make this thing a little more useful to those who use it. I'm not really in this for the money, but I can't deny that a little show of thanks by way of donation does, also, help to get me going...but I can't promise much more response than the kind words.

That said, I wish I could give you a reasonable expectation of time. I'm trying to wrap up one paid project right now and just started another one. I hope I can work in the border request while working on the new job...but certainly won't be able to get to it within the next week. Maybe two or three weeks, though?

If you don't hear from me or notice an addition to the html 'options' section on the "Get the Widget" page after a few weeks...feel free to remind me. I won't be offended.

Hopefully, that won't be necessary and I'll get the code revised in a timely manner for your use!

Again, thanks for the kind words and glad the widget works for you and helps out!
Nick C (2012-06-27 11:47:01 pm) « permalink
Oh!

To answer your question, there is no way that I am currently aware of that you can add image borders to the widget...without using the PHP variant, which you seem to know about.

If you are good with JavaScript, though, I wouldn't be surprised if you could write some fancy function that modified the contents on page load (added borders)...but it may require more proper image names/IDs or something. So if you aren't in a urgent situation, waiting is probably best unless you want to dive into PHP.

If you are in an urgent situation, let me know and I'll try to prioritize it as much as I can.
Harry (2012-06-28 6:41:40 am) « permalink
Not at all a problem - I thought this might be the case, haha web coding being what it is I think that would have been too easy!

I might give the PHP a go or dabble with some JS, but for now anyway there's a slightly ugly hack I'll put in of overlaying a 2nd div with a grid of blank borders on top of your thumbnails. Should be really easy to do, but not exactly the 'proper' way of doing things. Currently doing local testing but when I get it up on server I'll post a link on here so you can have a look - visually it's pretty sweet.

Thanks for the quick reply!
Ted Johnson (2012-09-09 4:03:51 pm) « permalink
Have you worked on multiple rows? I'm looking for code that will display a Flickr album of pics in a grid layout like http://blogtemplate4u.com/?visit=pegasus-srtemplate.blogspot.com/ that will update when pics are added to Flickr. Maybe you know of somethng that i haven't found. I want it on one of the pages in a Blogspot blog.

Thanks
^^ Respond to this!
Nick C (2012-09-09 7:50:38 pm) « permalink
Have you seen the examples? You can specify the thumbnail height and, with the padding, calculate the iframe's necessary width so that the thumbs wrap around.
(As seen in the last example.)

Alternately, you can get the PHP and fancy it up as much as you'd like, yourself.

Good luck!
Ted Johnson (2012-09-10 4:15:02 pm) « permalink
Thanks--I missed that
Harry Crawford (2012-10-24 9:06:56 am) « permalink
Hello again Nick!

Having played around with your image RSS feed for a while on my own site and on a client's new site, I though I would point out a couple of things I have learnt/am learning, and also hope you can offer some help/advice.

Firstly, for those that have been asking about adding borders etc to individual thumbnails with the basic iFrame version, you can of course do this by overlaying a new div containing blank boxes with the border that you want. You can also hide a particular thumbnail if you want an irregular spacing between thumbnails by overlaying a thumbnail sized div of the background below. All this is a very messy way of doing things but if you dont want to get into the PHP versions then you can do most things that way - have a look at the footer of my page: HCD Home

Secondly, for those wondering how to select only images from a multi-content RSS feed (such as Tumblr) being used for the photo feed, you can filter out other content (and do a million other things to your feed) by using Yahoo Pipes. Pipes essentially takes in a standard feed, lets you alter it in a huge number of ways and then outputs a new, altered RSS feed. Unfortunately (Nick this is where I need your help) because the RSS feed address it outputs is a URL query string containing ampersands etc, Nick's iFrame version is getting confused with the variables that are attached to the end of the RSS feed and so the whole thing won't display...

Nick is there any way of splitting the variables that in the iFrame are attached to the feed? (&thumbsize for example) If this isn't possible in the HTML version, would I have the same problem with the advanced PHP version? I just want to know before I take a crash course in PHP!

If it helps, this is the new Pipes RSS feed:

feed://pipes.yahoo.com/pipes/pipe.run?_id=5ebcfd7368d269564951910457c8b31e&_render=rss&numberinput1=50&textinput1=w-cream&textinput2=photo

Hope this all makes sense..! Cheers in advance for your help Nick.

Harry.
^^ Respond to this!
Nick C (2012-10-24 11:40:36 am) « permalink
Harry,

Nice Site!

Glad you have been able to utilize the PFD and overcome some of the inherent limitations with elegant workarounds.

1) I'll be adding the ability to add borders at some point. I'd like to say soon, but this projects is (sadly) not my highest priority. I don't even think it'd be very difficult to do, as I already did the 'padding' and the code should be very similar.

2) This, I think I can help with immediately. Nice use of Pipes to perform some RSS cleansing. Basically, the iframe src just needs to have the 'feed' argument URL encoded. There are a number of ways to do this, but the easiest is probably to browse to the 'Test Your Feed' link and enter your feed there (argument free), which results in the following:

http://demo.chapmanit.com/picture_rss/?feed=feed%3A%2F%2Fpipes.yahoo.com%2Fpipes%2Fpipe.run%3F_id%3D5ebcfd7368d269564951910457c8b31e%26_render%3Drss%26numberinput1%3D50%26textinput1%3Dw-cream%26textinput2%3Dphoto

...then, add your pfd arguments to the end of that, non encoded...as follows:

...cream%26textinput2%3Dphoto&thumbsize=##&htmlwidgetspacer=##

Hope that helps! Maybe your border overlays won't be necessary for much longer. I have considered parsing the non graphical content out, eventually...also, handling other image types (currently, only jpg source files work)...but, I don't have a time frame on any of it.

Take care!
Harry Crawford (2012-10-24 1:42:58 pm) « permalink
Nick,

You are a legend amongst men! It works like an absolute beaut - I've still got to filter out animated GIF's as currently they're classed as images in my Yahoo Pipe but other than that it's now working perfectly. You can see the homepage concept for my client (with the new working feed) here

He's paying me next week and I'm tacking on a tenner for your time and coding genius.

Cheers for the compliments on my site - it's nearing completion but it's not quite there yet. I'll be running a design blog on there as well covering a broad range of web & graphic design topics - if you're interested I'd really like to do a post all about your RSS photo feed. I know you already get thousands of hits on this page so I you may not want any more!

If you get anyone else asking how to cleanse/filter RSS feeds please do let them know about Yahoo Pipes or feel free to give them my email address.

Thanks for your continued quick help.

Harry.
marco (2013-03-04 5:54:28 pm) « permalink
Hi Nick,

I really loike your widget, i wanted to use the php version but i cannot get it to work.
i want to connect it to a zenphoto gallery. I cannot figure out the code. Could it be possible to get a step by step explanation.
thanks in advance!
^^ Respond to this!
Nick C (2013-03-04 10:16:43 pm) « permalink
Thanks for the feedback. Glad you like it.

I haven't updated the PHP version in a while (much less interest than in the standard version, as far as feeback indicates). Does your feed (assuming it is public) work for the widget? If it does, that's a good start...ensures the feed is being properly formed and all that.

Is your page public? Link to it (or email it -- thenickchapman at or close to gmail) and tell me what steps you have taken so far. Presumably, downloaded the code...extracted to a web directory. If I remember correctly, the php is basically a compressed version of the working implementation on my server. The code should be good...it'll just have to be set to have proper permissions (to write thumbnails for caching) and all that.

I doubt I'll make a legit write-up, but will try my best to help you out. This was developed for (primarily) use with my (then) ZenPhoto gallery. I don't use it anymore, but was able to get it to work. I did have to take a few more precautions to accommodate ZenPhoto, though, now that I think of it. (http://demo.chapmanit.com/picture_rss/compatibility/)
Corey (2013-09-20 4:07:03 pm) « permalink
Hi Nick

Thanks so much for sharing this widget builder. It's exactly what I need. I am running into one problem with the builder. Anytime I try to make the thumb size anything larger than 200, the image shows up as a very small image. I am trying to make a version with 1 image and a size of 250-300.
^^ Respond to this!
Nick C (2013-10-10 11:45:15 pm) « permalink
I think I emailed you about this, but the 200px limitation is intended. Sorry for the inconvenience. I mention it on the 'About' page and show as a tooltip on the 'Widget Builder' page.

Email me and maybe we can work something out.
Chris (2013-11-09 9:52:59 pm) « permalink
Hi Nick,

I'm trying to get a feed from Zenphoto onto my web home page, but half of the thumbs are blank (black squares). I tried adding &alwayscreatethumbs=true to the feed, but that didn't do anything. The feed is; http://fishnbc.com/zen/index.php?rss=gallery&lang=

I set it up with 10-100px images with borders set at 10 and spacing set at 28 (giving me two rows). I have 9 images in the gallery for testing. Hope you can get this to work!
^^ Respond to this!
Nick C (2013-11-09 10:28:30 pm) « permalink
Chris,

I updated last month or the one before to accommodate .gif and .png thumbnails and basically tossed out ZenPhoto support. They have quirky RSS feeds and no one else does, so I thought it wasn't worth the hassel, even though displaying thumbnails from a local ZenPhoto implementation was the driving force behind this project to start with.

Anyway, I felt kinda bad so wrote an exception in to use the old logic for ZenPhoto feeds, at least if a argument is specified.

I think you should be all set if you use the following for your iframe source:

http://demo.chapmanit.com/picture_rss/?feed=http%3A%2F%2Ffishnbc.com%2Fzen%2Findex.php%3Frss%3Dgallery%26lang%3D&numtodisplay=10&thumbsize=100&htmlwidgetspacer=28&bordersize=10&bordercolor=8090AB&oldpfd=true

You MAY need to add "&alwayscreatethumbs=true" (just for one page load) but I don't think so. I'd remove it if possible as it will slow down page load time (and increase my server workload) significantly.

Let me know if that doesn't help. Have a good one!
Chris (2013-11-10 1:10:50 pm) « permalink
Thanks Nick,

That worked perfect! Didn't need the "&alwayscreatethumbs=true". I'm pretty new to all this, but I think this is a great widget and just what I was looking for. Certainly worth a donation.

Regards,
Chris
Nick C (2013-11-10 2:15:31 pm) « permalink
Glad we could get it working properly! Thanks for the kind words. The monetary support is also greatly appreciated!
Chris (2013-11-10 3:24:11 pm) « permalink
Well Nick,

Maybe I was premature in thinking all was working. It worked until I added another (10th) image to the gallery and that one displayed as a blank thumb as some of the other's did previously. I tied reloading the page and using "&alwayscreatethumbs=true", but that didn't do anything other than displaying a warning (which I wouldn't understand at my level). Hope you can figure that out.
Nick C (2013-11-10 5:14:45 pm) « permalink
I was 1/2 way through a fix for this (an accommodation for bad rss, really) when it seems to have self-corrected [unless you did something]. The image in the rss feed didn't have an image extension, which doesn't cause any issues with a browser displaying it, but gave my code trouble. I'm not sure if the your site's rss feed expired, and was generated again properly or what...

I'm glad it is fixed, but not confident the problem will not occur again.

nc
Chris (2013-11-10 10:13:33 pm) « permalink
Nick,

Hey I didn't do anything...when it self-corrected I thought you did something. Hopefully it won't happen again, or at least self-corrects if it does.
» Add Comment