Kevin Brammer

Creating a Simple Photo Gallery with FlickrNet

2008-09-20T22:17:00Z

Updated 9/18/08

If you have been looking for a way to include your Flickr photos on your website using ASP.NET, then you definitely need to take a look at the FlickerNet API. There are several good examples on the site to help you get started, but I didn't see any that showed how to return photos from a specific set. After a little trial and error I was able to figure out how to accomplish this, and it turns out that it is quite easy.

The first issue I had was due to the fact that I am hosting my site on a managed server with 1and1.com. Turns out you have to declare the proxy directly within the FlickrNet configuration parameter. You also have to make sure that you are using your actual UserID and not your screen name. I learned this the hard way, but I discovered that the easiest way to determine your UserID is to look at the RSS feed links on any of your Flickr pages. One other issue I ran up against involved permission errors for the default cache setting for FlickrNet. I decided that I was not going to need this and simply disabled the cache setting in the web.config. Let's take a look at the necessary web.config settings. You may need to change these depending on your particular needs. Remember that the proxy setting is for sites hosted with 1and1.

Web.config

  <section name="flickrNet" type="FlickrNet.FlickrConfigurationManager,FlickrNet" allowLocation="true" /> 
</configSections> 
<flickrNet apiKey="putyourflickrAPIkeyhere" secret="flickrsharedsecret" cacheDisabled="true" > 
  <proxy ipaddress="ntproxy.1and1.com" port="3128" /> 
</flickrNet> 
<appSettings> 
  <add key="UserId" value="flickrUserID"/> 
</appSettings> 

The method that I used to return the photo collection from a particular set in Flickr is pretty straightforward.

Gallery.aspx.cs

using System;

public partial class Gallery : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        PhotoRepeater.DataSource = RecentPhotos(); 
        PhotoRepeater.DataBind(); 
    } 
    public static FlickrNet.PhotoCollection RecentPhotos() 
    { 
        FlickrNet.Flickr flickr = new FlickrNet.Flickr(); 
        FlickrNet.Photoset set = flickr.PhotosetsGetPhotos("72157600111054287"); 
        return set.PhotoCollection; 
    } 
} 

Now that we have the web.config and the code behind set up and ready to go, it is time to decide how to present the information. The example on the FlickrNet site has a good example of how to use the Repeater control to return thumbnails with links back to the main Flickr page. I wanted to spice things up a bit, so a found a nice Javascript gallery that would work with the repeater control called SmoothGallery.

In order to use SmoothGallery, follow the setup instructions provided on the site. Then set up your repeater control's item template with the basic image information as follows.

Gallery.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Gallery.aspx.cs" Inherits="Gallery" %>

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Sandbox</title> 
    <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" /> 
</head> 
 
<body> 
    <form id="form1" runat="server"> 
      <div id="body"> 
            Gallery made possible with <a href="http://www.flickr.com">Flickr</a>, <a href="http://smoothgallery.jondesign.net">SmoothGallery</a> and <a href="http://www.codeplex.com/FlickrNet/"> 
            FlickrNet</a> API<br /><br /> 
      <div id="myGallery"> 
            <asp:Repeater runat="server" ID="PhotoRepeater"> 
                <ItemTemplate> 
                    <div class="imageElement"> 
                        <h3><%# Eval("Title") %></h3> 
                        <p>Copyright 2007 Kevin Brammer</p> 
                        <a href="<%# Eval("WebUrl") %>" title="open image" class="open"></a> 
                        <img src="<%# Eval("MediumUrl") %>" class="full" /> 
                        <img src="<%# Eval("SquareThumbnailUrl") %>" class="thumbnail" /> 
                    </div> 
                </ItemTemplate> 
            </asp:Repeater> 
       </div> 
    <script type="text/javascript"> 
        function startGallery() { 
            var myGallery = new gallery($('myGallery'), { 
                timed: false 
            }); 
        } 
        window.addEvent('domready', startGallery); 
    </script> 
  </div> 
    </form> 
