I recently had the pleasure of building an incredible site for some massively talented photographers. I’d like to talk a bit about the process of making a photography site, and walk you through the steps required to create this awesome website.
First, I had to collect all of their best images for the site, luckily for me they had TONS to choose from and they were ALL amazing. Then I collected the personal info, and the reviews from their Facebook, and wrote some short copy for the ‘About’ Section. I carefully chose some great colors for the site palette, and got ready. I always consider color psychology when creating a palette. In this case I chose purple for it’s creative/imaginative feel, and green for it’s health/wealth/growth properties. I think it worked well, overall.
Once I had the content together it was time to start building the site. First things first – I loaded in my favorite CSS and JS libraries, and fonts.
Bootstrap, jQuery, Animate.css, and font-awesome.
I started out with a typical Bootstrap nav-bar and hamburger menu, and added a sliding animation for the top menu, I set the menu to a fixed position at the top of the page. Next I got going on the carousel of hero images at the top. I sifted through all of their photos and found only the absolute best to include at the very top to be seen immediately by visitors.
The carousel is great because you can click the arrows or swipe left and right to see more images. It also automatically advances frames if you just leave the page open.
Now we’re getting somewhere. Next it was time for the meat and potatoes – the ‘works’ section. I found some code examples to refer to for a responsive gallery, and got started creating some jQuery animations, and got it working. Then I picked out images and captions for the ‘works’ section of the site. Family, Weddings, Etc. Next, I resized all the images to the same size so that they would fit correctly within the page. I added an Animate.css fadeInUp to make the pictures appear to fade in, and move up as you scroll down the page, as if by magic.
I used wowload to load the pictures only when you reach them on the page. This helps with optimization, and performance.
After carefully putting this important element of the page together, I moved on to the ‘About’ section. I felt it important to keep things interesting, so I chose to go with a fixed-image background for this section. That way – it appears that the words scroll smoothly over the image of the camera. I used Photoshop to create a purple gradient that matches the site palette, over the black and white image of the camera. I could have done this with CSS but to keep the performance optimum I chose to Photoshop the gradient instead.
I got this done, but I needed to add something to make this section pop. I chose to add an animate.css slideInRight, and slideInLeft for the text. This really makes for a neat effect as the text slides in from both directions.
Now the Services section. – It’s important to answer the question: “What do you do?” I used font-awesome’s ‘awesome’ icon’s to get this job done. The code for these is really simple. Just create an <i> element, and set your class=’fa fa-iconnamehere’ choosing from the massive list of icons here.
Phew, this is a lot of work. I took a big break at this point and came back, and when I did I knew it was time to get going on the ‘reviews’ section.
It’s only natural to use a carousel for the reviews: it doesn’t take up much space, and you can naturally scroll or swipe through the information.
Now this carousel got a little tricky because it has inner and outer elements, and indicators. I usually comment my closing tags to help out in situations where it’s tricky to know where each div closes… like this:
The result is nicely formatted and gives you little indicators/buttons to switch back and forth between the reviews.
The next question on our list to answer is: “Who is Mom’s on the Edge Photography” – and the Answer is the Team section. I always consider shape psychology in a design so I did something really neat here with the images. I made them round using the CSS border-radius property.
Circles & Ovals are known to create the feeling of: Positive and emotional relationships, mimicking the idea of a symbolic ring are associated with these shapes. Connectivity, friendship, community, and unity are called to mind in these logos. Circles have no beginning and no end, these designs feel timeless. Here’s the code to make that happen:
This code appears in the ‘style.css’ obviously, not in the HTML.
When you’ve got your border-radius setup nicely, it looks like this. You could also just round the edges a few pixels, if you want.
Time to throw in something kinda fun before we close the deal with a big call-to-action contact form!
I used the font-awesome icons again here. Just remember it’s an <i> element, and set your class =’fa fa-icon-name’ It’s EASY!
You definitely have to make sure you have the font-awesome fonts loaded in the head of your HTML though, don’t forget!
Again, you can see that I used comments to show where each div closes. This is a great habit to learn, you will thank me later!
Well that was all pretty simple CSS/Bootstrap stuff, so it was pretty fun. A few challenges mixed in, but now… It was time for the tough part.
Creating a PHP contact form. It’s a beautiful thing when it’s completed and works properly, but it takes some doing.
First let’s look at the HTML/PHP for that in our index.php file. Note the $_POST functions here. This connects to our external PHP file to get the file sent out. Note how there are PHP variables being echo’ed here if there are errors validating the form. This is important because the user has to know what’s going wrong if it doesn’t work when they click ‘send’.
Once we got all this in there we have to build our contact form – I did it in contact.php and loaded it in using php’s include function in the head of my document.
Now let’s see what it’s pulling in from the contact.php file. I downloaded this script file a long time ago, and I keep a copy of it for projects like this. It’s pretty simple, but it’s nice to have a code snippet to use each time for something like this. The file sets the variables for to/from and passes along the information it receives from your inputs, to send it off where it needs to go. You can see that there is some simple logic included here to validate the form, make sure an email is an email, and make sure the sender is in fact a human. If their answer to 2+3 does not equal 5: it will not send the message and will output an error.
Here’s the whole file:
Well, all the hard stuff is done, We’ve done a great job of showing off those photos, giving them a way to contact the site owner, but we need to close out the page with a footer. Before we do so I also put in another button, because the site has another page – a larger image gallery.
I added an animate.css ‘infinite flip’ for the Facebook button. It’s just begging to be clicked as it flips over and over, endlessly.
So that’s how you build a great site… But wait!!! We’re not done!
We’re just getting to the best part. A dynamically loaded image gallery. That means we don’t have to manually code in an <img src=””> for each and every image, we can just pop them all into one folder, and POOF! They will load into the page.
This is going to require some PHP – I created a new file called ‘gallery.php’ which I’ve included in the root of the project, it links up to all the same CSS files, and libraries so we can style it in a way that matches the rest of the site. We will grab those images, and then pop them into the site into a list as list items, and it will just keep loading images until there are none more to load.
Let’s take a look at that code. Before we load in the gallery we have the same head/navbar style as the other page, and after it we have this:
So this might be a little hard to follow, but here’s what’s going on. We declare a variable named $dirname that we’re going to pass into the scandir method to make an array of images. $dirname is the name of the directory where the images are (gallery) and scandir is PHPs method to create an array of files from a directory. Good Ole PHP makes things easy for us so we don’t have to type all those <img src=””> over and over and over. We use $images to declare and create the array. Next we use the shuffle method to randomize the array to make it interesting to look at each time. We use the foreach method to iterate through the array each time echoing the html string for each image into the <li> list item element. Note how the \ key is used before the ” character here like this \” \” This is very important!!! You must use the backslash to escape the ” character each time. Otherwise PHP will interpret the ” literally as though it was the end of your string.
TL:DR: if you have to put ” inside your string, just put a \ before it, and you’re good.
I used wowload, and fadeInUp just like in the other page to give the larger-dynamic gallery the same feel.
The end result looks something like this:
And the page just goes on, and on, and on, until it runs out of pictures. The BEST part is: You don’t have to edit any HTML/PHP to add pictures now, just pop them into your gallery folder, and they will be included in the page.
The only thing left to do here was make a large button that brings you back to the rest of the website so they can contact the website owner and schedule a photo-shoot.
Just a simple button that links to “./” – the root of the project, close it out with an identical footer to the first page, and you’re done!
A couple closing notes:
I haven’t shown every piece of code here, because I feel it’s important for you to figure things out on your own. Learn by building. I also want to mention that -This is a static site. Static sites offer great security, but can’t be updated by the client, unless the client knows how to code. On most sites I would normally include a blog, a calendar plugin, or some way for the site-owner to update and make changes on their own. [content management] Most clients will want this! A full CMS like WordPress is a great solution in these cases, but with this particular client they decided that they won’t need to make any additional updates or changes to the site as time goes on, because they keep their clients informed on the Facebook page. (and also because I’ve offered to help with updates, and adding pictures)- This is the main reason why I ONLY have one social media link at the bottom of the page and a lot of white-space around it. The client uses Facebook as a major hub for doing business, and we wanted to attract a lot of attention to that with a nice big animated Facebook icon. Normally we would add a whole slew of social media icons, and a blog.
How was this site different from others?
First of all: making this site was a total blast! I had a great time. Please check out the finished site.
Building a photography site is an interesting challenge because you have to find a great way to display the images and also inform the customer what they need to know about the business, and create a simple way to contact them. I enjoyed it, because it felt as though there was no need to create lots of copy for the site. There are very few words, just some basics, and we let the images tell the story. -This is a great rule of thumb for a photography site: the images should tell the story, and the other content should easily get out of the way. Adding a dynamic gallery is a GREAT way to save yourself a lot of time as a webmaster later on when the client wants to add images. You could even make more copies of the gallery.php page and map the galleries to other image folders for unlimited add-on potential. It was a great pleasure to build this site, and a challenging project. I hope this post has given you a couple ideas and led you in the right direction for your own photography site. Just keep on coding, you’ll get it done!