Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Look in Designer > Contact Forms > Default (or whatever you form is named) > Edit. There will be a large field called "Invitation." Remove the dummy text that is in that field.
You can change the way that those arrows behave using custom css. If you haven't used this feature before, you can look at the documentation here: https://backlight.me/docs/custom-stylesheets
This code can be used to hide the arrow symbols on vertical navigation:
nav.nav_v .menu-item li a::after{
display: none;
}
I'm not really sure why there aren't centered as that is the default behavior on my website (thought I don't have sub-menus in my current navigation). [Edit: Rod already answered this part]
No worries, this is by no means a pressing need.
I like Rod's approach too, that already makes it pretty easy.
Hey Matt and Ben,
I have quick suggestion that I think would make things a bit easier for me. Would it be possible to allow custom re-ordering albums (and album sets) within their parent album set or top level gallery? It looks like this feature is available if you publish through Lr, but I no longer use Lr so having this option within the publish tab would be fantastic.
Thanks!
Graceson
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.
Congratulations on Backlight 3 Matt and Ben!
Even though I owned Backlight 1, I never got around to switching away from CE4 until a few weeks ago. With the new release, I am curious to see what sort of things are possible now that we have this new API. I know very little about how to handle these sorts of things, but this seems like a great opportunity to learn. However, I am having trouble accessing the endpoints as described in the new documentation.
If I understand correctly, you are supposed to be able to access an endpoint by going to yoursite.com/backlight/api, and then the browser will display the data retrieved. However, this doesn't seem to be working for me.
Also, I am somewhat clueless about where I am meant to make modifications. The documentation mentions that the API needs to be instantiated and so I assume that once I understand what that means I will have a better idea about how all the pieces fit together. The system for dealing with PHPlugins and custom css are fairly straightforward as example files are already included in their proper locations. I assume that I will need to create a new file to play with the JSON API, but where is that file meant to live?
Is there a good place for me to get a crash course on how all these pieces fit together? I'm not too worried about learning code syntax as that is relatively easy to google. I'm mainly having trouble figuring out what the relevant pieces are and how they interact to create something useful.
I have been running into some weird errors recently. It started when I decided that I wanted to rename the default "galleries" top-level galleries to "work." I initially did this by simply renaming it, except I also renamed the directory because that seemed like the best way to get the url to change as well. This broke my homepage with an error, and reverting the settings I had changed had no effect.
So, I downloaded all my templates and then erased and quickly rebuilt the site. This time, I created a new top-level gallery named work, and after that was done, I then deleted the unneeded "Galleries" one. However, this has now broken the search function of the website with this error: Unable to find template with id 3. Try updating the selected template for the application. in EngineFactory.php on line 67.
You can see this at: https://gracesonaufderheide.com/backlight/search/
Is there a way to fix this? Also, is there a better way of renaming the top-level gallery than the two approaches that I discussed above? It would be good to know if there is a method that doesn't break anything.
I just did some more searching on the forum, and found this topic: http://community.theturninggate.net/vie … hp?id=7584
It sounds like PDFs are actually somewhat difficult to display in a browser.
It sounds like the best option will probably be converting my books to a series of images.
I am still interested in seeing how the iFrame feature in Theater works, so any info on that would be great!
Graceson
Hi All,
I am finally getting around to moving my site over from CE4 to Backlight2. I have some PDF documents for books that I have designed, and I would like to display them as albums.
My first thought is that the best way to do this is using the theater ad-on, specifically the iFrame embed. I have looked at the documentation, but unfortunately the link to the .zip template is broken.
Does anyone have a copies of the index.html and pym.v1.min.js files?
Thanks,
Graceson
To make it easy, here is the the current code for those two files. Keep in mind that some of doesn't work perfectly yet. I removed parts that I am still trying to figure out.
CSS:
figure:hover .album-title{
color: #8BD56C;
}
.album-title{
font-size: 14pt;
}
input[type="submit"], input[type="text"], button, textarea{
-moz-border-radius: 0 !imortant;
-webkit-border-radius: 0 !important;
}
button, input[type="submit"] {
font-weight: bold;
}
button:hover, input[type="submit"]:hover {
color: #8bd56c;
}
.foot{
padding-left: 10%;
padding-right: 10%px;
}
#primary-menu li.menu-item a{
font-weight: bold !important;
font-size: 12pt !important;
}
/*HIGHLIGHT MENU*/
.selected {
color: #8BD56C !important;
}
/*FOOTER SEARCH*/
.footsearch{
max-height: 20px !important;
line-height: 20px !important;
max-width: 150px !important;
font-size: 12px;
padding-top: 0;
}
/*HEADDER SEARCH*/
.headform{
width: 120px !important;
height: 20px !important;
line-height: 20px !important;
margin-top: 0;
font-size: 12px !important;
display: inline!important;
}
.headbutton{
width: 20px !important;
height: 20px !important;
line-height: 20px;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 5px !important;
padding-right: 5px !important;
font-size: 12px !important;
text-align: center !important;
display: inline!important;
}
.headfloat{
float: right;
z-index: 1;
position: relative;
}
@media screen and ( max-width: 1024px ) {
.headfloat {
display: none;
}
}
/*BACKGROUND*/
body {
background-attachment: fixed, fixed;
background-image: url("http://gracesonaufderheide.com/phplugins/images/tree.png"),url("http://gracesonaufderheide.com/phplugins/images/goldsmithbackgraound.png");
background-position: bottom left, bottom right;
background-repeat: no-repeat, no-repeat;
background-color: #2f2f2f !important;
}
/*GRID ICON BACKGROUND*/
#the-grid .grid-icons {
background-color:rgba(47,47,47,.6);
}
phplugins:
function ttg_navigation( $style, $path ) {
echo '
<div class="headfloat">
<div id="search" class="collapse clearfix">
<form action="/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Photo Search" class="headform" value=""/>
<button type="submit" class="headbutton"><i class="fa fa-search"></i></button>
</form>
</div> <!-- #search -->
</div>
'; return true;
}
function ttg_head_end( $style, $path ) {
echo '
<script>
$(document).ready(function() {
$("#primary-menu li a").each(function() {
if ($(this).prop("href") == window.location.href) {
$(this).addClass("selected");
}
});
});
</script>
';
} // END
//FOOTER
function ttg_footer_top( $style, $path ) {
echo '
<div class="foot">
<div id="search" class="collapse clearfix">
<form action="/backlight/search" method="GET">
<input type="text" id="q" name="q" placeholder="Photo Search" class="footsearch" value=""/>
<button type="submit" class="footsearch">Search</button>
</form>
</div> <!-- #search -->
<div>
<div>
<p>© 2012-'.date("Y").' Graceson Aufderheide, All rights reserved.<br><a href="http://gracesonaufderheide.com/policies/">Terms, Conditions, and Policies</a></p><div></div>
</div>
<!-- #footer -->
'; return false;
}
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 Everyone,
I just thought that I would share my Backlight testing site.
http://release.gracesonaufderheide.com
Just like Rod, I have it set up in a subdomain. I don't have all off the different layout options set up like Rod, however, I have been playing a lot with custom CSS and phplugins. I am still fiddling with this site, so some things might be broken for a bit while I try new pieces of code.
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.
Okay, that is good to know. I will stay away from hashes and browser history. Mat, would you also recommend that I stop working on the text popups that I created with the javascript loop? I have been looking at what you said about using event listeners or on() functions to see if I can figure out a solution using them. Do you think that these too will cause many headaches?
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.
To use images in another folder for downloads you can change the path by going to Appearance>Image Download>High-Res Image Folder. However, there is a problem with this at the moment which was discussed in this thread: http://community.theturninggate.net/top … lery-617/. At the end Ben offers a solution that works pretty well.
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.
Well, it was a good idea then. At least I learned some good things about Javascript. I agree that eventually there is only so much you can do because people have their own habits and ideas of how things work.
In addition to problem solving the back button method, I have been working on my original idea of having a bit of text popup. Basically I have two divs, one for desktop and one for mobile, which have been styled to look like a little text overlay. Then I pieced some script together from the internet to hide and show them. The way it works right now I have a time interval repeatedly check for a class that is only visible when a presentation view is open. Once the check is true the loop stops and the animations start.
Matthew, what do you think of this method? I am interested in your thoughts in terms of my coding strategy and execution as well as website viewer experience. Is there a better way to do this while still implementing it from phplugins, or would you insert the script into all the highslide documents instead?
I also appreciate other's opinions as I am still learning. Here is the script:
$('a.image-link, .size-large, .size-medium, .size-full').click(function() {
var counter = 0;
var popinterval = setInterval(function(){
if ($(".highslide-close").length > 0) {
clearInterval(popinterval);//CLEAR INTERVAL RIGHT AWAY
$(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
$(function () {
$('#highpop').hide();
clearInterval(popinterval);
});
}
});//END HIDE ON ESC
$('.highslide-close, .highslide-dimming, .highslide-image, .add-to-cart').click(function() {
$(function () {
$('#highpop').hide();
clearInterval(popinterval);
});
});//END HIDE ON CLICKS
$('#highpop').fadeIn('slow').delay(2000).fadeOut('slow');//END DISPLAY HIGHPOP DIV
}//END HIGHSLIDE POPUP
if ($(".mfp-img").length > 0) {
clearInterval(popinterval);//CLEAR INTERVAL RIGHT AWAY
$(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
$(function () {
$('#mfppop').hide();
clearInterval(popinterval);
});
}
});//END HIDE ON ESC
$('.img-close, .add-to-cart, .mfp-container').click(function() {
$(function () {
$('#mfppop').hide();
clearInterval(popinterval);
});
});//END HIDE ON CLICKS
$('#mfppop').fadeIn('slow').delay(2000).fadeOut('slow');//END DISPLAY MAGNIFIC DIV
}//END MAGNIFIC POP
counter++;
if(counter === 1200) {
clearInterval(popinterval);
}//END CLEAR INTERVAL AFTER 120 SECONDS
}, 100);//END 100ms INTERVAL
});// END CLICK FUNCTION
Here is a gallery which you can view the result in: http://photography.gracesonaufderheide. … and-white/
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?
I believe that you will have to use html instead of markdown for that, but is fairly simple. Here is the format:
<a href="http://www.yoursite.com/files/randomdoccument.pdf" target="_blank">Hyper Link Text</a>
The part that makes it open in a new window is the target="_blank". For more information on html links check out this site: http://www.w3schools.com/html/html_links.asp
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?
The path to your files that you see via ftp access is very similar. The only difference is that public_html is replaces with your domain name. So, if you have a document at public_html/files/randomdocument.pdf, then the url to it will be http://www.yoursite.com/files/randomdocument.pdf.
Graceson
I have been on the road for the past month. During my travels I have shown my new site to all sorts of people. Whenever I present my site to someone I like to watch how they navigate it. This allows me to do a couple of things: one is watch how people move around so that I can better direct them to what I want them to see. Second is to see where they get stuck so that I can make my site easier to use. This question is a result of an observation concerning the second category.
I have noticed that when people get to a gallery and start to view the grid they will scroll up and down a bit. When an image captures their attention they will then click on it which takes them into the highslide presentation. When they are done viewing the image they will then look for a way out. Most of the time people will click on the browser's back button. This takes them to the page they were on before they got to the gallery. Then I watch as they try to figure out what happened because they were expecting to see the gallery's grid. I know that this is the correct behavior because highslide displays images in a lightbox and not on a new html page. However, some web users don't seem to realize this.
This brings me to my question. I would like for there to be some obvious indication to people that they are still on the same page. I went ahead and made the highslide-close button larger but i think a little more would be helpful. I know that i could write a note on the page, or make the background of the highslide presentation partly transparent, but I would like something a little more integrated and obvious. One idea that comes to mind is to create a little text popup that shows up briefly when they enter the highslide presentation. I would model it after those popups that are shown when you enter full screen in some applications, but I would have it read something along the lines of "press esc. to exit". How hard would it be to implement something like this? Could it be implemented in a way that works site wide (maybe using phplugins)?
I am going to start researching this but it would be great to get some help or ideas. Also, if you have an idea for a different way to signal the user I would like to hear that as well.
Thanks,
Graceson
Ahh. That's good to know. However, what if I want to keep the images and keep the album but no longer want to offer image downloads. I know I could just leave them there, but it would be nice to know how to remove them properly.
I know that it is very important to delete publisher manages albums with publisher so that you don't break anything. Is this also true for say deleting the "photos-for-purchase" or "photos-for-download" folders inside publisher managed albums? If I decide to delete either of these folder from a publisher managed album are there also some files I should remove from the ttg-be database through phpLiteAdmin?
Thanks,
Graceson