Retizen Gallery<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #f8f6f3;\n --surface-color: #ffffff;\n --text-color: #2d3748;\n --primary-color: #e67e22;\n --accent-color: #f39c12;\n }\n \n * {\n box-sizing: border-box;\n }\n \n html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n }\n \n body {\n font-family: 'Source Sans 3', sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n }\n \n .heading-font {\n font-family: 'Playfair Display', serif;\n }\n \n .gallery-item {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n }\n \n .gallery-item.visible {\n opacity: 1;\n transform: translateY(0);\n }\n \n .gallery-image {\n transition: transform 0.4s ease;\n }\n \n .gallery-card:hover .gallery-image {\n transform: scale(1.08);\n }\n \n .gallery-overlay {\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .gallery-card:hover .gallery-overlay {\n opacity: 1;\n }\n \n .caption-bar {\n transform: translateY(100%);\n transition: transform 0.3s ease;\n }\n \n .gallery-card:hover .caption-bar {\n transform: translateY(0);\n }\n \n .filter-btn {\n transition: all 0.3s ease;\n }\n \n .filter-btn.active {\n background-color: var(--primary-color);\n color: white;\n }\n \n .lightbox {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n \n .lightbox.active {\n opacity: 1;\n visibility: visible;\n }\n \n .lightbox-content {\n transform: scale(0.9);\n transition: transform 0.3s ease;\n }\n \n .lightbox.active .lightbox-content {\n transform: scale(1);\n }\n \n .load-btn {\n transition: all 0.3s ease;\n }\n \n .load-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(26, 95, 74, 0.3);\n }\n \n .stagger-1 { animation-delay: 0.1s; }\n .stagger-2 { animation-delay: 0.2s; }\n .stagger-3 { animation-delay: 0.3s; }\n .stagger-4 { animation-delay: 0.4s; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n <div class=\"app-wrapper w-full h-full overflow-auto\" style=\"background-color: var(--bg-color);\">\n <header class=\"w-full py-12 px-6 text-center\" style=\"background: linear-gradient(135deg, var(--primary-color) 0%, #2a7d62 100%);\">\n <div class=\"max-w-4xl mx-auto\">\n <h1 id=\"page-title\" class=\"heading-font text-4xl md:text-5xl font-bold text-white mb-4\">Our Work in Action<\/h1>\n <p id=\"page-subtitle\" class=\"text-lg md:text-xl text-white\/90 max-w-2xl mx-auto leading-relaxed\">Moments from civic engagement, youth programs, and community advocacy.<\/p>\n <\/div>\n <svg class=\"w-full h-12 mt-8 -mb-1\" viewbox=\"0 0 1200 60\" preserveaspectratio=\"none\"><path d=\"M0,0 C300,60 900,60 1200,0 L1200,60 L0,60 Z\" fill=\"var(--bg-color)\" \/>\n <\/svg>\n <\/header>\n <section class=\"w-full px-6 py-8\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"flex flex-wrap justify-center gap-3\" id=\"filter-container\"><button class=\"filter-btn active px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color);\" data-filter=\"all\"> All <\/button> <button class=\"filter-btn px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color); color: var(--primary-color);\" data-filter=\"baraza\"> Youth Baraza <\/button> <button class=\"filter-btn px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color); color: var(--primary-color);\" data-filter=\"y4a\"> Y4A Tournaments <\/button> <button class=\"filter-btn px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color); color: var(--primary-color);\" data-filter=\"advocacy\"> Advocacy Campaigns <\/button>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"w-full px-6 pb-8\">\n <div class=\"max-w-6xl mx-auto\">\n <div id=\"gallery-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <\/div>\n <div class=\"text-center mt-12\"><button id=\"load-more-btn\" class=\"load-btn px-8 py-3.5 rounded-full text-white font-semibold text-lg\" style=\"background-color: var(--primary-color);\"> Load More Photos <\/button>\n <p id=\"load-status\" class=\"mt-4 text-sm\" style=\"color: var(--text-color); opacity: 0.7;\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n <div id=\"lightbox\" class=\"lightbox fixed inset-0 z-50 flex items-center justify-center p-4\" style=\"background-color: rgba(0,0,0,0.9);\"><button id=\"lightbox-close\" class=\"absolute top-6 right-6 text-white text-4xl hover:opacity-70 transition-opacity\" aria-label=\"Close lightbox\">\n <svg width=\"32\" height=\"32\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 6L6 18M6 6l12 12\" \/>\n <\/svg><\/button> <button id=\"lightbox-prev\" class=\"absolute left-4 md:left-8 text-white text-4xl hover:opacity-70 transition-opacity\" aria-label=\"Previous image\">\n <svg width=\"40\" height=\"40\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\" \/>\n <\/svg><\/button>\n <div class=\"lightbox-content max-w-5xl w-full\"><img decoding=\"async\" id=\"lightbox-image\" src=\"\" alt=\"\" class=\"max-h-[80vh] w-auto mx-auto rounded-lg shadow-2xl\">\n <p id=\"lightbox-caption\" class=\"text-white text-center mt-4 text-lg\"><\/p>\n <p id=\"lightbox-counter\" class=\"text-white\/60 text-center mt-2 text-sm\"><\/p>\n <\/div><button id=\"lightbox-next\" class=\"absolute right-4 md:right-8 text-white text-4xl hover:opacity-70 transition-opacity\" aria-label=\"Next image\">\n <svg width=\"40\" height=\"40\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\" \/>\n <\/svg><\/button>\n <\/div>\n <\/div>\n <script>\n \/\/ Gallery Data\n const galleryData = [\n { id: 1, category: 'baraza', caption: 'Youth Baraza Session 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC_2022-2-1-300x200.jpg' },\n { id: 2, category: 'baraza', caption: 'Youth Baraza Session 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3554-1-300x200.jpg' },\n { id: 3, category: 'baraza', caption: 'Youth Baraza Session 3', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3683-300x200.jpg' },\n { id: 4, category: 'baraza', caption: 'Youth Baraza Session 4', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3630-300x200.jpg' },\n { id: 5, category: 'baraza', caption: 'Youth Baraza Session 5', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3575-300x200.jpg' },\n { id: 6, category: 'baraza', caption: 'Youth Baraza Session 6', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3606-300x200.jpg' },\n { id: 7, category: 'baraza', caption: 'Youth Baraza Session 7', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC_1930-1-300x200.jpg' },\n { id: 8, category: 'y4a', caption: 'Y4A Tournament Match 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/IMG-20251215-WA0033-300x169.jpg' },\n { id: 9, category: 'y4a', caption: 'Y4A Tournament Match 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/IMG-20251215-WA0028-300x225.jpg' },\n { id: 10, category: 'y4a', caption: 'Y4A Tournament Action 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1573-300x200.jpg' },\n { id: 11, category: 'y4a', caption: 'Y4A Tournament Action 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1564-300x200.jpg' },\n { id: 12, category: 'y4a', caption: 'Y4A Tournament Highlight 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1533-300x200.jpg' },\n { id: 13, category: 'y4a', caption: 'Y4A Tournament Highlight 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1527-300x200.jpg' },\n { id: 14, category: 'y4a', caption: 'Y4A Tournament Moment', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1364-300x200.jpg' },\n { id: 15, category: 'y4a', caption: 'Y4A Tournament Gallery 8', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },\n { id: 16, category: 'y4a', caption: 'Y4A Tournament Gallery 9', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },\n { id: 17, category: 'y4a', caption: 'Y4A Tournament Gallery 10', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },\n { id: 18, category: 'advocacy', caption: 'Advocacy Campaign Action 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/1000351803.jpg-300x200.jpeg' },\n { id: 19, category: 'advocacy', caption: 'Advocacy Campaign Action 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC_1930-300x200.jpg' },\n { id: 20, category: 'advocacy', caption: 'Advocacy Campaign Moment 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0520-300x200.jpg' },\n { id: 21, category: 'advocacy', caption: 'Advocacy Campaign Moment 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0523-300x200.jpg' },\n { id: 22, category: 'advocacy', caption: 'Advocacy Campaign Moment 3', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0523-300x200.jpg' },\n { id: 23, category: 'advocacy', caption: 'Advocacy Campaign Highlight', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0511-300x200.jpg' },\n ];\n \n \/\/ State\n let currentFilter = 'all';\n let loadedCount = 0;\n const itemsPerLoad = 8;\n let currentLightboxIndex = 0;\n let visibleImages = [];\n \n \/\/ DOM Elements\n const galleryGrid = document.getElementById('gallery-grid');\n const loadMoreBtn = document.getElementById('load-more-btn');\n const loadStatus = document.getElementById('load-status');\n const lightbox = document.getElementById('lightbox');\n const lightboxImage = document.getElementById('lightbox-image');\n const lightboxCaption = document.getElementById('lightbox-caption');\n const lightboxCounter = document.getElementById('lightbox-counter');\n \n \/\/ Default Config\n const defaultConfig = {\n page_title: 'Our Work in Action',\n page_subtitle: 'Moments from civic engagement, youth programs, and community advocacy.',\n load_more_text: 'Load More Photos',\n background_color: '#f8f6f3',\n surface_color: '#ffffff',\n text_color: '#2d3748',\n primary_color: '#e67e22',\n accent_color: '#f39c12',\n font_family: 'Source Sans 3',\n font_size: 16\n };\n \n \/\/ Get filtered data\n function getFilteredData() {\n if (currentFilter === 'all') return galleryData;\n return galleryData.filter(item => item.category === currentFilter);\n }\n \n \/\/ Create gallery card\n function createGalleryCard(item, index) {\n const card = document.createElement('div');\n card.className = 'gallery-item';\n card.dataset.id = item.id;\n card.dataset.category = item.category;\n \n const hasImage = item.image;\n const backgroundStyle = hasImage ? '' : `background: ${item.gradient};`;\n \n card.innerHTML = `\n <div class=\"gallery-card cursor-pointer rounded-xl overflow-hidden shadow-lg\" style=\"background-color: var(--surface-color);\">\n <div class=\"relative aspect-square overflow-hidden\">\n <div class=\"gallery-image w-full h-full flex items-center justify-center\" ${backgroundStyle ? `style=\"${backgroundStyle}\"` : ''}>\n ${hasImage ? `<img decoding=\"async\" src=\"${item.image}\" alt=\"${item.caption}\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\" onerror=\"this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #667eea 0%, #764ba2 100%)';\">` : `<svg class=\"w-16 h-16 text-white\/40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\n <path d=\"M21 15l-5-5L5 21\"\/>\n <\/svg>`}\n <\/div>\n <div class=\"gallery-overlay absolute inset-0 flex items-center justify-center\" style=\"background-color: rgba(244, 162, 97, 0.8);\">\n <svg class=\"w-12 h-12 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n <path d=\"M21 21l-4.35-4.35\"\/>\n <path d=\"M11 8v6M8 11h6\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"p-4\">\n <p class=\"text-sm font-medium\" style=\"color: var(--text-color);\">${item.caption}<\/p>\n <span class=\"text-xs mt-1 inline-block px-2 py-0.5 rounded-full\" style=\"background-color: var(--primary-color); color: white; opacity: 0.8;\">${item.category}<\/span>\n <\/div>\n <\/div>\n `;\n \n card.addEventListener('click', () => openLightbox(item.id));\n \n return card;\n }\n \n \/\/ Load images\n function loadImages(reset = false) {\n const filteredData = getFilteredData();\n \n if (reset) {\n galleryGrid.innerHTML = '';\n loadedCount = 0;\n }\n \n const startIndex = loadedCount;\n const endIndex = Math.min(loadedCount + itemsPerLoad, filteredData.length);\n \n for (let i = startIndex; i < endIndex; i++) {\n const card = createGalleryCard(filteredData[i], i);\n galleryGrid.appendChild(card);\n \n \/\/ Trigger animation with stagger\n setTimeout(() => {\n card.classList.add('visible');\n }, (i - startIndex) * 100);\n }\n \n loadedCount = endIndex;\n updateLoadStatus(filteredData.length);\n }\n \n \/\/ Update load status\n function updateLoadStatus(total) {\n loadStatus.textContent = `Showing ${loadedCount} of ${total} photos`;\n loadMoreBtn.style.display = loadedCount >= total ? 'none' : 'inline-block';\n }\n \n \/\/ Filter handling\n document.getElementById('filter-container').addEventListener('click', (e) => {\n if (e.target.classList.contains('filter-btn')) {\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n btn.style.backgroundColor = 'transparent';\n btn.style.color = 'var(--primary-color)';\n });\n \n e.target.classList.add('active');\n e.target.style.backgroundColor = 'var(--primary-color)';\n e.target.style.color = 'white';\n \n currentFilter = e.target.dataset.filter;\n loadImages(true);\n }\n });\n \n \/\/ Load more button\n loadMoreBtn.addEventListener('click', () => {\n loadImages();\n });\n \n \/\/ Lightbox functions\n function openLightbox(imageId) {\n const filteredData = getFilteredData();\n visibleImages = filteredData.slice(0, loadedCount);\n currentLightboxIndex = visibleImages.findIndex(img => img.id === imageId);\n \n updateLightboxContent();\n lightbox.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n \n function closeLightbox() {\n lightbox.classList.remove('active');\n document.body.style.overflow = '';\n }\n \n function updateLightboxContent() {\n const item = visibleImages[currentLightboxIndex];\n \n if (item.image) {\n \/\/ Real image\n lightboxImage.src = item.image;\n } else {\n \/\/ Gradient placeholder\n lightboxImage.style.background = item.gradient;\n lightboxImage.src = 'data:image\/svg+xml,' + encodeURIComponent(`\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600\" height=\"400\" viewBox=\"0 0 600 400\">\n <defs>\n <linearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:${item.gradient.match(\/#[a-fA-F0-9]{6}\/g)?.[0] || '#667eea'}\"\/>\n <stop offset=\"100%\" style=\"stop-color:${item.gradient.match(\/#[a-fA-F0-9]{6}\/g)?.[1] || '#764ba2'}\"\/>\n <\/linearGradient>\n <\/defs>\n <rect width=\"600\" height=\"400\" fill=\"url(#grad)\"\/>\n <text x=\"300\" y=\"200\" text-anchor=\"middle\" fill=\"white\" font-size=\"24\" opacity=\"0.5\">${item.caption}<\/text>\n <\/svg>\n `);\n }\n \n lightboxImage.alt = item.caption;\n lightboxImage.style.width = 'auto';\n lightboxImage.style.height = 'auto';\n lightboxCaption.textContent = item.caption;\n lightboxCounter.textContent = `${currentLightboxIndex + 1} \/ ${visibleImages.length}`;\n }\n \n function navigateLightbox(direction) {\n currentLightboxIndex = (currentLightboxIndex + direction + visibleImages.length) % visibleImages.length;\n updateLightboxContent();\n }\n \n \/\/ Lightbox event listeners\n document.getElementById('lightbox-close').addEventListener('click', closeLightbox);\n document.getElementById('lightbox-prev').addEventListener('click', () => navigateLightbox(-1));\n document.getElementById('lightbox-next').addEventListener('click', () => navigateLightbox(1));\n \n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox) closeLightbox();\n });\n \n document.addEventListener('keydown', (e) => {\n if (!lightbox.classList.contains('active')) return;\n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowLeft') navigateLightbox(-1);\n if (e.key === 'ArrowRight') navigateLightbox(1);\n });\n \n \/\/ Intersection Observer for lazy loading animation\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.1 });\n \n \/\/ Config change handler\n async function onConfigChange(config) {\n \/\/ Update text content\n document.getElementById('page-title').textContent = config.page_title || defaultConfig.page_title;\n document.getElementById('page-subtitle').textContent = config.page_subtitle || defaultConfig.page_subtitle;\n document.getElementById('load-more-btn').textContent = config.load_more_text || defaultConfig.load_more_text;\n \n \/\/ Update colors\n document.documentElement.style.setProperty('--bg-color', config.background_color || defaultConfig.background_color);\n document.documentElement.style.setProperty('--surface-color', config.surface_color || defaultConfig.surface_color);\n document.documentElement.style.setProperty('--text-color', config.text_color || defaultConfig.text_color);\n document.documentElement.style.setProperty('--primary-color', config.primary_color || defaultConfig.primary_color);\n document.documentElement.style.setProperty('--accent-color', config.accent_color || defaultConfig.accent_color);\n \n \/\/ Update filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.style.borderColor = config.primary_color || defaultConfig.primary_color;\n if (btn.classList.contains('active')) {\n btn.style.backgroundColor = config.primary_color || defaultConfig.primary_color;\n btn.style.color = 'white';\n } else {\n btn.style.backgroundColor = 'transparent';\n btn.style.color = config.primary_color || defaultConfig.primary_color;\n }\n });\n \n \/\/ Update font\n const fontFamily = config.font_family || defaultConfig.font_family;\n document.body.style.fontFamily = `${fontFamily}, sans-serif`;\n \n \/\/ Update font size\n const baseSize = config.font_size || defaultConfig.font_size;\n document.getElementById('page-title').style.fontSize = `${baseSize * 2.5}px`;\n document.getElementById('page-subtitle').style.fontSize = `${baseSize * 1.125}px`;\n }\n \n \/\/ Initialize Element SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => window.elementSdk.setConfig({ background_color: value })\n },\n {\n get: () => config.surface_color || defaultConfig.surface_color,\n set: (value) => window.elementSdk.setConfig({ surface_color: value })\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => window.elementSdk.setConfig({ text_color: value })\n },\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => window.elementSdk.setConfig({ primary_color: value })\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (value) => window.elementSdk.setConfig({ accent_color: value })\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => window.elementSdk.setConfig({ font_family: value })\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (value) => window.elementSdk.setConfig({ font_size: value })\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['page_title', config.page_title || defaultConfig.page_title],\n ['page_subtitle', config.page_subtitle || defaultConfig.page_subtitle],\n ['load_more_text', config.load_more_text || defaultConfig.load_more_text]\n ])\n });\n }\n \n \/\/ Initial load\n loadImages();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9db192bae0f0c369',t:'MTc3MzMwNTY1NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Retizen Gallery Our Work in Action Moments from civic engagement, youth programs, and community advocacy. All Youth Baraza Y4A Tournaments Advocacy Campaigns Load More Photos<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"ticketed":false,"_links":{"self":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321"}],"version-history":[{"count":5,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":321,"date":"2024-10-15T07:31:52","date_gmt":"2024-10-15T07:31:52","guid":{"rendered":"https:\/\/retizen.org\/?page_id=321"},"modified":"2026-03-31T12:45:43","modified_gmt":"2026-03-31T09:45:43","slug":"gallery","status":"publish","type":"page","link":"https:\/\/retizen.org\/?page_id=321","title":{"rendered":"Gallery"},"content":{"rendered":"\n\n\n \n \n \n Retizen Gallery<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-color: #f8f6f3;\n --surface-color: #ffffff;\n --text-color: #2d3748;\n --primary-color: #e67e22;\n --accent-color: #f39c12;\n }\n \n * {\n box-sizing: border-box;\n }\n \n html, body {\n height: 100%;\n margin: 0;\n padding: 0;\n }\n \n body {\n font-family: 'Source Sans 3', sans-serif;\n background-color: var(--bg-color);\n color: var(--text-color);\n }\n \n .heading-font {\n font-family: 'Playfair Display', serif;\n }\n \n .gallery-item {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n }\n \n .gallery-item.visible {\n opacity: 1;\n transform: translateY(0);\n }\n \n .gallery-image {\n transition: transform 0.4s ease;\n }\n \n .gallery-card:hover .gallery-image {\n transform: scale(1.08);\n }\n \n .gallery-overlay {\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .gallery-card:hover .gallery-overlay {\n opacity: 1;\n }\n \n .caption-bar {\n transform: translateY(100%);\n transition: transform 0.3s ease;\n }\n \n .gallery-card:hover .caption-bar {\n transform: translateY(0);\n }\n \n .filter-btn {\n transition: all 0.3s ease;\n }\n \n .filter-btn.active {\n background-color: var(--primary-color);\n color: white;\n }\n \n .lightbox {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n \n .lightbox.active {\n opacity: 1;\n visibility: visible;\n }\n \n .lightbox-content {\n transform: scale(0.9);\n transition: transform 0.3s ease;\n }\n \n .lightbox.active .lightbox-content {\n transform: scale(1);\n }\n \n .load-btn {\n transition: all 0.3s ease;\n }\n \n .load-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(26, 95, 74, 0.3);\n }\n \n .stagger-1 { animation-delay: 0.1s; }\n .stagger-2 { animation-delay: 0.2s; }\n .stagger-3 { animation-delay: 0.3s; }\n .stagger-4 { animation-delay: 0.4s; }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\n <\/head>\n <body class=\"h-full\">\n <div class=\"app-wrapper w-full h-full overflow-auto\" style=\"background-color: var(--bg-color);\">\n <header class=\"w-full py-12 px-6 text-center\" style=\"background: linear-gradient(135deg, var(--primary-color) 0%, #2a7d62 100%);\">\n <div class=\"max-w-4xl mx-auto\">\n <h1 id=\"page-title\" class=\"heading-font text-4xl md:text-5xl font-bold text-white mb-4\">Our Work in Action<\/h1>\n <p id=\"page-subtitle\" class=\"text-lg md:text-xl text-white\/90 max-w-2xl mx-auto leading-relaxed\">Moments from civic engagement, youth programs, and community advocacy.<\/p>\n <\/div>\n <svg class=\"w-full h-12 mt-8 -mb-1\" viewbox=\"0 0 1200 60\" preserveaspectratio=\"none\"><path d=\"M0,0 C300,60 900,60 1200,0 L1200,60 L0,60 Z\" fill=\"var(--bg-color)\" \/>\n <\/svg>\n <\/header>\n <section class=\"w-full px-6 py-8\">\n <div class=\"max-w-6xl mx-auto\">\n <div class=\"flex flex-wrap justify-center gap-3\" id=\"filter-container\"><button class=\"filter-btn active px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color);\" data-filter=\"all\"> All <\/button> <button class=\"filter-btn px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color); color: var(--primary-color);\" data-filter=\"baraza\"> Youth Baraza <\/button> <button class=\"filter-btn px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color); color: var(--primary-color);\" data-filter=\"y4a\"> Y4A Tournaments <\/button> <button class=\"filter-btn px-5 py-2.5 rounded-full text-sm font-medium border-2\" style=\"border-color: var(--primary-color); color: var(--primary-color);\" data-filter=\"advocacy\"> Advocacy Campaigns <\/button>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"w-full px-6 pb-8\">\n <div class=\"max-w-6xl mx-auto\">\n <div id=\"gallery-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <\/div>\n <div class=\"text-center mt-12\"><button id=\"load-more-btn\" class=\"load-btn px-8 py-3.5 rounded-full text-white font-semibold text-lg\" style=\"background-color: var(--primary-color);\"> Load More Photos <\/button>\n <p id=\"load-status\" class=\"mt-4 text-sm\" style=\"color: var(--text-color); opacity: 0.7;\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n <div id=\"lightbox\" class=\"lightbox fixed inset-0 z-50 flex items-center justify-center p-4\" style=\"background-color: rgba(0,0,0,0.9);\"><button id=\"lightbox-close\" class=\"absolute top-6 right-6 text-white text-4xl hover:opacity-70 transition-opacity\" aria-label=\"Close lightbox\">\n <svg width=\"32\" height=\"32\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 6L6 18M6 6l12 12\" \/>\n <\/svg><\/button> <button id=\"lightbox-prev\" class=\"absolute left-4 md:left-8 text-white text-4xl hover:opacity-70 transition-opacity\" aria-label=\"Previous image\">\n <svg width=\"40\" height=\"40\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M15 18l-6-6 6-6\" \/>\n <\/svg><\/button>\n <div class=\"lightbox-content max-w-5xl w-full\"><img decoding=\"async\" id=\"lightbox-image\" src=\"\" alt=\"\" class=\"max-h-[80vh] w-auto mx-auto rounded-lg shadow-2xl\">\n <p id=\"lightbox-caption\" class=\"text-white text-center mt-4 text-lg\"><\/p>\n <p id=\"lightbox-counter\" class=\"text-white\/60 text-center mt-2 text-sm\"><\/p>\n <\/div><button id=\"lightbox-next\" class=\"absolute right-4 md:right-8 text-white text-4xl hover:opacity-70 transition-opacity\" aria-label=\"Next image\">\n <svg width=\"40\" height=\"40\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M9 18l6-6-6-6\" \/>\n <\/svg><\/button>\n <\/div>\n <\/div>\n <script>\n \/\/ Gallery Data\n const galleryData = [\n { id: 1, category: 'baraza', caption: 'Youth Baraza Session 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC_2022-2-1-300x200.jpg' },\n { id: 2, category: 'baraza', caption: 'Youth Baraza Session 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3554-1-300x200.jpg' },\n { id: 3, category: 'baraza', caption: 'Youth Baraza Session 3', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3683-300x200.jpg' },\n { id: 4, category: 'baraza', caption: 'Youth Baraza Session 4', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3630-300x200.jpg' },\n { id: 5, category: 'baraza', caption: 'Youth Baraza Session 5', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3575-300x200.jpg' },\n { id: 6, category: 'baraza', caption: 'Youth Baraza Session 6', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC3606-300x200.jpg' },\n { id: 7, category: 'baraza', caption: 'Youth Baraza Session 7', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC_1930-1-300x200.jpg' },\n { id: 8, category: 'y4a', caption: 'Y4A Tournament Match 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/IMG-20251215-WA0033-300x169.jpg' },\n { id: 9, category: 'y4a', caption: 'Y4A Tournament Match 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/IMG-20251215-WA0028-300x225.jpg' },\n { id: 10, category: 'y4a', caption: 'Y4A Tournament Action 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1573-300x200.jpg' },\n { id: 11, category: 'y4a', caption: 'Y4A Tournament Action 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1564-300x200.jpg' },\n { id: 12, category: 'y4a', caption: 'Y4A Tournament Highlight 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1533-300x200.jpg' },\n { id: 13, category: 'y4a', caption: 'Y4A Tournament Highlight 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1527-300x200.jpg' },\n { id: 14, category: 'y4a', caption: 'Y4A Tournament Moment', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/MG_1364-300x200.jpg' },\n { id: 15, category: 'y4a', caption: 'Y4A Tournament Gallery 8', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },\n { id: 16, category: 'y4a', caption: 'Y4A Tournament Gallery 9', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },\n { id: 17, category: 'y4a', caption: 'Y4A Tournament Gallery 10', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },\n { id: 18, category: 'advocacy', caption: 'Advocacy Campaign Action 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/1000351803.jpg-300x200.jpeg' },\n { id: 19, category: 'advocacy', caption: 'Advocacy Campaign Action 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2026\/03\/DSC_1930-300x200.jpg' },\n { id: 20, category: 'advocacy', caption: 'Advocacy Campaign Moment 1', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0520-300x200.jpg' },\n { id: 21, category: 'advocacy', caption: 'Advocacy Campaign Moment 2', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0523-300x200.jpg' },\n { id: 22, category: 'advocacy', caption: 'Advocacy Campaign Moment 3', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0523-300x200.jpg' },\n { id: 23, category: 'advocacy', caption: 'Advocacy Campaign Highlight', image: 'https:\/\/retizen.org\/wp-content\/uploads\/2025\/12\/MG_0511-300x200.jpg' },\n ];\n \n \/\/ State\n let currentFilter = 'all';\n let loadedCount = 0;\n const itemsPerLoad = 8;\n let currentLightboxIndex = 0;\n let visibleImages = [];\n \n \/\/ DOM Elements\n const galleryGrid = document.getElementById('gallery-grid');\n const loadMoreBtn = document.getElementById('load-more-btn');\n const loadStatus = document.getElementById('load-status');\n const lightbox = document.getElementById('lightbox');\n const lightboxImage = document.getElementById('lightbox-image');\n const lightboxCaption = document.getElementById('lightbox-caption');\n const lightboxCounter = document.getElementById('lightbox-counter');\n \n \/\/ Default Config\n const defaultConfig = {\n page_title: 'Our Work in Action',\n page_subtitle: 'Moments from civic engagement, youth programs, and community advocacy.',\n load_more_text: 'Load More Photos',\n background_color: '#f8f6f3',\n surface_color: '#ffffff',\n text_color: '#2d3748',\n primary_color: '#e67e22',\n accent_color: '#f39c12',\n font_family: 'Source Sans 3',\n font_size: 16\n };\n \n \/\/ Get filtered data\n function getFilteredData() {\n if (currentFilter === 'all') return galleryData;\n return galleryData.filter(item => item.category === currentFilter);\n }\n \n \/\/ Create gallery card\n function createGalleryCard(item, index) {\n const card = document.createElement('div');\n card.className = 'gallery-item';\n card.dataset.id = item.id;\n card.dataset.category = item.category;\n \n const hasImage = item.image;\n const backgroundStyle = hasImage ? '' : `background: ${item.gradient};`;\n \n card.innerHTML = `\n <div class=\"gallery-card cursor-pointer rounded-xl overflow-hidden shadow-lg\" style=\"background-color: var(--surface-color);\">\n <div class=\"relative aspect-square overflow-hidden\">\n <div class=\"gallery-image w-full h-full flex items-center justify-center\" ${backgroundStyle ? `style=\"${backgroundStyle}\"` : ''}>\n ${hasImage ? `<img decoding=\"async\" src=\"${item.image}\" alt=\"${item.caption}\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\" onerror=\"this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #667eea 0%, #764ba2 100%)';\">` : `<svg class=\"w-16 h-16 text-white\/40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\n <path d=\"M21 15l-5-5L5 21\"\/>\n <\/svg>`}\n <\/div>\n <div class=\"gallery-overlay absolute inset-0 flex items-center justify-center\" style=\"background-color: rgba(244, 162, 97, 0.8);\">\n <svg class=\"w-12 h-12 text-white\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n <path d=\"M21 21l-4.35-4.35\"\/>\n <path d=\"M11 8v6M8 11h6\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <div class=\"p-4\">\n <p class=\"text-sm font-medium\" style=\"color: var(--text-color);\">${item.caption}<\/p>\n <span class=\"text-xs mt-1 inline-block px-2 py-0.5 rounded-full\" style=\"background-color: var(--primary-color); color: white; opacity: 0.8;\">${item.category}<\/span>\n <\/div>\n <\/div>\n `;\n \n card.addEventListener('click', () => openLightbox(item.id));\n \n return card;\n }\n \n \/\/ Load images\n function loadImages(reset = false) {\n const filteredData = getFilteredData();\n \n if (reset) {\n galleryGrid.innerHTML = '';\n loadedCount = 0;\n }\n \n const startIndex = loadedCount;\n const endIndex = Math.min(loadedCount + itemsPerLoad, filteredData.length);\n \n for (let i = startIndex; i < endIndex; i++) {\n const card = createGalleryCard(filteredData[i], i);\n galleryGrid.appendChild(card);\n \n \/\/ Trigger animation with stagger\n setTimeout(() => {\n card.classList.add('visible');\n }, (i - startIndex) * 100);\n }\n \n loadedCount = endIndex;\n updateLoadStatus(filteredData.length);\n }\n \n \/\/ Update load status\n function updateLoadStatus(total) {\n loadStatus.textContent = `Showing ${loadedCount} of ${total} photos`;\n loadMoreBtn.style.display = loadedCount >= total ? 'none' : 'inline-block';\n }\n \n \/\/ Filter handling\n document.getElementById('filter-container').addEventListener('click', (e) => {\n if (e.target.classList.contains('filter-btn')) {\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.classList.remove('active');\n btn.style.backgroundColor = 'transparent';\n btn.style.color = 'var(--primary-color)';\n });\n \n e.target.classList.add('active');\n e.target.style.backgroundColor = 'var(--primary-color)';\n e.target.style.color = 'white';\n \n currentFilter = e.target.dataset.filter;\n loadImages(true);\n }\n });\n \n \/\/ Load more button\n loadMoreBtn.addEventListener('click', () => {\n loadImages();\n });\n \n \/\/ Lightbox functions\n function openLightbox(imageId) {\n const filteredData = getFilteredData();\n visibleImages = filteredData.slice(0, loadedCount);\n currentLightboxIndex = visibleImages.findIndex(img => img.id === imageId);\n \n updateLightboxContent();\n lightbox.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n \n function closeLightbox() {\n lightbox.classList.remove('active');\n document.body.style.overflow = '';\n }\n \n function updateLightboxContent() {\n const item = visibleImages[currentLightboxIndex];\n \n if (item.image) {\n \/\/ Real image\n lightboxImage.src = item.image;\n } else {\n \/\/ Gradient placeholder\n lightboxImage.style.background = item.gradient;\n lightboxImage.src = 'data:image\/svg+xml,' + encodeURIComponent(`\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600\" height=\"400\" viewBox=\"0 0 600 400\">\n <defs>\n <linearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" style=\"stop-color:${item.gradient.match(\/#[a-fA-F0-9]{6}\/g)?.[0] || '#667eea'}\"\/>\n <stop offset=\"100%\" style=\"stop-color:${item.gradient.match(\/#[a-fA-F0-9]{6}\/g)?.[1] || '#764ba2'}\"\/>\n <\/linearGradient>\n <\/defs>\n <rect width=\"600\" height=\"400\" fill=\"url(#grad)\"\/>\n <text x=\"300\" y=\"200\" text-anchor=\"middle\" fill=\"white\" font-size=\"24\" opacity=\"0.5\">${item.caption}<\/text>\n <\/svg>\n `);\n }\n \n lightboxImage.alt = item.caption;\n lightboxImage.style.width = 'auto';\n lightboxImage.style.height = 'auto';\n lightboxCaption.textContent = item.caption;\n lightboxCounter.textContent = `${currentLightboxIndex + 1} \/ ${visibleImages.length}`;\n }\n \n function navigateLightbox(direction) {\n currentLightboxIndex = (currentLightboxIndex + direction + visibleImages.length) % visibleImages.length;\n updateLightboxContent();\n }\n \n \/\/ Lightbox event listeners\n document.getElementById('lightbox-close').addEventListener('click', closeLightbox);\n document.getElementById('lightbox-prev').addEventListener('click', () => navigateLightbox(-1));\n document.getElementById('lightbox-next').addEventListener('click', () => navigateLightbox(1));\n \n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox) closeLightbox();\n });\n \n document.addEventListener('keydown', (e) => {\n if (!lightbox.classList.contains('active')) return;\n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowLeft') navigateLightbox(-1);\n if (e.key === 'ArrowRight') navigateLightbox(1);\n });\n \n \/\/ Intersection Observer for lazy loading animation\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.1 });\n \n \/\/ Config change handler\n async function onConfigChange(config) {\n \/\/ Update text content\n document.getElementById('page-title').textContent = config.page_title || defaultConfig.page_title;\n document.getElementById('page-subtitle').textContent = config.page_subtitle || defaultConfig.page_subtitle;\n document.getElementById('load-more-btn').textContent = config.load_more_text || defaultConfig.load_more_text;\n \n \/\/ Update colors\n document.documentElement.style.setProperty('--bg-color', config.background_color || defaultConfig.background_color);\n document.documentElement.style.setProperty('--surface-color', config.surface_color || defaultConfig.surface_color);\n document.documentElement.style.setProperty('--text-color', config.text_color || defaultConfig.text_color);\n document.documentElement.style.setProperty('--primary-color', config.primary_color || defaultConfig.primary_color);\n document.documentElement.style.setProperty('--accent-color', config.accent_color || defaultConfig.accent_color);\n \n \/\/ Update filter buttons\n document.querySelectorAll('.filter-btn').forEach(btn => {\n btn.style.borderColor = config.primary_color || defaultConfig.primary_color;\n if (btn.classList.contains('active')) {\n btn.style.backgroundColor = config.primary_color || defaultConfig.primary_color;\n btn.style.color = 'white';\n } else {\n btn.style.backgroundColor = 'transparent';\n btn.style.color = config.primary_color || defaultConfig.primary_color;\n }\n });\n \n \/\/ Update font\n const fontFamily = config.font_family || defaultConfig.font_family;\n document.body.style.fontFamily = `${fontFamily}, sans-serif`;\n \n \/\/ Update font size\n const baseSize = config.font_size || defaultConfig.font_size;\n document.getElementById('page-title').style.fontSize = `${baseSize * 2.5}px`;\n document.getElementById('page-subtitle').style.fontSize = `${baseSize * 1.125}px`;\n }\n \n \/\/ Initialize Element SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.background_color || defaultConfig.background_color,\n set: (value) => window.elementSdk.setConfig({ background_color: value })\n },\n {\n get: () => config.surface_color || defaultConfig.surface_color,\n set: (value) => window.elementSdk.setConfig({ surface_color: value })\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (value) => window.elementSdk.setConfig({ text_color: value })\n },\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (value) => window.elementSdk.setConfig({ primary_color: value })\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (value) => window.elementSdk.setConfig({ accent_color: value })\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (value) => window.elementSdk.setConfig({ font_family: value })\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (value) => window.elementSdk.setConfig({ font_size: value })\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['page_title', config.page_title || defaultConfig.page_title],\n ['page_subtitle', config.page_subtitle || defaultConfig.page_subtitle],\n ['load_more_text', config.load_more_text || defaultConfig.load_more_text]\n ])\n });\n }\n \n \/\/ Initial load\n loadImages();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9db192bae0f0c369',t:'MTc3MzMwNTY1NS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Retizen Gallery Our Work in Action Moments from civic engagement, youth programs, and community advocacy. All Youth Baraza Y4A Tournaments Advocacy Campaigns Load More Photos<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"ticketed":false,"_links":{"self":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321"}],"version-history":[{"count":5,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/retizen.org\/index.php?rest_route=\/wp\/v2\/pages\/321\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/retizen.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}