DKF – Digital Knowledge Factory

分类： Featured

  • Customize Flickr Photo Album Plugin to Fit Your Theme

    What Is Flickr Photo Album(FPA) Plugin?

    Flickr Photo Album for WordPress is a fantastic plugin that allows you to pull in your Flickr photo sets and display them as albums on your WordPress blog.

    There is a pretty simple template provided, but you can customize the templates 100% to match the look and feel of your own site.

    And this post will guide you through the process of the customization. It’s pretty easy thanks to the great structuring of this plugin. See FPA in action here.

    Preliminaries before We Start

    From the “Look and Feel Customization” part of FPA’s wiki, we know that to customize this thing, we have to make sure the photoalbum-index.php template file (which is located inside the “template” folder in the plugin’s directory) closely match your own theme’s page.php.

    Let’s first take a look at what the photoalbum-index.php file is like:

    <?php
    /*
    Template Name: Photo Album

    More comments here are omitted…

    */
    global $TanTanFlickrPlugin;
    if (!is_object($TanTanFlickrPlugin)) wp_die(‘Flickr Photo Album plugin is not installed / activated!’);

    get_header();

    // load the appropriate albums index, album’s photos, or individual photo template.
    // $photoTemplate contains the template being used
    ?>
    <div id=“content” class=“narrowcolumn”>
    <?php
    include($tpl = $TanTanFlickrPlugin->getDisplayTemplate($photoTemplate));

    // uncomment this line to print out the template being used
    // echo ‘Photo Album Template: ‘.$tpl;
    ?>

    <?php if (!is_object($Silas)):?>
    <div class=“flickr-meta-links”>
    Powered by the <a href=“http://tantannoodles.com/toolkit/photo-album/”>Flickr Photo Album</a> plugin for WordPress.
    </div>
    <?php endif; ?>

    </div>
    <?php

    // uncomment this if you need a sidebar
    //get_sidebar();

    get_footer();
    ?>

    It is just like a standard page template of WordPress theme, isn’t it?

    Then we shall look into the page template as indicated. There should be a page template file sample in your theme’s directory, named page.php or something like that. Take my current theme as an example, the codes inside look like:

    <?php get_header(); ?>

    <div id=“whitewrap”>

    <div class=“wrapper”>

    <div id=“location”>
    <p><a href=“<?php echo get_option(‘home’); ?>/” title=“<?php bloginfo(‘name’); ?>“>Home</a> / <?php the_title(”); ?></p>
    </div>

    <div id=“secondary”>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div id=“postcontent”>
    <?php the_content(”); ?>
    </div>
    <?php endwhile; else: ?>
    <?php endif; ?>
    </div> <!– end secondary –>

    <?php include (TEMPLATEPATH . ‘/sidebar-page.php’); ?>

    </div> <!– end wrapper –>

    </div> <!– end whitewrap –>

    <?php get_footer(); ?>

    Compare these two code snipplets and you’ll realize that the main structure is nearly the same. Hence what we’re going to do next is pretty simple bearing this in mind. Besides, those comments inside photoalbum-index.php almost have told you everything you need to do(not very much, though ^^).

    Step 1: Merging the two

    First thing’s first, copy everything between <?php get_header(); ?> and <?php get_footer(); ?> from page.php to photoalbum-index.php to replace its counterpart.

    Step 2: Main Replacement

    Our purpose is to make the structure of photoalbum-index.php accords with that of page.php. So we ought to wipe out lines between <div id=“secondary”> and its closing </div>, then add following codes there:

    <?php
    include($tpl = $TanTanFlickrPlugin->getDisplayTemplate($photoTemplate));
    ?>

    <?php if (!is_object($Silas)):?>
    <div class=“flickr-meta-links”>
    Powered by the <a href=“http://tantannoodles.com/toolkit/photo-album/”>Flickr Photo Album</a> plugin for WordPress.
    </div>

    Keep the promotion link as a tribute to the author.

    Step 3: Tiny Moderation

    In fact, we’ve already finished the job. But there’s a little more to be done: Make the patching where necessary. In my sample, the navigation title should be fixed as below:

    <div id=“location”>
    <p><a href=“<?php echo get_option(‘home’); ?>/” title=“<?php bloginfo(‘name’); ?>“>Home</a> / <?php e(‘Gallery’); ?></p>
    </div>

    Mission Accomplished!

    Now the photoalbum-index.php should look like this:

    <?php
    /*
    Template Name: Photo Album

    So many comments…

    */
    global $TanTanFlickrPlugin;
    if (!is_object($TanTanFlickrPlugin)) wp_die(‘Flickr Photo Album plugin is not installed / activated!’);

    get_header();

    ?>

    <div id=“whitewrap”>

    <div class=“wrapper”>

    <div id=“location”>
    <p><a href=“<?php echo get_option(‘home’); ?>/” title=“<?php bloginfo(‘name’); ?>“>Home</a> / <?php _e(‘Gallery’); ?></p>
    </div>

    <div id=“secondary”>
    <div id=“postcontent” class=“narrowalbum”>
    <?php
    include($tpl = $TanTanFlickrPlugin->getDisplayTemplate($photoTemplate));
    ?>

    <?php if (!is_object($Silas)):?>
    <div class=“flickr-meta-links”>
    Powered by the <a href=“http://tantannoodles.com/toolkit/photo-album/”>Flickr Photo Album</a> plugin for WordPress.
    </div>
    <?php endif; ?>
    </div>
    </div> <!– end secondary –>

    <?php include (TEMPLATEPATH . ‘/sidebar-page.php’); ?>

    </div> <!– end wrapper –>

    </div> <!– end whitewrap –>

    <?php get_footer(); ?>

    In case you need more customization like hooking FPA up with Lightbox or any other display libraries, you can find out more info about how to customize this plugin here.

  • Dynamic Tree Construction according to User Role and Page

    In the developing environment of C# and .NET, dynamic data binding isn’t anything new at all. I’m here just to make a summary of how to do the job to a TreeView object, and add a few contents depending on my practical experience.

    Keywords: dynamic tree construction, user role, page.

    Problem Description

    In the classic three-layer architecture adopted by my project, we have

    1. data tables that are dealt with by a DAL-located class database.cs;

    2. a series of corresponding BLL classes to manipulate data retrieved from those tables;

    3. aspx pages and aspx.cs code files in the presentation layer.

    which means following elements are involved:

    1. data table User, UserRole, RoleTree;

    2. class User.cs, UserRole.cs, RoleTree.cs;

    3. example page sampleTree.aspx and its code file sampleTree.aspx.cs.

    A picture speaks more than a thousand words. Let’s first take a look at the chart below to get an overview of how this work is going to be done.

    Solution Pt1: User Login

    By the input username and password, we first get the userId, through which user role(s) are obtained and stored in a Session object. In case of more than one role for a specific user, we take an ArrayList as the role container.

    if (Page.IsValid)
    {
        User usr = new User();
        string userId = "";
        SqlDataReader recs = usr.GetUserLogin(txtUserName.Text.Trim(), txtPassword.Text.Trim());

        if (recs.Read())
        {
            userId = recs["UserID"].ToString();
        }
        recs.Close();

        if ((userId != String.Empty) && (userId != ""))
        {
            // get user roles, put them into session
            ArrayList alRoleIDs = new ArrayList();
            UserRole ur = new UserRole();
            SqlDataReader dr = ur.GetRoleByUserID(Int32.Parse(userId));
            while (dr.Read())
            {
                alRoleIDs.Add(Int32.Parse(dr["RoleID"].ToString()));
            }
            Session.Add("RoleIDs", alRoleIDs);
            dr.Close();
        }

    Solution Pt2: Tree Construction

    Then we take the RoleIDs of ArralyList above and some PageID of int as arguments to get the tree. Codes below are sample codes from sampleTree.aspx.cs:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindTreeData(treeSidebar, (ArrayList)Session["RoleIDs"]);
        }
    }

    private void BindTreeData(TreeView tv, ArrayList al)
    {
        RoleTree rt = new RoleTree();
        // when applied to different pages, take RoleIDs of ArrayList and PageID of int as arguments
        DataTable dt = rt.GetTreeByRoleIDandPageID(al, 3); // 3 is an exmaple of pageId
        tv.Nodes.Clear();

        foreach (DataRow row in dt.Select())
        {
            TreeNode tempNode = new TreeNode();
            tempNode.Text = row["Title"].ToString();
            tempNode.Value = row["NodeID"].ToString();
            tempNode.Expanded = false;
            tempNode.NavigateUrl = row["Url"].ToString();

            tv.Nodes.Add(tempNode);
        }
    }

    Further Notice

    //It is especially useful when applied to MasterPages.

    //This solution does not take node’s parent into account, which means the TreeView object constructed is not a real tree, strictly speaking.