Hi all,
when creating a new website with Kookaburra I noticed that neither Albums nor Album Sets can be added to a page.
Maybe also a bug?
Best regards,
Oliver
Nope. I’m getting away from the concept of “embedded” albums and sets with Kookaburra. Under-the-hood, they’re a pain to deal with and maintain. Instead, you have access to the JSON API for albums and sets, which can currently be leveraged via PHPlugins.
The JSON API is highly useful! For example, is powers essays. The essay features basically wrap a user-experience-and-interface around the API, and Kookaburra will expand on this as compared to what’s in Pangolin.
wow hopefully there will be an understandable instruction for it 
2 Likes
The JSON API is really powerful. A few years ago I created this single page implementation. All album contents is fetched using the JSON API: danielleu.com/sfos
With Backlight 5, there is now support for short codes. This way one can avoid using Javascript: https://backlight.me/docs/writing-copy/#shortcodes
1 Like
Hi Daniel,
thank you for the tip!
Habe ich total ĂĽbersehen.
Jaja, damit werde ich mich jetzt beschäftigen 
Schöne Grüße,
Oliver
1 Like
Hi all,
thanks for your answers and tips.
I have read the explanations of the “shortcuts”, but it doesn’t help me at the moment.
Daniel I like your solution with the tab navigation on sfos - Daniel Leu Photography.
I managed to integrate a free tab navigation with html and css on a test page.
In tab 1 should be the album with main copy and the images.
In tab 2 another album and so on.
I have read about json api and unfortunately I must admit that I do not understand it.
Is there maybe a self explaining example routine or can someone explain it to me?
That would make me very happy.
Best regards,
Oliver
I’ll see if I can create a simple example.
Hi Daniel,
that would be really great!
For now, I’m concerned with how to simply add an album into the tab-content like:
<div class="tab">
<input type="radio" id="tab1" name="tab-group">
<label for="tab1">Album 1</label>
<div class="tab-content">
<div>album 1</div> (or something like that or something totaly different maybe :-)
</div>
Best regards,
Oliver
simply is the keyword. It’s not 
. I think best is to wait until the necessary shortcode is added. Then it’s easy to do. Sorry for the bad news, Oliver.
Hi Daniel,
thanks for you prompt reply 
Maybe you like to share how you did it on your wesite e.g in the New Work section. How did you inserted your images?
Best regards,
Oliver
Hi Oliver,
The JSON API is documented here:
That explains how to get the data from Backlight. Data in hand, you then need to loop through the items to render them into an HTML template.
All the code is on my page. There are html placeholders that are used to create the galleries using javascript.
Dear all, thank you so much for your time, tips and advice.
I really read everything but did not understand anything.
We can close the thread at this point because I’m too stupid or someone explain to me with an example how to insert an album in a Kookaburra page.
I copied the following from the pangolin-phplugins-sample into the kookaburra-phplugins-sample to enable the JSON API, I hope that’s correct:
// use the jQuery JSON API to get album data;
// log the response in the browser debug console.
function scripts() {
if ($this->hasAlbum()) {
$albumId = $this->album->getId();
echo '
<script src="/backlight/modules/module-publisher/lib/js/jquery.api.js"></script>
<script>
var backlight = new Backlight()
backlight.getAlbum('. $albumId .', {
done: function(data) {
console.log(data)
},
})
</script>
';
}
return false;
} // END /**/
Then I have inserted the following code in a page:
> <div class="tabs">
> <div class="tab">
> <input type="radio" id="tab1" name="tab-group">
> <label for="tab1">Label 1</label>
> <div class="tab-content">
> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
> HOW TO ENTER AN ALBUM HERE???
> </div>
> </div>
> </div>
What do I need to do with “/backlight/api/get_album/:id”?
I would be very grateful for further help, otherwise I’ll wait until Kookaburra is usable as far as simply inserting albums or album sets.
Thanks a lot and best regards,
Oliver
Well, first thing, Kookaburra does not include jQuery, so use the JavaScript version of the API.
Beyond that, I’ll have to get hands-on with code to make further recommendations, and will have to return later to do it.
Thank you Matt, that would be wonderful
This PHPlugins function sets up the JSON API, fetches data for an album ID, and logs it to the console.
// Use the JavaScript JSON API to get album data;
// logs the response to the browser's debug console.
function scripts() {
$siteURL = siteURL();
$apiPath = "{$siteURL}backlight/" . (URLHelper::rewriteEnabled() ? "api" : "?m=publisher&c=jsonApi");
$apiToken = AuthHelper::getJSONAPIToken();
echo <<<HTML
<script src="{$siteURL}backlight/modules/module-publisher/lib/js/api.js"></script>
<script>
// Kookaburra Album declares `albumId`, so we can use it here;
// outside of Kookaburra Album (e.g. on other pages), `albumID` will be undefined.
if (albumId) {
const backlight = new Backlight("{$apiPath}");
backlight.getAlbum(albumId, {
apiToken: "{$apiToken}",
done: function(data) {
console.log(data);
},
});
}
</script>
HTML; // do not indent this line
return false;
} // END /**/
The $apiToken might be new to people. We use it in Pangolin Essay, but you can also use it in PHPlugins, as you can see. It allows us to use the JSON API within the scope or our website – “locally” – without enabling the JSON API in Backlight’s settings, which would expose the API to the public.
1 Like
WOW Thank you Matt for your fast response!
If I understand correctly, I disable JSON API in Backlight settings, because it is enabled by your functions scripts in phplugin.php.
how do I get the album now displayed on a page?
As mentioned before there is the following code on the page.
<div class="tab">
<input type="radio" id="tab1" name="tab-group">
<label for="tab1">Tab 1</label>
<div class="tab-content">
<p>text 1</p>
Album here
</div>
</div>
Now how do I get the album shortcode: [album:123456] placed in it?
Best thanks and best regards
Oliver
Well, how you use the data really depends on the presentation you’re building.
In short, you’ll want to:
- create an HTML template
- loop through the photos, funneling data for each into the template
- append the generated HTML to a placeholder someplace in the page
In your example, you’ve got tabs. So, how many tabs are you planning on? What’s in each tab, a different album? Because if that’s the case, then I’d probably structure things somewhat differently than if I were just fetching a single album for the page.
Ah ok,
yes, I created one page.
4 tabs. each tab should show an album.
this is the structure on the page:
<div class="tabs">
<div class="tab">
<input type="radio" id="tab1" name="tab-group" checked>
<label for="tab1">Tab 1</label>
<div class="tab-content">
<p>insert Album 1</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab2" name="tab-group">
<label for="tab2">Tab 2</label>
<div class="tab-content">
<p>insert Album 2</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab3" name="tab-group">
<label for="tab3">Tab 3</label>
<div class="tab-content">
<p>insert Album 3</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab4" name="tab-group">
<label for="tab4">Tab 4</label>
<div class="tab-content">
<p>insert Album 4</p>
</div>
</div>
</div>
what does that mean?