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