</body> 
</html> 

And that should just about do it. Also, be certain that you don't have any fancy CSS affecting your links, because that might mess with the gallery navigation. Good luck!

Yahoo Style GridView Using CSS

2008-09-12T06:50:00Z

Live Demo

I just added a Yahoo style GridView theme to the sandbox, which is designed to work with an out-of-the-toolbox GridView control. I wanted to experiment with sprite design, where all of the backgrounds are combined in one image and shifted using CSS. All in all, I think it works fairly well ^_^

As usual, I have tried to keep all my themes as simple as possible to implement. You can check them out here.

Photo Gallery Example Using ASP.NET and Flex

2008-07-08T22:31:00Z

I have been dabbling with Flex recently with the intent to try and create a simple XML driven Flash photo gallery with scrolling thumbnails. I am happy with the results so far, although I plan on improving the UX, error handling, load time and adding the ability to browse several categories. Once that's done I'm considering doing the whole project again in Silverlight ^_^

Live Demo

ASP.NET Web Handler

I decided to have the list of photos for the gallery delivered as XML using a standard .NET web handler. This way I can add or delete photos in the future without having to tinker with the Flex application. Since my photos are hosted at Flickr, I chose to use the Flickr.NET API to gather information from a specific photo set on my account and let the web handler format the result as XML. I will eventually also have the web handler respond dynamically to different URL parameters in order to browse more than one photo set. There are a couple of good examples available at the FlickrNet API Library on CodePlex if you haven't used this API before. The most important thing to remember is if you are hosted on a shared server such as 1and1 (like me), you may find that you need to specify a proxy in both the <flickrNet /> and the <defaultProx /> locations in order to make any web requests outside of your host. You will also need to get you API key and secret from Flickr to add to the web.config.

web.config

Setting up flickr.dll and 1and1 proxy:

<configuration>

  <configSections>

    <section name="flickrNet" type="FlickrNet.FlickrConfigurationManager,FlickrNet"

       allowLocation="true" />

  </configSections>

  <flickrNet apiKey="yourFlickrAPIKeyGoesHere" secret="yourSecretGoesHere"

       cacheDisabled="true" >

    <proxy ipaddress="ntproxy.1and1.com" port="3128" />

  </flickrNet>

  <appSettings>

    <add key="UserId" value="yourFlickrUserIdGoesHere"/>

  </appSettings>

  <!-- rest of web.config -->

  <system.net>

    <defaultProxy>

      <proxy usesystemdefault="False"

       bypassonlocal="False"

       proxyaddress="http://ntproxy.1and1.com:3128"

/>

    </defaultProxy>

  </system.net>

</configuration>

Formatting the information returned from Flickr is accomplished by using Mark Rasmussen's XML Output Fluent Interface, which has really been saving me quite a bit of time lately. You can find the class and implementation examples on his site. In this case, I decided to just wrap it under the default web application namespace. Otherwise you'll need to add the appropriate 'using' statement if you decide to add it to another namespace. Here is the complete code for the web handler:

The Web Handler

flickrfeed.ashx:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;

using System.Web;

using FlickrNet;

public class Handler : IHttpHandler

    public void ProcessRequest(HttpContext context)

        String output;

        context.Response.ContentType = "text/xml";

        context.Response.ContentEncoding = System.Text.Encoding.UTF8;

        // Assign the XML document

        output = XMLdata();

        context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600));

        context.Response.Cache.SetCacheability(HttpCacheability.Public);

        context.Response.Write(output);

    public bool IsReusable

        get { return true; }

    public String XMLdata()

        // Get data

        Flickr flickr = new Flickr();

        Photoset photos = flickr.PhotosetsGetPhotos("72157600111054287");

        // Create XML document

        XmlOutput xo = new XmlOutput()

        .XmlDeclaration()

        .Node("images").Within();

        foreach (Photo pic in photos.PhotoCollection)

            String _title = "";

            String _image = "";

            String _thumbnail = "";

            if (pic.Title != "")

                _title = pic.Title;

            if (pic.MediumUrl != "")

                _image = pic.MediumUrl;

            if (pic.ThumbnailUrl != "")

                _thumbnail = pic.ThumbnailUrl;

            xo.Node("pic").Within()

            .Node("title").InnerText(_title)

            .Node("image").InnerText(_image)

            .Node("thumbnail").InnerText(_thumbnail)

            .EndWithin();

        return xo.GetOuterXml();

