Community @ The Turning Gate

No worries, this is by no means a pressing need.

I like Rod's approach too, that already makes it pretty easy.

Hi Matt,
Thanks for the quick response!

I am sort of starting from scratch as all of my web coding experience comes from fiddling around with CE4 or Backlight customizations.

So it sounds like there are two ways of accessing the new API: one is through Fetch API, and the other is by using PHPlugins to inject JS. What are the two different use cases for these methods?

Do you have any examples for when one method would be used over another? My guess right now is that the FetchAPI (or jQuery's AJAX) is useful to place Backlight managed photos or galleries onto any website where as if you wanted to create a custom page in Backlight with multiple galleries then maybe the PHPlugins route would be easier.

Also, is my understanding of how to access the API endpoints correct? Visiting https://gracesonaufderheide.com/backlight/api just redirects me to the homepage.

If you added a background image in CE3, then you will defiantly be able to do it with Backlight. You will need custom CSS just as Mat pointed out, however, implementing custom CSS is a little easier in Backlight. If you would like, you can check out my test site to see the background images I added. http://release.gracesonaufderheide.com

Graceson

Hi Jeffrey,
I was on the Backlight beta testing team so I will try and answer some of your questions. First, let me say that I joined TTG with CE4, so I don't have specific experience with CE2 or CE3. However, I think I can help answer your questions.

1) Backlight is a completely different system from any of the CE plugins. If you are familiar with the way TTG BE worked in CE4 or the cart worked in CE3 then you should have no trouble. Backlight installs similar to TTG BE in that you simply upload a bunch of files all contained within a few directories. Then, you navigate to www.yoursite.com/backlight and you are all ready to go. It probably takes five-ten minutes from start to finish. Updating is as simple as replacing a couple key directories and logging in again. That is it. You only have to update this one thing--Backlight--instead of having to update 3-6 different things. At the moment, Backlight has all of the functionality of Galleries, Auto Index, and Pages (if you buy that bundle). I also know that Mat and Ben plan on adding more modules so that Backlight becomes as diverse as CE4.

2) Backlight no longer runs inside Lr. All of your designing and content editing happens online now. I don't think that there is a direct way to migrate from CE3 to Backlight. I think someone discussed that you might be able to migrate to CE4, and then from CE4 to Backlight. However, I recommend starting over. For one thing, this gives you an opportunity to update your design. Also, Backlight is significantly faster than any of the CE plugins: it will take a fraction of the time to make a Backlight site compared to CE. It doesn't hang up at all, and you can see changes in real time online. You no longer have to upload anything to make changes to your site. In short, there aren't any delays or bottle necks when using Backlight. All of the problems with CE3 you expressed in your introduction are gone. In many ways, Backlight is more like Wordpress than any of the CE plugins. Thus, there shouldn't be any conflict with CE3 because there isn't any crossover. The one area that might be an issue will be the publisher. When I started using Backlight, the new version of publisher took over from the CE4 version. This was fine because it still works fine with CE4, however, I don't know if this is the case with earlier versions. Rod or Mat or Ben will probably have to tell you whether or not the Backlight publisher will work with CE3.

It sounds to me like messing with the browser's history will be touchy and possibly problematic. I think, then, that I will stick to my little text popups. I have been messing a little with the ideas Matthew gave me, but so far I haven't gotten it to work quite right. I guess it will take more time.

On my site the downloads button opens up a new page with the image on it. The user can then hold the image to download it. I just tried it on your site an it wasn't working. Maybe it is the touch presentation? I am on an iPhone 5 and my galleries use the Magnific Presentation.

I finally got it to work in a test. It turns out that I needed to delay the second script so that when it loads the firs one is there already. Here is the code that works for my site:

<script type="text/javascript" src="http://photography.gracesonaufderheide.com/BackDetect/backfix.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  bajb_backdetect.OnBack = function(){
    alert(\'aldskfj\');
    $(\'.highslide-close\').trigger( "click" );
}
});
</script>

However, the way it is working right now is that after the alert appears and is accepted the window then goes back in history as normal. Is there a way to keep the browser from going back so that I can use the highslide close() function instead?

Ooo, I like the idea of changing the function of the browser's back button. I played around with this for a while last night. I tried inserting both pieces of code onto a Wordpress page thinking that I should get it to work before I start inserting it completely, but that didn't work. Then I tried inserting both pieces into my sites via phplugins to see if I could get it to work, but alas it still didn't work. Below are the two different pieces that I was playing with. The single quotes are all escaped out because I was putting this inside an echo statement so that the scripts would run on the page.

<script type="text/javascript">
var bajb_backdetect = {
    Version: \'1.0.0\',
    Description: \'Back Button Detection\',
    Browser: {
        IE: !!(window.attachEvent&&!window.opera),
        Safari: navigator.userAgent.indexOf(\'Apple\')>-1,
        Opera: !!window.opera
    },
    FrameLoaded: 0,
    FrameTry: 0,
    FrameTimeout: null,
    OnBack: function() {
        alert(\'Back Button Clicked\')
    },
    BAJBFrame: function() {
        var BAJBOnBack = document.getElementById(\'BAJBOnBack\');
        if (bajb_backdetect.FrameLoaded > 1) {
            if (bajb_backdetect.FrameLoaded == 2) {
                bajb_backdetect.OnBack();
                history.back()
            }
        }
        bajb_backdetect.FrameLoaded++;
        if (bajb_backdetect.FrameLoaded == 1) {
            if (bajb_backdetect.Browser.IE) {
                bajb_backdetect.SetupFrames()
            } else {
                bajb_backdetect.FrameTimeout = setTimeout("bajb_backdetect.SetupFrames();", 700)
            }
        }
    },
    SetupFrames: function() {
        clearTimeout(bajb_backdetect.FrameTimeout);
        var BBiFrame = document.getElementById(\'BAJBOnBack\');
        var checkVar = BBiFrame.src.substr( - 11, 11);
        if (bajb_backdetect.FrameLoaded == 1 && checkVar != "HistoryLoad") {
            BBiFrame.src = "blank.html?HistoryLoad"
        } else {
            if (bajb_backdetect.FrameTry < 2 && checkVar != "HistoryLoad") {
                bajb_backdetect.FrameTry++;
                bajb_backdetect.FrameTimeout = setTimeout("bajb_backdetect.SetupFrames();", 700)
            }
        }
    },
    SafariHash: \'false\',
    Safari: function() {
        if (bajb_backdetect.SafariHash == \'false\') {
            if (window.location.hash == \'#b\') {
                bajb_backdetect.SafariHash = \'true\'
            } else {
                window.location.hash = \'#b\'
            }
            setTimeout("bajb_backdetect.Safari();", 100)
        } else if (bajb_backdetect.SafariHash == \'true\') {
            if (window.location.hash == \'\') {
                bajb_backdetect.SafariHash = \'back\';
                bajb_backdetect.OnBack();
                history.back()
            } else {
                setTimeout("bajb_backdetect.Safari();", 100)
            }
        }
    },
    Initialise: function() {
        if (bajb_backdetect.Browser.Safari) {
            setTimeout("bajb_backdetect.Safari();", 600)
        } else {
            document.write(\'<iframe src="blank.html" style="display:none;" id="BAJBOnBack" onunload="alert(\'de\')" onload="bajb_backdetect.BAJBFrame();"></iframe>\')
        }
    }
};
bajb_backdetect.Initialise();
</script>

<script type="text/javascript">
bajb_backdetect.OnBack = function()
{
alert(\'You clicked it!\');
}
</script>

Any ideas on why I can't get anything out of it?