While developing the inner workings PhotographyBlogSites.com, I decided to start from scratch and build my own. It has been in somewhat limited release so far as it has been tested on PhotographyBlogSites and put through the ringer on a few recent custom sites that are about to launch.

My goal was to build a comprehensive image gallery plugin that would be easy to use, versatile, visible on mobile phones, and highly customizable. I also wanted to add the all important SEO information to each and every image using file names, ALT and Title attributes and even the folder structure of where the images were stored to really push the SEO quality of every gallery.

Where to Get it

You can find more technical details as well as how to use the plugin here:

This plugin is hosted at WordPress, so you can search for it and auto-install into any WordPress site, or you can download it from WordPress.

Example of how it can be used…

Directly embedded on a page, with the default white display:

This is the small size. For full width photoblogs, it can display at 920px wide.

And using the alternate skin, ‘black’:

A thumbnail that opens full screen:

With the default white display:

Close

Wordpress Development

You haven't added a thumbnail for this gallery yet. But you can still click here to see the gallery.

Wordpress Development

And the skin ‘black’:

Close

Wordpress Development

You haven't added a thumbnail for this gallery yet. But you can still click here to see the gallery.

Wordpress Development

A thumbnail list of every Gallery:

With the latest version, you can even add an automated album of every gallery you create, or list an album of any category of galleries.

You can see an example of the album idea in action at the demo site for PhotographyBlogSites.com.

And here is a quick screenshot showing the thumbnails, each linking to a gallery…

And here is a screenshot of the custom display in the overlay window…

If you like that demo site and are a photographer, check out the main site – PhotographyBlogSites.com and sign up for our mailing list.

Custom Image Galleries

This plugin is incredibly easy to customize with basic knowledge of CSS. I have put together some detailed instructions and would love to see any examples of custom galleries using this plugin.

In the next week or two I will be launching two new custom blogs with Identity Kitchen which are the first two sites to use the custom options to the full advantage. Once they are live I will do another post about the custom possibilities.

© marty for Marty Thornley, 2010. | Permalink | 2 comments | Add to del.icio.us
Post tags:

Feed enhanced by Better Feed from Ozh

Now, you know how proud we are of our Search Engine Optimized, WordPress powered, custom portfolio blogsites. What if there were an entry-level, template-driven, DIY, portfolio blogsite available? No more updating your blog at one address and your portfolio at another. No more calling your webmaster to make changes to your site, update your entire site as easily as creating a blog post. You can even customize the site to match your brand.

Now, what if it was affordable to everyone and included installation and set-up? Interested?

Sign up here for more information.

Here’s a blurry sneak peek…

Some added details of my own:

There are a lot of sides to this project, including some exciting resources for anyone, whether they use the new BlogSites or not…

• There will be an FAQ and tutorial site, complete with screencast videos for everything WordPress.
• There will be support forums for plugins, and technical issues.
• SEO Image Galleries. This new site is also the home of a plugin currently released in Beta called SEO Image Galleries. It is available at the WordPress Repository, or can be installed directly through the plugin browser on any self-hosted WordPress site.

Plus lots more…

Sign up for our Beta list here: Photographyblogsites.com

You can also follow us for updates on Facebook and Twitter.

© marty for Marty Thornley, 2010. | Permalink | No comment | Add to del.icio.us
Post tags: photography, photography blog, photographyblogsites, WordPress

Feed enhanced by Better Feed from Ozh

The new Identity Kitchen site was not just a face-lift or simple redesign but a complete rethinking of everything. By combining the formerly separate portfolio site and blog all into one WordPress installation, the content and structure of the site was improved, the search engine optimization was improved, and the backend became one place to add and edit all the content.

We were also able to use some new image gallery techniques to ensure everything on the site is HTML and CSS based. This means no Flash, even for the image galleries, providing a seamless user experience for those without the ability to view Flash, most importantly iPhone (and now iPad) users. Not using Flash also improves the SEO, by using keywords in the image’s ‘ALT’ attribute.

Home Page

The most complex page on the site, the home page pulls the latest post from the blog, has links to social marketing sites, a newsletter signup, a section highlighting some products from the store (Identity Cafe) and features a fading slideshow of images.

click for full size view

Case Studies

The first style of image gallery is shown on the Case Studies pages. The images are attached using custom fields in the backend, thanks to the WordPress plugin Flutter. Usually each page has a simple text area, where images can be inserted. But by adding some custom areas we were able to upload extra images and then display them in any way we want. In this case, by displaying them in a gallery, with thumbnail previews along the bottom. A second custom area was used to add a series of ‘services’ as the pink text at the bottom of the right-hand column.

click for full size view

Work Pages