An Example of the XML Output

Flex Gallery

Now that I have my Flickr XML feed up and running the way I want it, I can import it into Flex by retrieving it with HTTPService named "photos" and returning it as E4X:

<mx:HTTPService id="photos" url="flickrfeed.ashx" result="xmlQuery(event)" resultFormat="e4x" />

Note that you may need to use a fully qualified URL, such as "http://www.example.com/directory/flickrfeed.ashx" if you want to host your gallery in a different location than your feed. The HTTPService is launched using the "send()" method via the application's "creationComplete" event:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

     creationComplete="photos.send()" backgroundGradientAlphas="[1.0, 1.0]"

     backgroundGradientColors="[#002579, #1D0000]">

At which point the result event is sent to xmlQuery(event) method to create the thumbnails, load the first image and title. One of my goals for the gallery was to have scrolling thumbnails. This proved a little more difficult than I had anticipated, and I still have work to do on controlling the speed and scrolling bounds more accurately.

The scrolling thumbnail effect is achieved in part by using a simple mask, by nesting the larger HBox containing the thumbnail images within a smaller containing HBox. To keep scroll bars from appearing when the content exceeds the bounds of the container, you must set the verticalScrollPolicy and horizontalScrollPolicy to "off". The Move effects are declared in separate MXML tags and added via event parameters within the individual button controls. You can specify a particular target control for the effects using the "target" parameter in the effect tag, and additionally calling the effect using the "play()" or "stop()" methods from the button control:

<mx:Button label="&gt;" id="rightBtn" mouseOver="mr.play()" mouseOut="mr.stop()"

     height="40" width="33"/>

<mx:Move id="mr" xTo="0" duration="1500" target="{tscroller}" />

Flex Flickr Gallery

You can view the FlexFlickrGallery MXML source here.

Here are a couple of Flex related links I found to be useful:

Again, this is just a first step and I always welcome any suggestions and feedback.

ASP.NET GridView Themes

2008-06-01T02:28:00Z

I have posted a few more gridview themes and jazzed up the interface for my preview page a little so that it is easy to switch between different styles and download the source code. I have tried to keep these as simple as possible to implement. You can check them out here.

Using a .NET Web Handler to Generate Dynamic XML Feed for Flash

2008-05-31T23:22:00Z

Mark Rasmussen has a really useful XML document fluent interface posted that I have been using for generating XML data feeds for my Flash/Flex projects. While there are certainly alternative methods to acheive the same result, such as LINQ to XML, XMLSerializer or XMLWriter, I have found that Mark's fluent interface is easy to use and has been great for my purposes. What I typically have been doing is creating a web handler, checking the query string for the type of feed required and then sending the appropriate queries to the database to return the desired information that I want to format as XML. The following example certainly has room for improvement - the query string should probably undergo some type of validation and probably a few other things that I haven't even considered yet :-)

Using the interface is as simple as adding his XMLOutput class to your App_Code folder and instantiating it from your page or handler:

<%@ WebHandler Language="C#" Class="Handler" %> 
 
using System; 
using System.Web; 
 
