bbPress.org

Perhaps someone will find it useful. This code does not load the system and saves the result in temporary storage.

// Function to fetch the latest image from a topic
async function fetchLatestImageFromTopic(topicUrl) {
    // Check if there is cached data and if it is fresh
    let cachedData = localStorage.getItem('latestImageData');
    let cachedTimestamp = localStorage.getItem('latestImageTimestamp');
    const cacheLifetime = 24 * 60 * 60 * 1000; // 24 hours

    // If there is cached data and it's fresh, display it
    if (cachedData && cachedTimestamp && (Date.now() - cachedTimestamp < cacheLifetime)) {
        document.getElementById('latest-image-container').innerHTML = cachedData;
        return;
    }

    // Request to the server to get the topic data
    try {
        const response = await fetch(topicUrl);
        if (!response.ok) throw new Error('Page load error');

        const text = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(text, 'text/html');

        // Extract all replies in the topic
        const replies = Array.from(doc.querySelectorAll('.bbp-reply'));

        let latestImage = null;
        let latestDate = 0;
        let heading = '';
        let description = '';

        // Loop through all replies and find the freshest image
        for (let reply of replies) {
            const postDate = new Date(reply.querySelector('.bbp-post-meta .bbp-post-date').textContent).getTime();
            const img = reply.querySelector('img');
            
            if (img && postDate > latestDate) {
                latestImage = img;
                latestDate = postDate;
                heading = reply.querySelector('h3') ? reply.querySelector('h3').innerText : '';
                description = reply.textContent.trim().replace(heading, '').trim();
            }
        }

        // If an image is found, create HTML content
        if (latestImage) {
            const imgSrc = latestImage.getAttribute('src');
            const imgAlt = latestImage.getAttribute('alt') || '';

            const outputHtml = 

                <div style="text-align: center;">
                    ${heading ? <code><h3>${heading}</h3></code> : ''}
                    <img src="${imgSrc}" alt="${imgAlt}" />
                    ${description ? <code><p>${description}</p></code> : ''}
                </div>
            ;

            // Save the data in local storage
            localStorage.setItem('latestImageData', outputHtml);
            localStorage.setItem('latestImageTimestamp', Date.now());

            // Display the result on the page
            document.getElementById('latest-image-container').innerHTML = outputHtml;
        } else {
            document.getElementById('latest-image-container').innerHTML = '<p>No images found.</p>';
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

// Call the function with the topic URL
fetchLatestImageFromTopic('https://www - yours - topic');

How This Code Works:
Cache Check:

First, we check if there is any cached data in localStorage.

If the data exists and is still fresh (within the last 24 hours), we display it on the page.

Server Request:

If there is no cache or it’s outdated, we send an AJAX request to the server to retrieve the topic data.

We only need to parse the HTML content to extract images and publication dates.

Finding the Freshest Image:

We loop through all the replies and extract the image and publication date.

If the date of the current reply is more recent than the previous one, we update the image and data.

Caching the Result:

After finding the freshest image and associated content, we save the result in localStorage so we don’t need to make repeated requests.

Displaying the Result:

We display the result on the page, including the image, heading (if available), and description.

Where to Place This Code?
HTML: Insert this code within a <script> block on the page where you want to display the image.