Get the Widget
There are three ways to use this widget.
HTML
To use this as an HTML widget, all you have to do is include the HTML below on your page. It creates an iframe that, by default, displays 10 [ten] 25 pixel thumbnails of the most recent pictures (items) in the RSS Feed as an inline-div.
Listed below are the options which can be called to customize the widget:
- Number (of items/pictures) to Display | Add the following to the 'src' link &numtodisplay=## -- replacing '##' with the number of items you want displayed.
- Thumb Size | Add the following to the 'src' link &thumbsize=## (replacing '##' with the number of pixels tall you want the thumbnails to be. If you change this, you'll need to change the default iframe (width and height) options accordingly.
- Non Square Thumbs | By default, the widget makes square thumbs. Adding the following to the 'src' link will cause thumbs to be displayed as a standard height, allowing for various picture widths in the thumbs &square=FALSE.
- Always Create Thumbs | By default, the widget creates a thumbnail and saves it for later use. If this needs to be overridden for some reason (causing thumbnails to be created each time the widget it called -- potentially slowing the page load), add the following to the 'src' link &alwayscreatethumbs=TRUE.
- HTML Widget Spacing | By default, the Widget returns a row of pictures butting against one another, with no spacing between them. This option allows you to specify a number of pixels which will go between the pictures. To use this option, add the following to the 'src' link &htmlwidgetspacer=5 (for 5 pixels between pictures, adjust number as needed).
- Link Options | The standard behavior of the Widget is to link to the image source defined in the RSS feed -- normally a 'photo' page, not the actual image source. This option allows you to disable links completely or request that the links attempt to open in a new tab/window. To use this option, add the following to the 'src' link &makelinks=no or &makelinks=external, respectively.
» See some Widget calls that make use of the options above<html>
<head>
<title>Picture RSS</title>
</head>
<body>
my content
<div style="display: inline; /*border: 1px dashed red;*/">
<iframe
src="http://demo.chapmanit.com/picture_rss/?feed=http://api.flickr.com/services/feeds/photos_public.gne?id=49248728@N00&lang=en-us&format=rss_200"
marginwidth="0"
marginheight="0"
frameborder="no"
scrolling="no"
allowtransparency="true"
style="width: 250px; height: 25px; /*border: 1px dashed #333; background:#FFF;*/">
</iframe>
</div>
my content
</body>
</html>
» See demo code in action |
» See multiple widget calls in action |
» See Prime Mover (original implemenation)The code between (and including) the DIV tags are the actual part you will need. And you'll wanna replace the feed (in the src="...) with your feed, plus make any necessary adjustments. Hopefully, you are comfortable with HTML and CSS and can position these pictures how you'd like.
Simple PHP | Problems have been reported with implementing this. Please comment about your experiences if you try this!
This way is similar to the HTML method above with a few small exceptions: The
iframe has been removed and its height and width attributes have been assigned to its parent
div. The options (see above) are still called using the URL. Here's the code.
<html>
<head>
<title>Picture RSS</title>
</head>
<body>
my content
<div style="display: inline; /*border: 1px dashed red;*/ width: 250px; height: 25px;">
<?php include 'http://demo.chapmanit.com/picture_rss/?feed=http://api.flickr.com/services/feeds/photos_public.gne?id=49248728@N00&lang=en-us&format=rss_200"'; ?>
</div>
my content
</body>
</html>
» See demo code in actionThe PHP is all you actually need, as even the
DIV tags are just used to format the content. Be sure to replace the feed and make any necessary adjustments or option requests.
Advanced PHP (updated 2010.11.25)
This is the most flexible solution available. It allows you to call a php function which will return an array containing information about the feed and each of the items in the feed, including the file location of the newly created thumbnails of the feed items. This gives you a great deal of flexibility, as you can do whatever you wish to the files at that point, styling them with CSS and displaying them as you see fit.
Here's how to get started
- Download the necessary files (pfd_getphotos_include.php, SimplePie/) and extract to your working directory.
- Included the following in your PHP code: include 'pfd_getphotos_include.php';
- In the config section of the above file, ensure that $localthumbs is set to FALSE. The other defaults should be fine.
- In your PHP code, call the function like this: $feedPhotos=getPhotos($photoFeedURL);
That's it. With the resulting array ($feedPhotos) from the function call above, you have access to quite a bit of information about the Feed. See pfd_getphotos_include.php for additional information (the top part is documented fairly well -- beware of the rest).
If you run into trouble, comment about it and I'll help out as quickly as I can. Consider this code in pre-alpha stage, so expect bugs especially if you get into anything fancy. The documentation is in the file, but was written more as margin notes for me than as a guide for the interested -- they will not be of much help. I'll try to clean up the documentation and code at some point.