public class Handler : IHttpHandler 
{ 
    public void ProcessRequest (HttpContext context) 
    { 
        String category = context.Request.QueryString["cat"]; //add validation here 
        String output; 
        context.Response.ContentType = "text/xml"; 
        context.Response.ContentEncoding = System.Text.Encoding.UTF8; 
 
        // Assign the XML document 
        output = XMLdata(category); 
 
        context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600)); 
        context.Response.Cache.SetCacheability(HttpCacheability.Public); 
        context.Response.Write(output); 
    } 
 
    public bool IsReusable 
    { 
        get { return true; } 
    } 
 
    public String XMLdata(String _category) 
    { 
        // Send query/parameter and get data 
        BlogDataSetTableAdapters.ImagesTableAdapter ta = new BlogDataSetTableAdapters.ImagesTableAdapter(); 
        BlogDataSet.ImagesDataTable dt = ta.GetImages(_category); 
 
        // Create XML document 
        XmlOutput xo = new XmlOutput() 
        .XmlDeclaration() 
        .Node("images").Within(); 
 
        foreach (BlogDataSet.ImagesRow row in dt.Rows) 
        { 
            String _title = ""; 
            String _filename = ""; 
            String _caption = ""; 
            String _thumbnail = ""; 
 
            if (row.title != "") 
            { 
                _title = row.title; 
            } 
            if (row.filename != "") 
            { 
                _filename = "images/" + row.filename; 
                _thumbnail = "thumbs/" + row.filename; 
            } 
            if (row.caption != "") 
            { 
                _caption = row.caption; 
            } 
            xo.Node("pic").Within() 
            .Node("image").InnerText(_filename) 
            .Node("title").InnerText(_title) 
            .Node("thumbnail").InnerText(_thumbnail) 
            .Node("caption").InnerText(_caption) 
            .EndWithin(); 
        } 
        return xo.GetOuterXml(); 
    } 
} 
 
An Example of the XML Document Output:
 
<?xml version="1.0" encoding="utf-8"?>
<images>
  <pic>
    <image>images/savvy.jpg</image>
    <title>tshirt design for local magazine</title>
    <thumbnail>thumbs/savvy.jpg</thumbnail>
    <caption>tshirt design for local magazine</caption>
  </pic>
  <pic>
    <image>images/Robertsmith.jpg</image>
    <title>Robert Smith Tshirt Design</title>
    <thumbnail>thumbs/Robertsmith.jpg</thumbnail>
    <caption>tshirt design for Robert Smith</caption>
  </pic> 
<!--//rest of document//-->

Test Driven Development Quickstart Series

2008-04-14T00:46:00Z

Bacardi Bryant has started a great quickstart series for developers looking to get started with test driven development (TDD) over at xnode-online.

His series:

Favorite FireFox Add-ons for Web Development

2008-04-07T11:15:00Z

Here are a couple of FF Add-ons that I have been finding really useful:

FireFTP - great for using FTP as a tab in your browser window. Saves your connection profiles and makes it easy to do quick updates and previews with web development.

GMarks - If you like using Google Bookmarks instead of a social bookmarking site, this add-on makes it easy to organize your bookmark labels as folders. You'll definitely want to set it up to use the sidebar - this seems to work the best. Once you are up and going and have all of your bookmarks organized, it is simple to drag a link from your address bar directly into the sidebar folder you want it to appear in. Also has a nice search feature.

FireBug - Definitely worth a test drive if you still haven't tried this yet. This really eliminates the need for the old 'right-click-view-source-selection' technique in order to troubleshoot layout and CSS issues. Of course, it does a lot more than that, but I use it because it previews the source code and CSS really well.

Gamer GridView Theme

2008-04-07T10:46:00Z

Live Demo

Here is another gridview theme I have been playing around with this weekend based on a general CNET GameSpot style. The CSS for the gridview has been put into its own file for this series of posts, so that I can change the look of a gridview quickly without changing the class names that have been assigned to it:

CSS links in Head tag:

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="GamerGridView.css" rel="stylesheet" type="text/css" />

