Things I've Tagged ‘Portfolio’

Page 1 of 1

#Portfolio, #Web Design

Reworking My Professional Portfolio

I’ve been working on a format for my portfolio for a long time now–about six months in fact. But coming up with a way to showcase your own work is kind of tough in an own-worst-critic sort of way. At the moment I’m in the process of getting the details and design together, with the former being the most difficult.

In the past I put together a custom portfolio management app; it was crude and poorly programmed, but it got my feet wet in working on that sort of thing in php and mysql, and has launched me onto many experimental ideas. But it became a bear to manage as it was built with one design in mind, and when I moved on to others I had to adapt my site for that format. Not ideal in the least.

Most recently I put together a small manually built portfolio. It showcases a few pieces, and that’s about it. Not very impressive, but minimally invasive.

At this time, I’ve chosen to work with a second WordPress install to run my portfolio. This will allow me to categorize and tag my work as I add it to the portfolio, managing the work in a way that I’ve never really done in the past. Hopefully I get an opportunity to launch it soon, but in the meantime, take a look at my current portfolio.

#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?