{"id":863,"date":"2026-02-07T14:34:25","date_gmt":"2026-02-07T12:34:25","guid":{"rendered":"https:\/\/blogs.sun.ac.za\/mod\/?page_id=863"},"modified":"2026-03-16T08:50:13","modified_gmt":"2026-03-16T06:50:13","slug":"collaborate-with-us","status":"publish","type":"page","link":"https:\/\/blogs.sun.ac.za\/mod\/collaborate-with-us\/","title":{"rendered":"Collaborate With Us"},"content":{"rendered":"<p><style>\r\n    \/* MAIN CONTAINER *\/\r\n    .collab-wrapper {\r\n        max-width: 1200px; margin: 0 auto; font-family: 'Helvetica', sans-serif;\r\n    }\r\n\r\n    \/* THE CARD *\/\r\n    .collab-card {\r\n        display: flex; flex-direction: row; background: #fff;\r\n        border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 30px;\r\n        overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n        transition: transform 0.2s;\r\n    }\r\n    .collab-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px rgba(0,0,0,0.1); }\r\n\r\n    \/* LEFT COLUMN *\/\r\n    .collab-left {\r\n        width: 30%; background: #f7fafc; padding: 40px 20px;\r\n        text-align: center; border-right: 1px solid #edf2f7;\r\n        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;\r\n    }\r\n    .collab-photo {\r\n        width: 160px; height: 160px; border-radius: 50%; object-fit: cover;\r\n        margin-bottom: 20px; border: 5px solid white; box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n        background-color: #e2e8f0; \/* Grey background while loading *\/\r\n    }\r\n    .collab-name {\r\n        font-size: 1.4rem; font-weight: bold; color: #2d3748; margin: 0 0 10px 0; line-height: 1.2;\r\n    }\r\n    .collab-email-btn {\r\n        display: inline-block; margin-top: 10px; font-size: 0.9rem; color: #3182ce;\r\n        background: white; padding: 8px 15px; border-radius: 20px; border: 1px solid #e2e8f0;\r\n        text-decoration: none; transition: all 0.2s;\r\n    }\r\n    .collab-email-btn:hover { background: #3182ce; color: white; border-color: #3182ce; }\r\n\r\n    \/* RIGHT COLUMN *\/\r\n    .collab-right { width: 70%; padding: 40px; }\r\n    .collab-section-label {\r\n        font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;\r\n        color: #d4af37; font-weight: bold; margin-bottom: 10px; display: block;\r\n    }\r\n    .collab-content { font-size: 1rem; color: #4a5568; line-height: 1.6; margin-bottom: 25px; }\r\n    .collab-content ul { padding-left: 20px; margin-top: 5px; }\r\n    .collab-content li { margin-bottom: 5px; }\r\n    .collab-content p { margin-bottom: 10px; }\r\n\r\n    \/* MOBILE RESPONSIVE *\/\r\n    @media (max-width: 768px) {\r\n        .collab-card { flex-direction: column; }\r\n        .collab-left, .collab-right { width: 100%; border: none; }\r\n        .collab-left { border-bottom: 1px solid #edf2f7; padding: 30px; }\r\n        .collab-right { padding: 25px; }\r\n    }\r\n<\/style>\r\n\r\n<div id=\"collab-root\" class=\"collab-wrapper\">\r\n    Loading Collaborators...\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    const container = document.getElementById('collab-root');\r\n    const apiUrl = 'https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/collaborator?per_page=50&_embed';\r\n    const mediaUrl = 'https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/media?include=';\r\n\r\n    fetch(apiUrl)\r\n        .then(res => res.json())\r\n        .then(async posts => {\r\n            if(posts.length === 0) { container.innerHTML = '<p>No collaborators found.<\/p>'; return; }\r\n\r\n            \/\/ RANDOMIZE POSTS (Fisher-Yates Shuffle)\r\n            for (let i = posts.length - 1; i > 0; i--) {\r\n                const j = Math.floor(Math.random() * (i + 1));\r\n                [posts[i], posts[j]] = [posts[j], posts[i]];\r\n            }\r\n\r\n            \/\/ 1. COLLECT IMAGE IDs (The \"Concierge\" Step)\r\n            let imageIds = [];\r\n            let postsWithIds = [];\r\n\r\n            posts.forEach(post => {\r\n                const acf = post.acf || {};\r\n                let raw = acf.collab_photo;\r\n                \r\n                \/\/ Check if it's a Number (ID) or a String (URL)\r\n                if (typeof raw === 'number' || (typeof raw === 'string' && !raw.includes('http'))) {\r\n                    imageIds.push(raw);\r\n                    post.tempImageId = raw;\r\n                } else if (typeof raw === 'string') {\r\n                    post.tempImageUrl = raw;\r\n                } else if (typeof raw === 'object' && raw && raw.url) {\r\n                    post.tempImageUrl = raw.url;\r\n                }\r\n                postsWithIds.push(post);\r\n            });\r\n\r\n            \/\/ 2. FETCH MISSING IMAGES\r\n            let mediaLookup = {};\r\n            if (imageIds.length > 0) {\r\n                try {\r\n                    const mediaRes = await fetch(mediaUrl + imageIds.join(','));\r\n                    const mediaItems = await mediaRes.json();\r\n                    mediaItems.forEach(media => { mediaLookup[media.id] = media.source_url; });\r\n                } catch (e) { console.error(\"Media fetch failed\", e); }\r\n            }\r\n\r\n            \/\/ 3. BUILD HTML\r\n            let html = '';\r\n            postsWithIds.forEach(post => {\r\n                const name = post.title.rendered;\r\n                const acf = post.acf || {};\r\n                \r\n                \/\/ Resolve Final Image URL\r\n                let photoUrl = post.tempImageUrl || mediaLookup[post.tempImageId] || 'https:\/\/via.placeholder.com\/150?text=No+Image';\r\n\r\n                const email = acf.collab_email || '';\r\n                const research = acf.collab_research || 'No research interests listed.';\r\n                const consulting = acf.collab_consulting || '';\r\n\r\n                html += `\r\n                <div class=\"collab-card\">\r\n                    <div class=\"collab-left\">\r\n                        <img decoding=\"async\" src=\"${photoUrl}\" alt=\"${name}\" class=\"collab-photo\">\r\n                        <h3 class=\"collab-name\">${name}<\/h3>\r\n                        ${email ? `<a href=\"mailto:${email}\" class=\"collab-email-btn\">\u2709 Email Me<\/a>` : ''}\r\n                    <\/div>\r\n\r\n                    <div class=\"collab-right\">\r\n                        <span class=\"collab-section-label\">Research Interests<\/span>\r\n                        <div class=\"collab-content\">${research}<\/div>\r\n\r\n                        ${consulting ? `\r\n                            <hr style=\"border:0; border-top:1px solid #edf2f7; margin: 25px 0;\">\r\n                            <span class=\"collab-section-label\">Consulting & Expertise<\/span>\r\n                            <div class=\"collab-content\">${consulting}<\/div>\r\n                        ` : ''}\r\n                    <\/div>\r\n                <\/div>`;\r\n            });\r\n\r\n            container.innerHTML = html;\r\n        })\r\n        .catch(err => {\r\n            console.error(err);\r\n            container.innerHTML = '<p>Error loading collaborators.<\/p>';\r\n        });\r\n});\r\n<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Loading Collaborators&#8230;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":17903,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-863","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages\/863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/users\/17903"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/comments?post=863"}],"version-history":[{"count":2,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages\/863\/revisions"}],"predecessor-version":[{"id":889,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages\/863\/revisions\/889"}],"wp:attachment":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/media?parent=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}