Site Launch

by Alexis Hope, 18 Nov 2010

Alright! This site has been a few years overdue. But I can finally welcome you here, to my showcase site. I like to think of it as my personal ranting ground.

An interesting layout I came across when putting this site together was the columned layout of Pinterest (thanks to Aaran Casey for pointing that site out). They have a fluid height format on pin’s (or posts). Unlike most gallery style layouts which have cropped height and width images, to create equal horizontal rows. This Pinterest layout is a nice idea, it breaks the page up a bit, giving it a format similar to more traditional media (news paper columns). This is easier enough to archive with floating columns, but the tricky part is breaking up the items to display into equal parts. Pinterest achive this by absolute positioning the images. They also have a nifty javascript function to re-calculate column numbers on browser resize. It works well on standard monitors but I don’t like full width websites on wide screen monitors (to much effort in the neck to look side to side). I’m happy with a max of 3 columns on a typical 900px layout. Here’s the function I used to separate the images into columns.

  public function Columns() {
        $pages = DataObject::get('PortfolioPage',"ParentID = $this->ID AND Status='Published'");
        $ColumnOne = new DataObjectSet();
        $ColumnTwo = new DataObjectSet();
        $ColumnThree = new DataObjectSet();
        $count = 1;
        foreach($pages as $page) {
            if($count > 3) {
                $count = 1;    
            }
            switch($count) {
                case 1:
                    $ColumnOne->push($page);
                    break;
                case 2:
                    $ColumnTwo->push($page);
                    break;
                case 3:
                    $ColumnThree->push($page);
                    break;    
            }
            $count ++;
        }
        return $this->customise(
            array(
                "ColumnOne" => $ColumnOne,
                "ColumnTwo" => $ColumnTwo,
                "ColumnThree" => $ColumnThree
            )
        )->renderWith(
            array(
                "PortfolioColumns"
            )
        );
    }
    

I’m using the awesome Silver Stripe framework Jekyll static site build for this site. The function was placed in the controller of PortfolioHolder class. After rendering the columns with a custom template file, this function can be called in PortfolioHolder.ss as $Columns