I have created a photo site over at pics.neelfirst.com. You can read about it here. This post will cover some technical points about building the site.
I still don’t really know anything about CSS. My learning process was trial-and-error. I stole the CSS for a horizontal navbar template from this guide and varied the parameters until it looked like what I wanted to. I was fortunate that the guide described building photo galleries that looked exactly (except color scheme) like I wanted mine to look.
This is the final CSS for the navbar. It uses an unordered list forced inline by CSS. There are probably some redundancies but I left them there once I got the navbar to look how I wanted. I wanted the site and navbar to match the blog CSS as closely as possible so some digging around in Wordpress and the Atahualpa theme was necessary.
/* navbar settings */
div#portfolioname
{
float: left;
background-color:#ffffff;
color: #000000;
padding: 10px 0 5px 0;
font-family:tahoma, arial, sans-serif;
font-weight: bold;
font-size: 102%;
}
div#navbarcontainer
{
text-align: center;
width: 778px;
margin: auto;
background-color:#ffffff;
margin-bottom: 20px;
font-family:tahoma, arial, sans-serif;
font-size: 100%;
}
div#navbar
{
color:#666666;
background-color:#ffffff;
border-bottom:1px dashed #cccccc;
}
div#navbar ul
{
padding: 10px 0 5px 0;
margin: 0;
background-color:#ffffff;
text-align:right;
}
div#navbar ul li
{
display: inline;
padding: 0;
margin: 0;
}
div#navbar ul li a
{
color: #666666;
background-color: #ffffff;
text-decoration: none;
padding: 0 5px 0 5px;
text-align: right;
width: 9em;
font-family:tahoma, arial, sans-serif;
font-size: 100%;
}
div#navbar ul li a:hover, #nav ul li a:focus
{
color:#000000;
font-size: 100%;
}
Once I got the hang of modifying CSS I was able to create CSS for the index.php frontpage without much difficulty. I also had to learn about div and span tags because the last time I wrote HTML was in 2001(!) leaving me far behind today’s standards. One issue I could not resolve was the “jumping” of the top navbar between my index frontpage and the gallery pages. The guide I linked to above alluded to this being a CSS implementation issue, which sounded like too much for me to deal with at the time. The other curiosity I encountered was that of padding. I could not get padding to work out the way I wanted except for the textblock div, and apparently it uses absolute positioning by default, so I had to pad the thumbnail width plus change to get the separation between image and text that I wanted.
#mainblock
{
width:778px;
background-color:#ffffff;
margin: auto;
text-align:left;
}
#textblock
{
padding: 0px 0px 0px 130px;
}
#title, #title a, #title a:visited, #title a:active
{
font-family: tahoma, arial, sans-serif;
font-weight: bold;
font-size: 100%;
margin-top: 0px;
color: #666666;
text-decoration: none;
}
#title a:hover
{
font-family: tahoma, arial, sans-serif;
font-weight: bold;
font-size: 100%;
margin-top: 0px;
color: #000000;
text-decoration: none;
}
#text
{
font-family: tahoma, arial, sans-serif;
font-size: 75%;
margin-bottom: 5px;
color: #000000;
}
Finally there is a bunch of header junk you’ll see if you download the full index.css yourself. I don’t know what it means but all CSS files seem to have that sort of stuff in it so I just kept it. It’s sad but true – if you don’t need to know it, you probably won’t learn it.
The only thing worth noting that I created in PHP is the filter function on the main page. Originally I thought I could implement it by filtering out div tags of a particular name, which is why if you look at the source there are a large (possibly excessive) amount of div tags around each album item. But there is a simpler way to do it just by using if-statements and an onchange GET query.
This is the filterbox itself, just plain old HTML (I think the onchange is javascript though…?) The onchange executes a GET query (like when you do a Google search you see ?q=searchtext popup in the URL) to the same index.php, which is basically a refresh with the new variable settings. I wish the latency could have been zero (i.e. real-time filter), and I know there is a way to do it, but I don’t know what it is.
form select onchange="window.location='index.php?group='+this.value" option value="#" disabled--- filter ---/option option value="all"all/option option value="top rated"top rated/option option value="europe"europe/option option value="life"life/option option value="los angeles"los angeles/option option value="new zealand"new zealand/option option value="united states"united states/option /select /form
I had issues assigning the value of the variable in PHP. $value=_GET["group"] did not work, but foreach _GET as $key => $value {} did work. I don’t understand why one way didn’t work and the other did. The remainder of the PHP involved is inserting if statements around each album block.
?php if ($value=="life || $value=="all") { ?
div id="albumblock" --- /div
?php } ?
Finally I forced the default $value to be “all” so on the first visit to the site there isn’t just a dumb blank screen. if ($value="") $value="all" does the trick just fine.
If you find any issues while browsing the site, or if you know the answers to any of the conundrums I pointed out above, please drop a comment to let me know. Thanks.