Hi, apologies for the simple question, I’m sure there’s some easy way to do this that I’m missing but I haven’t been able to find it. I’m trying to add multiple Album Sets to a single page, so I can do something like:
Services
[services album set - e.g. weddings, events]
Personal
[personal portfolio - landscapes, travel, etc.]
Ideally I’d want to be able to just insert a shortcode so I can include it via markdown, but the current shortcodes only work as a link. Is there a way to insert an entire block as a gallery?
As a somewhat related follow-up, also trying to figure out how to add album sets to Kookaburra pages. Or if that’s not possible, then using an Album set as the home page.
And sorry to pile on the questions, but also can’t seem to make kookaburra album sets responsive. Once a grid size is defined, it sticks to that. (EDIT: figured this out! Had to change the settings in the page design, not the album set design)
One way to do what you want with the album sets is to create a new top level set (like your galleries page).
You can then place as many album sets as you want in the new top level set.
You could create a top level set for Services and one for Personal (or just repurpose your Galleries page for the personal stuff)
You could then have a navigation menu item for Galleries (or Personal) and one for Services.
Thanks for the suggestion! But ideally I’d still prefer to have both album sets (with their sub albums displayed in the same page), just in different horizontal sections. But seems like I might have to use a plugin to get that functionality, especially since I can’t find album-set short codes / html.
But if not possible, I’d take the ability to add kookaburra album set to a page as well, or alternatively have a kookaburra album set as the default home page (without having to use redirects)
I’m a bit fuzzy on what you’re trying to do. But if you’re comfortable writing code, you could fetch data via the JSON API and display it any way that you like. See the API docs.
Otherwise, an album-set page will display the set’s direct descendants. You can nest sets within sets, but there’s no way to layout a flat tree of nested contents.
Hey Matthew! I was hoping to do something along the lines of
Some text blah blah
--------------------------
Album_Set_1 (e.g. Services)
[Weddings] [Events] [Graduation]
--------------------------
Some text blah blah
--------------------------
Album_Set_2 (e.g. Personal)
[Nature] [Macro] [Architecture]
--------------------------
I was hoping I could do it via something like [album-set-1], which would unpack into a series of album thumbnail links, but doesn’t seem supported at present unless I use the JSON API, will take a look at that!
Separately, can I check if the indexed page must always be a page? E.g. if I want to use an album set as my home page, how would I do so without relying on the JSON API or a custom index.html page.
So then, “Album Set 1” is just a title, not a set.
In that case, the easiest thing would be to put your six albums into a single set. Then use JS to insert titles between sections; e.g. find third item or find item by ID, then append HTML after. Then you’d need to style it, of course.
That’s if using Kookaburra.
If using Pangolin, you might be able to use the “Journal” module. I don’t think people have liked that one much, though, because it’s obtuse. Pangolin Journal | Backlight
Using Pangolin, you can album embed albums on pages, which would allow you to put an album set on your home page. Kookaburra doesn’t have embeds, but instead offers the more robust essay creator (which, unfortunately, only works for albums, not sets).
We do generally advise using Kookaburra these days, as it’s the more modern of the two. But it sounds like you’re trying to do Pangolin things.
Here’s some JS I had ChatGPT spit out. I haven’t tested it, as I’m busy with my day job at the moment, but it looks like it should probably work. You’ll want to add it via PHPlugins.
/**
* Insert section titles BEFORE specific FIGURE indices (ZERO-BASED).
*
* Interface:
* const sections = { 0: "Section Title 1", 3: "Section Title 2" };
* Meaning:
* Insert the title BEFORE figure[0], BEFORE figure[3], etc.
*
* Notes:
* - Zero-based indices: 0 = first figure
* - Safe by default: HTML-escapes title text
* - Idempotent (optional): can remove previously inserted titles
*/
(function insertSectionTitlesBeforeFigures(options = {}) {
const {
sectionsMap = {},
figureSelector = "figure",
// Remove previously inserted titles (by this script) before inserting again
resetPrevious = true,
// Customize how the title block is rendered
renderTitle = (titleText, { sectionNumber, beforeFigureIndex }) => {
return `
<section class="generated-section-title" data-section-number="${sectionNumber}">
<h2 class="generated-section-title__heading">${escapeHtml(String(titleText))}</h2>
</section>
`.trim();
},
} = options;
const figures = Array.from(document.querySelectorAll(figureSelector));
if (figures.length === 0) return;
if (resetPrevious) {
const existing = document.querySelectorAll(".generated-section-title");
for (const el of existing) el.remove();
}
const insertionPoints = Object.entries(sectionsMap)
.map(([k, v]) => [Number(k), v])
.filter(([idx]) => Number.isFinite(idx))
.sort((a, b) => a[0] - b[0]);
for (let i = 0; i < insertionPoints.length; i++) {
const [beforeIndexZeroBased, titleText] = insertionPoints[i];
if (beforeIndexZeroBased < 0) continue;
const fig = figures[beforeIndexZeroBased];
if (!fig) continue;
const wrapper = document.createElement("div");
wrapper.innerHTML = renderTitle(titleText, {
sectionNumber: i + 1,
beforeFigureIndex: beforeIndexZeroBased,
});
const nodeToInsert = wrapper.firstElementChild;
if (!nodeToInsert) continue;
fig.insertAdjacentElement("beforebegin", nodeToInsert);
}
function escapeHtml(s) {
return s
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
})({
sectionsMap: {
0: "Section Title 1",
3: "Section Title 2",
},
});
Yep makes sense! In the end I went with the “easier” solution which was to just style a homepage. Still very much a WIP but you can take a look here, did involve quite a bit of CSS-fu to repurpose the carousel as a fullscreen background and make the navbar translucent.
Down the line I’m actually hoping to “tag” each background photo with a “shade” attribute, so I can automatically swap to white font for darker photos and vice versa, which would let me make the navbar background 100% transparent.