Community @ The Turning Gate

I'm trying to allow clients to pay via check instead of PayPal. Is that the Invoice checkout method? I see no documentation on that option and have played with it to no effect. Is it explaiend anywhere? How does it work? I see no behavior change on checkout when the option is turned on.

Is there any "safe" way to add a border to large photos in the galleries? Without a border, I find the images look rather flat and would like to spiff them up a bit with at least a single-line border. I was doing that in my custom stylesheet, but was told that this was not a safe thing to do in Backlight. Any suggestions that would work to improve appearance without stepping on the feet of Backlight?

I think I've gone as far as I can with the Backlight test site for now. You can see it here: http://www.mabtesting.dreamhosters.com. It has not gone into production yet because I'm trying to decide whether I wait on Blog support or not.

Anyway, I chose to place the Search function in the menu bar itself and use masonry for all large photo displays. I did include the CE4 blog to complete the site and it works fine with a few adjustments. I had to create separate phplugins.php and custom.css files for the  blog because it cannot share the Backlight equivalents. The two notable differences discernible in the blog is that I could not reproduce the menu precisely due to basic implementation differences, although it comes close. Also, the Search function is not present in CE4, hence missing from the blog menu.

I have to add that creating and maintaining the site with Backlight is SO MUCH easier than plucking through Lightroom with its slow refresh rate. This is huge improvement, so congrats to the team for making our lives easier.

I just upgraded my test site to the latest version. Some very nice improvements and fixes here. But one feature that has degraded is the masonry alignment in the galleries. I use masonry in all my gallery pages and there seems to be something wrong with the algorithm in this latest version. The positioning leaves ugly gaps in the display whereas v101 worked fine.

I've reset all the templates and pages, and deleted the template cache. Am I mising something? You can see my test site here: http://www.mabtesting.dreamhosters.com

If you’re in a rush to add social media icons to your Backlight site (without having to wait for later versions), you can easily add your own custom social media bar using PHPlugins and a custom stylesheet (just like the good old days).

On my test site (http://www.mabtesting.dreamhosters.com/home/), I added social media buttons at the top of the footer, above the copyright notice. In my case, I’m using 32x32 pixel icons, but you can choose any size you like as long as you change the width and length parameters in the PHPlugins code. And you can also revise the CSS code to align the buttons however you choose, although mine are centered on the page.

Below is the code I added to my PHPlugins file to support Facebook, Google Plus, Twitter, 500px, Instagram, and Flickr. I used the ttg_footer_top hook to add the buttons, but you can use any of the available hooks to locate the social media bar elsewhere on your pages. This code assumes a top-level folder on your site named “icons” to hold the social media buttons. And you’ll obviously have to change all links to social media sites. The sites are always opened in a separate window, but if you prefer to open them in the same window, just remove “target=_blank” from each of the lines below.

function ttg_footer_top( $style, $path ) { 
   echo '
   <div id=“socialbar">
      <a href="https://www.facebook.com/yourfacebook/" target="_blank"><img src="/icons/facebook.png" title="Facebook" width="32" height="32"/></a>
      <a href="https://plus.google.com/+yourgoogleplus” target="_blank"><img src="/icons/google.png" title="Google Plus" width="32" height="32"/></a>
      <a href="https://twitter.com/your twitter“ target="_blank"><img src="/icons/twitter.png" title="Twitter" width="32" height="32"/></a>
      <a href="https://500px.com/your500px” target="_blank"><img src="/icons/500px.png" title="500px" width="32" height="32/"></a>
      <a href="https://www.instagram.com/yourinstagram/“ target="_blank"><img src="/icons/instagram.png" title="Instagram" width="32" height="32"/></a>
      <a href="https://www.flickr.com/photos/yourflickr/“ target="_blank"><img src="/icons/flickr.png" title="Flickr" width="32" height="32"/></a></div>
   ';
   return true;
} // END ttg_footer_top

Below is the code I added to my custom CSS. I start by centering the standard copyright notice on the page.

div.copyright p
{
   text-align: center;
}

And then, I add code to center the social media bar, adding a margin at top to separate the buttons from the rest of the page.

#socialbar {
   text-align: center;
   margin-top: 24px;
   display: block;
}