---
title: Search PhotoStructure Documentation
url: https://photostructure.com/search/
keywords: search
---


<div class="sans-serif">

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>

<style>
/* Dark theme (default) */
:root.dark {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #5c8dd6;
  --pagefind-ui-text: #e8e8e8;
  --pagefind-ui-background: #1a1a1a;
  --pagefind-ui-border: #3a3a3a;
  --pagefind-ui-tag: #3a3a3a;
  --pagefind-ui-font: sans-serif;
}

/* Light theme */
:root:not(.dark) {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #eeeeee;
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-font: sans-serif;
}

/* Override the article p serif rule for Pagefind UI */
.pagefind-ui *,
.pagefind-ui p,
article .pagefind-ui p,
.nested-copy .pagefind-ui p,
.nested-copy-line-height .pagefind-ui p {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* Add top margin to search field */
#search {
  margin-top: 24px;
}

/* Forum results styling */
.forum-results-container {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--pagefind-ui-border);
}

.forum-results-container h2 {
  font-family: "Roboto", sans-serif;
  font-size: 1.2em;
  margin-bottom: 20px;
}

.forum-result {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pagefind-ui-border);
}

.forum-result:last-of-type {
  border-bottom: none;
}

.forum-result h3 {
  margin: 0 0 8px 0;
  font-size: 1.1em;
}

.forum-result h3 a {
  color: var(--pagefind-ui-primary);
  text-decoration: none;
}

.forum-result h3 a:hover {
  text-decoration: underline;
}

.forum-excerpt {
  color: var(--pagefind-ui-text);
  margin: 8px 0;
}

.forum-meta {
  font-size: 0.85em;
  color: var(--pagefind-ui-text);
  opacity: 0.7;
  margin: 4px 0 0 0;
}

.forum-meta span {
  margin: 0 4px;
}

.forum-more {
  margin-top: 16px;
  text-align: center;
}

.forum-more a {
  color: var(--pagefind-ui-primary);
}

.forum-loading,
.forum-no-results,
.forum-error {
  margin-top: 24px;
  padding: 16px;
  text-align: center;
  opacity: 0.7;
}
</style>

<div id="search"></div>
<div id="forum-results"></div>

<script>
    let pagefindUI;

    window.addEventListener('DOMContentLoaded', (event) => {
        pagefindUI = new PagefindUI({
            element: "#search",
            showImages: true,
            excerptLength: 30,
            autofocus: true
        });

        // Listen for search events
        const searchInput = document.querySelector('.pagefind-ui__search-input');
        if (searchInput) {
            let debounceTimer;
            searchInput.addEventListener('input', (e) => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    searchForum(e.target.value);
                }, 500);
            });

            // Check for q parameter in URL and trigger search
            const urlParams = new URLSearchParams(window.location.search);
            const query = urlParams.get('q');
            if (query) {
                searchInput.value = query;
                searchInput.dispatchEvent(new Event('input', { bubbles: true }));
                searchForum(query);

                // If quoted phrase returns no results, retry without quotes
                const isQuoted = query.startsWith('"') && query.endsWith('"');
                if (isQuoted) {
                    setTimeout(async () => {
                        const pagefind = await import('/pagefind/pagefind.js');
                        const results = await pagefind.search(query);
                        if (results.results.length === 0) {
                            const unquoted = query.slice(1, -1);
                            searchInput.value = unquoted;
                            searchInput.dispatchEvent(new Event('input', { bubbles: true }));
                            searchForum(unquoted);
                        }
                    }, 300);
                }
            }
        }
    });

    // Escape HTML to prevent XSS from forum API responses
    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>"']/g, c =>
            ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);
    }

    async function searchForum(query) {
        const resultsDiv = document.getElementById('forum-results');

        if (!query || query.length < 2) {
            resultsDiv.innerHTML = '';
            return;
        }

        resultsDiv.innerHTML = '<p class="forum-loading">Searching forum...</p>';

        try {
            const response = await fetch(`https://forum.photostructure.com/search.json?q=${encodeURIComponent(query)}`);
            const data = await response.json();

            if (data.posts && data.posts.length > 0) {
                const topicsMap = new Map(data.topics.map(t => [t.id, t]));
                const resultsHTML = data.posts.slice(0, 5).map(post => {
                    const topic = topicsMap.get(post.topic_id);
                    const url = `https://forum.photostructure.com/t/${encodeURIComponent(topic.slug)}/${post.topic_id}/${post.post_number}`;
                    return `
                        <div class="forum-result">
                            <h3><a href="${url}" target="_blank">${escapeHtml(topic.fancy_title)}</a></h3>
                            <p class="forum-excerpt">${escapeHtml(post.blurb)}</p>
                            <p class="forum-meta">
                                <span>Forum post by ${escapeHtml(post.username)}</span>
                                <span>•</span>
                                <span>${new Date(post.created_at).toLocaleDateString()}</span>
                            </p>
                        </div>
                    `;
                }).join('');

                resultsDiv.innerHTML = `
                    <div class="forum-results-container">
                        <h2>Forum Results</h2>
                        ${resultsHTML}
                        <p class="forum-more">
                            <a href="https://forum.photostructure.com/search?q=${encodeURIComponent(query)}" target="_blank">
                                View all forum results →
                            </a>
                        </p>
                    </div>
                `;
            } else {
                resultsDiv.innerHTML = '<p class="forum-no-results">No forum results found.</p>';
            }
        } catch (error) {
            console.error('Forum search error:', error);
            resultsDiv.innerHTML = '<p class="forum-error">Unable to search forum. Try <a href="https://forum.photostructure.com/search" target="_blank">searching directly</a>.</p>';
        }
    }
</script>

</div>