Standard GridView declaration:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" CssClass="GridViewStyle" DataKeyNames="CustomerID" DataSourceID="ObjectDataSource1"
            GridLines="None">
            <Columns>
                <!-- Your columns here -->
            </Columns>
            <FooterStyle CssClass="FooterStyle" />
            <RowStyle CssClass="RowStyle" />
            <EmptyDataRowStyle CssClass="EmptyRowStyle" />
            <PagerStyle CssClass="PagerStyle" />
            <SelectedRowStyle CssClass="SelectedRowStyle" />
            <HeaderStyle CssClass="HeaderStyle" />
            <EditRowStyle CssClass="EditRowStyle" />
            <AlternatingRowStyle CssClass="AltRowStyle" />
        </asp:GridView>

I tried a couple of different things on this version, and I am curious if they will work out well enough. In particular, the header styles are based on the links - so changing font sizes or wrapping text in the header will probably break the theme :-( I don't think I will spend much more time on this one, so I decided to go ahead and post it in the hopes that someone may find it useful.

Here's the contents of GamerGridView.css:

/*GridViewCSS Glass Black Style*/
.GridViewStyle
{
    font-family: Arial, Sans-Serif;
    font-size:small;
    table-layout: auto;
    border-collapse: collapse;
    border: #1d1d1d 1px solid;
}
/*Header and Pager styles*/
.HeaderStyle
{
    background-image: url(Images/HeaderGamer_left.jpg);
    background-position:left;
    background-repeat:repeat-x;
    height:30px;
}
.PagerStyle
{
    background-image: url(Images/PagerGamer.jpg);
    background-position:top;
    background-repeat:repeat-x;
}
.HeaderStyle th
{
    padding: 0px;
    color: #ffffff;
}
.HeaderStyle a:link, a:visited
{
    text-decoration:none;
    color:#ffffff;
    display:block;
    text-align:left;
    font-weight:normal;
    border-left:solid 1px #666666;
    border-right:solid 1px #1d1d1d;
    padding-top:25px;
    padding-bottom:9px;
    padding-right:5px;
    padding-left:5px;
    background-image: url(Images/HeaderGamer.jpg);
    background-position:top;
    background-repeat:repeat-x;
}
.HeaderStyle a:hover
{
    background-image: url(Images/HeaderGamer_Hover.jpg);
    background-position:top;
    background-repeat:repeat-x;
}
.PagerStyle table
{
    text-align:center;
    margin:auto;
}
.PagerStyle table td
{
    border:0px;
    padding:5px;/*padding around pager numbers */
}
.PagerStyle td
{
    border-top: #1d1d1d 1px solid;/*top border of pager*/
    height:40px;
}
.PagerStyle a
{
    color:#ffffff;
    text-decoration:none;
    padding:2px 10px 2px 10px;
    /*border around pager numbers*/
    border-top:solid 1px #777777;
    border-right:solid 1px #333333;
    border-bottom:solid 1px #333333;
    border-left:solid 1px #777777;
}
.PagerStyle span
{
    font-weight:bold;
    color:#FFFFFF;
    text-decoration:none;
    padding:2px 10px 2px 10px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
{
    padding: 5px;
    border-right: solid 1px #1d1d1d;
}
.RowStyle td
{
    background-color: #333333;
    color: #ffffff;
}
.AltRowStyle td
{
    background-color: #1d1d1d;
    color:#ffffff;
}
.SelectedRowStyle td
{
    background-color: #ffff66;
}

And the images:

Pager image (jpg)

Pager image native (Fireworks PNG)

Header image (jpg)

Header image native (Fireworks PNG)

Header image - left side (jpg)

Header image - Hover (jpg)

Johnny Chung Lee's C# Wiimote Projects

2008-03-21T17:47:00Z

I just discovered these videos by Johnny Chung Lee showing some pretty interesting projects using C#, a Wii controller and a bluetooth connection. My favorite is "Head Tracking for Desktop VR Displays using the Wii Remote":

Glassy Black GridView Theme

2008-02-24T20:39:00Z

Live Demo

Overview

I have been following Matt Berseth's posts covering DataGrid designs and decided to try a create my own theme. This theme is entirely CSS based on a standard GridView control using .NET 2.0. I've only tested it with Firefox 2 and IE7 so far, so there may be some lingering CSS issues to resolve.

Installation

Once you drag a default GridView onto the page, you will need to set the appropriate CSSclass for the GridView and each RowStyle as well as set GridLines to None:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
    AutoGenerateColumns="False" CssClass="GridViewStyle" GridLines="None">
    <Columns>
        <!-- Bound field parameters go here -->
    </Columns>
    <RowStyle CssClass="RowStyle" />
    <EmptyDataRowStyle CssClass="EmptyRowStyle" />
    <PagerStyle CssClass="PagerStyle" />
    <SelectedRowStyle CssClass="SelectedRowStyle" />
    <HeaderStyle CssClass="HeaderStyle" />
    <EditRowStyle CssClass="EditRowStyle" />
    <AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>

If you do not already have a stylesheet attached to your page, you will need to create one using "Add New Item" and make sure it is referenced in the <head> of you web page. Assuming you named your stylesheet the default "Stylesheet.css", your <head> tag should look something like this:

<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

And here is the CSS:

/*GridViewCSS*/
.GridViewStyle
{
    font-family: Arial, Sans-Serif;
    font-size:small;
    table-layout: auto;
    border-collapse: collapse;
    border: #1d1d1d 5px solid;
}
/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
{
    background-image: url(Images/HeaderGlassBlack.jpg);
    background-position:center;
    background-repeat:repeat-x;
    background-color:#1d1d1d;
}
.HeaderStyle th
{
    padding: 5px;
    color: #ffffff;
}
.HeaderStyle a
{
    text-decoration:none;
    color:#ffffff;
    display:block;
    text-align:left;
    font-weight:normal;
}
.PagerStyle table
{
    text-align:center;
    margin:auto;
}
.PagerStyle table td
{
    border:0px;
    padding:5px;
}
.PagerStyle td
{
    border-top: #1d1d1d 3px solid;
}
.PagerStyle a
{
    color:#ffffff;
    text-decoration:none;
    padding:2px 10px 2px 10px;
    border-top:solid 1px #777777;
    border-right:solid 1px #333333;
    border-bottom:solid 1px #333333;
    border-left:solid 1px #777777;
}
.PagerStyle span
{
    font-weight:bold;
    color:#FFFFFF;
    text-decoration:none;
    padding:2px 10px 2px 10px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
{
    padding: 5px;
    border-right: solid 1px #1d1d1d;
}
.RowStyle td
{
    background-color: #c9c9c9;
}
.AltRowStyle td
{
    background-color: #f0f0f0;
}
.SelectedRowStyle td
{
    background-color: #ffff66;
}

The last step is to create a folder in your root directory titled "Images" and add the background image "HeaderGlassBlack.jpg" to it. That should do it!

Getting Started with weblogs.asp.net

2008-02-21T12:35:00Z

Creating a Blogroll Listing on Your Blog's Side Panel

For some reason, I missed this in the control panel the first time around. If you want to add additional content in the sidebar of your asp.net weblog, go to your blog's control panel, select "Manage Content" and select "All Lists". Choose "Create a new list" and give your list a name and description. Finally, once you are finished and click OK, you should see the options to add list items. Remember that there will probably be a delay from the time you create your list until the time it shows up on your page.

Writing Content Using Windows Live Writer

Joe Stagner has a great tutorial on how to configure Windows Live Writer to work with weblogs.asp.net. One of the biggest advantages of using Windows Live Writer for posting content is the ability to insert formatted code as HTML with syntax highlighting. In order to do this you will have to install the Code Snippet plugin for Windows Live Writer or Insert Code for Windows Live Writer.