Similar to the Case Studies pages were the Work pages, which were more specific looks at a single website, a single brand, and one page with 30+ examples of logos. The backend for these pages worked almost identically to the Case Studies pages, but we displayed the info in different ways. The descriptions, list of services and link to the live websites needed to display under the images so that we could have a menu on the right hand-column. To make room for that we needed a second image gallery design, using smaller thumbnails and new navigation buttons. The gallery is actually the same exact HTML markup. But thanks to a few changes in the CSS, they display differently.

click for full size view

Questionnaire and Contact Forms

Some aspects of a site can only be appreciated by the owner of that site. One of those things on this site would be the Questionnaire page. I used the ‘Contact Form 7‘ plugin for all the contact forms on this site. This is my favorite contact form plugin because it is easy to use, even for a non-programmer and it allows complete control over all the fields and customization of the look. By adding a Questionnaire page, it will now be easy to send new clients a simple link where they can fill out all the needed info online and hit send. Pro-active clients could even find it on the site and take the initiative to fill it out themselves. Everything is sent in an email seconds later. Compare this to a written form that is left with a client or snail-mailed, or even the process of needing to send a .pdf file to someone, possibly forgetting and hoping they will print it out and send it back.

click for full size view

Blog

Last but not least is the blog section, otherwise known on this site as ‘Fresh’. While it matches the main site’s design, it has its own thing going on, practically a reverse of the look, with a mainly white page and dark text, compared to the dark background and white text of the main pages. As far as programming, this was the most straight-forward of the whole site, just a matter of scaling back to the built-in blog platform that WordPress is made for.

click for full size view

© marty for Marty Thornley, 2010. | Permalink | No comment | Add to del.icio.us
Post tags: custom wordpress, web development, WordPress

Feed enhanced by Better Feed from Ozh

Their website had been a static HTML site, difficult to update and lacking the ability to comment or interact in any way. Producers JC Pohl and Erahm Christopher asked their original designer, David Richards to update his original design and brought me on to program the site using WordPress as a backend. David’s new design stayed true to the original idea and maintained the well-established brand of Teen Truth, while modernizing it, bringing some greatly improved navigation and adding some moving pieces that really bring the site to life. By moving from a static HTMl site to a site powered by WordPress, they now have the ability to add content at any time, allow their fans to comment on articles, and will benefit from the amazing SEO powers of a properly configured WordPress site.

Visit the Live Site

Here are some Highlights:

The Home Page

The home page is a good look at the overall design and is probably the most complex page on this site. It contains an embedded video, a fading slideshow gallery, sliding panels across the center of the page, a rotating series of sponsor images, two separate categories of news feeds, a Facebook Fan Box, and small section of ‘Upcoming School Events’ which pulls the next three upcoming events from the calendar section.

The Sliding Panels

The sliding panels across the middle of the home page provide not only some color and movement to the page, but easy access to the three main programs that are the focus of the Teen Truth project – the three videos. Each slider contains a brief description, which is editable from the WordPress backend and links directly to the page for the given video.

The News Sections

There are two separate news sections that take advantage of the traditional blog functions of WordPress. Both sections are highlighted on the home page and have their own section of the site that act like traditional blogs, with categorized posts and the ability to comment.

The Store Page

Because there are only a few products and the payments are being processed with Paypal, the store page was simply hand coded as is using Paypal’s shopping cart system, rather than use a separate e-commerce site or one of the WordPress e-commerce plugins, which I have found to be fairly buggy and unreliable.

The Calendar

The most complex single aspect of this site was the calendar. To add dates, I used the Flutter plugin to create a custom post type, organized by date. Within each date, any number of events can be added for each of the four Teen Truth Live event types. Those events are then displayed on the calendar page, in order and month-by-month, each with the proper color code for that event. On the home page, the next three upcoming events of any type are displayed. You can see this working in the two screen grabs below. Because this is these were taken on Jan. 12, the event from 01.12 on the calendar page is not on the home page but the next three from 01.13 are shown. The fourth event, on the 15th, is not shown.

Behind the Scenes

Like most WordPress sites, this one relies heavily on some plugins made available for free by talented programmers who deserve credit. I also made use of a new toy – jQuery Tools, which provided the code for the sliding panels.

• Flutter - Adds custom fields to any post and creates custom post types. Used to create the variety of page layouts, including the calendar section.
• jQuery Tools – An incredible source of ready-built yet customizable user-interface tools that can be used to enhance the usability and navigation of a site.
• And, as always, I used my Recommended Plugins for optimizing the site and improving SEO.

© marty for Marty Thornley, 2010. | Permalink | No comment | Add to del.icio.us
Post tags: clients, custom web design, web clients, WordPress, WordPress Themes

Feed enhanced by Better Feed from Ozh

