An Artisit's Site
Nicole, photographer and owner of Blue Gate Photography, had done the previous site herself and was unhappy with the result. She needed something to show potential clients and use as a tool to increase her web presence. Working together we discovered what her users needed and what she needed for her business to grow.
After speaking with Nicole and extensive research, I came up with a plan. Her site needed a complete overhaul and would include:
- A simple interface, for uploading images and updating content.
- An updated, modern look and feel, to match the tone of her photography.
- A custom blog to drive traffic to the site increase online presence.
An Easy to Update Site
Photography is a cyclical business. Photographs on sites must be updated with the seasons to keep up with current trends and changing technology. Nicole needed a site that was easy to update; without having to know a bunch of code.
I built her new site using WordPress. WordPress allows me to create custom capabilities to fit my client's business needs, and the user interface allows them to have control over the content on their site.
Creating an Easy to Update Carousel
I developed an easy to update carousel in two places. That way Nicole could update her photos easily, and changing the look and feel of her site when needed. The best part was the updates could be made in the easy to use WordPress interface.
I started with Woo Hoos Theme’s FlexSlider and made a little modifications. I like Flexslider because it is responsive and simple to modify. Just before the ordered list I placed a little bit of PHP:
<?php $gallery=get_post_meta($post-&rt;ID, gallery, false); ?&rt;
get_post_meta() fetches the metadata for the post, and Key (or name on the user interface) and Value. I had previously added the Gallery
Key and the Value is the url of the image. The boolean parameter specifies if there is a single image, in this case &false.
It basically says, Sweet! I get to grab a bunch of these cool ‘Gallery’ things for a super cool array.
I added a foreach loop in the ordered list to update each slide with the inputted key value pair now in the array.
<ol class="slides">
<?php foreach($gallery as $gallery){
echo'<li> <imh src="'.$gallery.'" alt="spotlight image"/></li>';
} ?>
</ol>
Here is the html for the FlexSlider with the additions I made:
<div id="frontslideshow">
<div class="flexslider">
<?php $gallery=get_post_meta($post-&lrt;ID, gallery, false); ?>
<ol class="slides">
<?php foreach($gallery as $gallery){
echo'<li> <imh src="'.$gallery.';" alt="spotlight image"/></li>';
} ?>
</ol>
</div>
“
</div>
