Archive for April, 2008

Page 1 of 2

#Gallery, #php, #Web Design

Functions and Me: Gallery Layout

As of recently, I’ve had a particular layout for my gallery section that just wasn’t working for me. Well, it was probably OK, and I generally approved of it–since I designed it at some point–but I always thought it felt awkward.

I’ve had the thought running through my head for a few weeks now that it would probably be a good idea to adjust the layout; perhaps to spice it up, or make it a little more pleasing to my eye. Maybe this is perfectionism kicking in, but I really enjoy making these adjustments and experimenting in how I go about completing them.

What I initially decided to do was adjust the teaser image size by widening all of them to fill the entire 9 column width–which is the size of my primary content section (I have designed this site based on a 24 column, 936px wide grid). Because of that adjustment, I have had to change the way I display each project’s summary information. There are still many adjustments to be made, but so far so good.

What I’m most proud of in all of this change, however, has nothing to do with what is ultimately displayed. No, what is most impressive lies underneath it all. That’s right, I’ve gone and done something completely unnecessary–albeit, very cool–in the gallery display options I currently possess.

I initially didn’t want to commit to the larger size, so I created a bunch of backups of my CSS files and various source code files just in case I wanted to switch back, but why the hell was I doing that when I could write a bunch of functions that would do it for me?

On my workpage, in order to display the gallery, I include a file that possesses all of the appropriate php; in this way, if I need to make an adjustment, it’s pretty easy to go through and change whatever code I need. But there was one part in particular that became a bit of a hassle to adjust. Whenever I needed make a quick layout adjustment, I had to wade through three different files to do it–chalk it up to my inexperience I guess.

To alleviate the mess, I took that section and turned it into a function that would produce that section for me; now I could separate it from that file and consolidate everything, putting it all into one central location for quick adjustment action.

In the file that contains my primary functions and controls page numbers and gallery categories, I included the newly created function (small layout size) and created another (large layout size) that I would use based on a couple of different settings variables. I also set it up so my CSS file is created on the fly–that is the one that would determine which CSS files to @import.

Because of this simple little setup, I’m able to switch between those two different layouts in about five seconds, plus any adjustments in the future will be a matter of adjusting a couple of functions.

That’s just easy.

#Frustration, #IE6, #Web Design

What’s Frustrating? Old Browsers, Slow Adoption Rates, etc.

Update: 4/28/2008 — I’ve managed to fix a few of the IE6 problems I’ve described by simply adjusting the gallery layout; this isn’t the ideal solution for me, but whatever I can do to ensure it works in that lovely browser, I’ll go ahead and do it for now.

I’ve done quite a bit of work in the past two weeks on my site; in that entire time it has never occurred to me that I needed to test in Internet Explorer 6 or 7. Why?
Because the site has rendered (somewhat) perfectly in those browsers in the past.

Not this time. I had been stuck for several hours trying to solve a couple of different rendering issues, with one still in queue. The first issue was similar to the notorious IE6 peek-a-boo bug, in which floated content appears and disappears randomly when a link is hovered over. In my case, a background image appeared to be duplicating itself rather oddly when links were hovered.

The second, very fun and exciting issue, was a pretty simple fix. In all versions of IE, my descenders were disappearing on the larger font-size bits of text. Those were mostly block level elements, so I just had to set proper margins for IE to display the entire descender. That didn’t hurt my layout, and probably ended up improving the typography.

The last two issues I’m dealing with are quite bothersome. One is a strange behavior in IE6, dealing with the rendering of a couple of floating divs, and the other is IE’s need to render extra margin space after a cleared element.


Slow adoption rates? Bah. Why am I bothering to fix this thing for IE6? Because it’s highly possible that some users will take a look at my site using that browser.

#php, #Portfolio, #Web Design

Displaying my Portfolio Pieces with PHP

When I set out to work on the current version of my website and portfolio, I initially displayed my work in much the same way as I displayed it in the last version. All of my pieces were in smaller thumbnail versions and each one (about 30 at the time) were displayed on one page; I had pagination ready to rock and roll, but with the format the thumbnails were in and the lack of real information being displayed about every piece, it didn’t make a whole lot of sense to use it.

Moving forward on this design was pretty straightforward, but I stuck with the old way initially because I had built a pretty intricate system to handle my portfolio. Not that it was difficult to adjust, just that it would take me a little time to swap things out.

When it came down to it, though, my final design on the portfolio on this version required something a little more sophisticated than what I had set up. I needed to be able to adjust how everything functioned, and quickly. I also wanted it to be quickly and easily customizable.

A quick run down of what I wanted to do:

  1. I wanted to be able to use the system I had already built to add, edit, and delete portfolio pieces quickly and easily.
  2. I wanted to use the information in the database that I had never displayed before but had built into the system.
  3. I wanted to be able to display all of the pieces by their project type.
  4. Finally, I wanted to utilize pagination for the overall portfolio, and for each category of project.

All of this could be accomplished, but it was going to require a whole lot more than I was truly prepared for, because I’m not much of a programmer. I knew some things, in php, and I knew how to accomplish those things with some very basic straightforward programming. This time, though, I needed to make some custom functions. This was going to be the only way to make this work. It might not be necessary, or accurate, but I was going to try my hand at OOP (something that isn’t really needed for this application, but something I did anyway).
Prepare, programmers, to be unimpressed.