With one login and only one site to edit, there is access to several categories of photo galleries, essentially unlimited pages, and a fully integrated blog. The design is customized on every page, with varying layouts and thumbnails for each section that really bring this site beyond the typical design. At the same time, the look is a very clean – almost all in white, allowing the amazing images from the photographers at Studio Diana to be the star of the show.

Visit The Live Site

Here are some highlights:

Home Page

The home page features a rotating slideshow of fading images in the upper right corner, links to featured galleries across the bottom and a feed of the latest blog post in the lower right.

click image for larger view

Photo Galleries

This is a look at the Portraits section of photo galleries. The thumbnail menu stays put on every page, allowing a viewer to switch between any of the galleries while the gallery itself loads on the right hand side.

click image for larger view

About Us Section

The About Us section itself has several different layouts, with this being the main look, using another take on the thumbnail menus.

click image for larger view

Contact Page

The Contact page is not generally the highlight of a site, but I like the clean look of this one. Each field uses a custom background image, rather that the usual HTML based box, just one of the subtle touches that puts this design on another level.

click image for larger view

The Blog

The Custom blog section is not a different site, but all edited from the same WordPress backend. It fits the design of the overall site, but stands on its own as well to help make it stand out from the ‘website’ part of this site.

click image for larger view

Image Galleries in the Blog

The blog uses another way of displaying images, the same one I use in this post, where the images pop up into a gallery while the screen goes dark around it.

click image for larger view

Visit The Live Site

Behind the Scenes

This site would not have been possible without some of the WordPress plugins that are made available for free by some amazingly talented programmers who put in a lot of time and effort. Here is a list of some the plugins I used in no particular order:

• Flutter - Add custom fields to any post and create custom post types. Used to create the variety of page layouts.
• NextGen Gallery and NextGen FlashViewer – Used for the portrait and wedding galleries. Displays images in a customized flash viewer.
• Shadowbox JS – Used for the pop-up gallery in the blog (and on this site).
• And, of course, I used my Recommended Plugins for optimizing the site and improving SEO.

© marty for Marty Thornley, 2010. | Permalink | No comment | Add to del.icio.us
Post tags: clients, custom web design, web clients, web design, wedding photography blog, WordPress Themes

Feed enhanced by Better Feed from Ozh

With all of our sites, we try to incorporate some level of social media interaction. Custom blogs generally get a Twitter feed with a custom design and prominent links to any other sites the client wants to feature. This could be Twitter, Facebook, Myspace, etc.

Here is a look at a few of the projects:

TheUnbride.com

The Unbride is a blog that covers unusual wedding ideas, from all of the different vendors, to interesting venues, etc. Building the site took a lot of advanced Customization of WordPress using different views depending on which category we are viewing. See it in action here: http://theunbride.com/

TheUnbride.com

Click Image for Full Size

EclecticAudio.com

Eclectic Audio is a bit of a different project for me. The site is entirely (sort of) in Flash, built by Ellen’s assistant, Mandee Astuti, a talented designer herself.

Normally the URLs of a flash site would look like http://ecleticaudio.com the whole time because it is actually one page, with a Flash movie inside of that one page. But we split every ‘page’ of the Flash site into a separate Flash file, so that we could end up with standard links to each page. This means you will be able to see and link to ‘http://ecleticaudio.com/about’, ‘http://ecleticaudio.com/contac’t, ‘http://ecleticaudio.com/music’ etc. This is very important for SEO purposes but we are also planning ahead for a soon to come WordPress version of the site which will wrap the flash files for the main site and also incorporate a blog. One other step was to use URL re-writing to make sure the URLS show up as ‘/about’ and not ‘/about.html’, which is what they actually are. Again this was for SEO purposes and to plan ahead for WordPress, which does not end their URLS in .html.

And if all that wasn’t programming geek enough for you… I was also able to develop a little PHP function that allows me to now easily embed a Flash file using a few words of code rather than typing in the entire things each time. If you don’t know what any of that means, just enjoy the site…

See the site in action here: http://eclecticaudio.com

EclecticAudio.com

Click Image for Full Size

LAStylistMom.com

LAStylistMom was a fairly straightforward blog on my end, but features some nice logo work and site design by Identity Kitchen.

See it in action here: http://lastylistmom.com

LAStylistMom.com

Click Image for Full Size

TriciaBPhoto.com/blog

This is another custom blog, this time for a photographer. It features custom logo work and site design by Identity Kitchen.

See it in action here: http://triciabphoto.com/blog

TriciaBPhoto.com/blog/

Click Image for Full Size

© marty for Marty Thornley, 2009. | Permalink | 2 comments | Add to del.icio.us
Post tags: clients, custom web design, programming, web clients, WordPress

Feed enhanced by Better Feed from Ozh