john bishop images | photography | vancouver, bc

website new look and feel – the meat of the story

  captcha, DaDa Mail, TTG Highslide Gallery, TTG Pages, WordPress

since i posted on Matthew Campagna’s The Turning Gate website that i had modified his TTG Pages to use my own contact page and modified TTG Pages and TTG HighSlide gallery to work with my WordPress blog, i have frequently been asked how i did this.

before i get into this too deep let me reaffirm that Matthew’s work has saved me a ton of time and effort.   i had to make some major site design decisions to achieve what i wanted, but the base that TTG Pages and TTG HighSlide Gallery provided me made moving ahead easy.

i had quite a few goals in mind …

1. extend TTG Pages to include more than the four menu options TTG Pages includes “out of the can”  (i.e. add additional pages other than the canned home, galleries, about and contact pages), allowing  me to add the blog and links menu choices,
2. change the canned contact form to use one that i had developed a year ago and had used successfully in the previous version of my site (one i consider much more user friendly and much more secure than the TTG Pages 3.1 version),
3. continue to support the auto-index feature of TTG Pages and to continue to use the Lightroom TTG HighSlide Gallery plugin to build and publish my photo galleries,
4. allow me to migrate to TTG HighSlide Gallery Pro when i was ready (i.e. enable e-commerce, etc.),
5. develop a WordPress theme to match the TTG Pages theme, and finally,
6. merge my WordPress blog into the menu structure.

been before embedding the  blog option into the TTG Pages menu bar, I had to develop a WordPress theme that would match the TTG Pages look and feel.  see extending WordPress themes for details.  check off number 5.

note that i have also developed a DaDa Mail newsletter set of pages that, again, have a consistent look and feel to the rest of the site (more to come as this is developed further).

the lions share of the work to make WordPress and DaDa Mail look and feel like the TTG Pages output meant modifying the needed CSS definitions.  if you don’t understand CSS, i strongly recommend lynda.com’s courses on CSS.  it takes a while and not all browsers render the same CSS the same way.  it can be a bit daunting at first, but the results are clearly obvious.

once that was done, i had to manually modify the output from TTG Pages in order to add the additional menu choices.  this was the critical decision point.  once i had TTG Pages, TTG HighSlide Gallery, WordPress and DaDa Mail all looking the same, i would have to abandon TTG Pages and maintain the sites root pages in Dreamweaver (home, galleries, about and contact).  for me this was an easy decision to make.  i had the skills and tools needed to make that decision with confidence. onward and forward!

maintaining the root set of TTG Pages output isn’t a big deal. it is quite easy to change the images and text contents of the TTG Pages output in Dreamweaver. as long as I use the same TTG HighSlide Gallery template, I can add new gallery pages and the TTG Pages auto-index feature finds them all dynamically. check off number 3.

this has allowed me to enhance these root pages to

1. include an affiliate link to lynda.com,
2. include a footer link to a site search page,
3. include a footer link to a site links map page, and
4. include a footer link to the about-copyrights page.

check off numbers 1 and 6.

note that i have not modified the TTG HighSlide Gallery pages, so migrating to TTG HighSlide Gallery Pro should be a fairly simple matter of dropping the Pro plugin into Lighroom and away we go! check off number 4 – i hope.

that just left goal number 2 – my new and improved contact page.  the main features of my version over Matthew’s are

1. the use of a GPL Captcha to prevent bots collecting my email address from my sites pages and then spamming my contact email address,
2. the input and output pages (both success and failure pages) have the same look and feel, and
3. modified telephone and website form fields to use LiveValidation to check the format of the data entered, if any.  remember that these are optional, so it took a bit of doing to get the correct RegEx expressions to work.

i understand that Matthew has also changed the contact form in TTG Pages to more closely resemble mine.

all in all, this has been a very successful site upgrade.  my previous version had some serious design limitations that i needed to get past, and i needed some initial help to do that.  The Turning Gate’s Lightroom plugins not only made this something i could do, it made doing so quite enjoyable (yes, i enjoy coding HTML, PHP and CSS)!

i hope this answers most of the queries i’ve had.  if not, leave me a comment or get in touch and i’ll do my best to help you out!