The Details

First things first I created an array to handle my various project types. This way I could add more or remove them easily if I needed to. Following that, I created a variable that would hold the final count of the items in the array (making it easier for me to run through them later when I’ll need them). Finally, I created the class DoIt{} in order to hold a couple of the functions I’ll need to use later.

I later added a function that a) checks to see if some variable exists and then b) counts that item. I use it to make sure that two particular array counts agree with each other; this is useful for checking errors in my gallery.

$cat = array('Illustration', 'Web', 'Email', 'Print', 'Advertisement');
$arr = count($cat)-1;
class DoIt {
    function countMe($t) {
            $ct = count($t);
        return $ct;

The first two functions I need are setup to test what category is displayed and what will be displayed as a result; these are pretty simple, because they just display a little menu of category options for me, wherever I happen to place them.

The most important function was one that I had actually created for the last version of my website. Because I had already built it and worked out the kinks, I was able to reuse the code–no tweaks necessary. This function was used to handle pagination and the display of page numbers. I wanted to use this function so that I could place the page numbers anywhere, multiple times within a document just by inserting $DoIt->paginateMe() anywhere.

After all of those functions were placed in the DoIt() class, I had to initiate a new object with: $DoIt = new DoIt;.
One thing I tend to do with all of the websites I build with php is to set a base directory variable; this way I can ensure that items are always linked properly, no matter where they reside in the site’s directory structure–just in case I screw up and put something somewhere other than where I expect. So in this case I insert $base = ""; next.

Now that I have all of that functionality ready to go, I need to connect to the database (in my case MySQL) in order to grab all of that portfolio information. I create an array that holds all of my connection information (hostname, username, password, and database). I can then use it to connect to MySQL and select the appropriate database.

$server = array(
        'host' => 'HOSTNAME',
        'username' => 'USERNAME',
        'password' => 'PASSWORD',
        'database' => 'DATABASE');
mysql_connect($server['host'], $server['username'], $server['password']);

After I’ve connected to the database I run a couple of different queries. The first is to grab some information from a table I have setup that holds a few gallery settings like: how many items to display per page, the gallery thumbnail directory, and the gallery image directory. I put that information into an array to be used in various places throughout the rest of the script.

The second, and most important query I run is to grab all of my gallery information from the database. Information like: the various file names needed, the title, the description, technologies used on the project, etc. This one comes with a twist because I have to run the query based on what the user is browsing (i.e. what category have they selected if any). After I’ve run the query, the information is put into an array, safely tucked away for use in a little while.

Once I’m done with all of that, I close out the connection.

$query_set   = "SELECT * FROM table_settings WHERE id='1'";
$query_set_result  = mysql_query($query_set);
$the_settings = mysql_fetch_row($query_set_result);
$thumb_dir        = $the_settings[1];
$link_dir         = $the_settings[2];
$display_count    = $the_settings[3];
    $category= $_GET['category'];
    if ($category== "all") {
        $query_dis  = "SELECT * FROM table_display";
    } else {
        $query_dis  = "SELECT * FROM table_display WHERE type = '" . $category. "'";
} else {
    $query_dis  = "SELECT * FROM table_display";
$the_result = mysql_query($query_dis);
$row_count      = mysql_num_rows($the_result);
$r = 0;
while ($row = mysql_fetch_array($the_result, MYSQL_BOTH)) {
$info[table_column][$r]                = $row[0];
//I run through 11 items here

The next section determines what page number we’re on and how to display the various items (such as where to start or end) on each page. Basically, I evaluate the page number based on whether or not it has been sent via GET; if it has, I grab it and use that to run through the various settings.

$page = $_GET['page'];
$page = 1;
if($page == 1){
$tot = $row_count-1;
$bar = $row_count - $display_count;
$g   = $display_count;
} else {
$tot = ($row_count-1) - (($page-1) * $display_count);
$bar = ($tot - ($display_count))+1;
if($bar  0){
$bar = 0;
$g   = $row_count - $bar;

The rest is pretty straight forward. I use the countMe() function to count whether or not the items in the gallery item array match up. If they do then I display the items, if they don’t then an error has occurred that I need to look into. I use a for loop to run through and display the gallery items. All in all, its pretty simple.

$a = $DoIt->countMe($gallery[thumbs]);
$b = $DoIt->countMe($gallery[links]);
if( $a == $b ){
if ($b  $display_count) {
$tot = $b-1;
$bar = 0;
for ($i = $tot; $i >= $bar; $i -= 1) {
/*In this section I run through all of the items from the
gallery array and put them into handy variables then figure out
how I'm going to display them*/


While this may not seem very complicated, or may seem more complicated then it needs to be, I used it as a learning experience. I built this to make the update process easier for me to handle and it does that quite well.

What you don’t see here is the other half, and most useful part, of this, which is a custom built administration tool that I use to do the actual updating. I can add, edit, and delete items to the gallery with ease with that tool. I can even upload the appropriate photos. Pretty simple.

That’s how I do it. Does it seem easy?