Displaying My Rss Feed On Hartley Consultants Front Page

I had always planned to replace the feed on the front page of Hartley Consultants web site with a summary of recent posts from this blog. I had previously sucked in news articles from the local SMF Forum that is on site, but I intend to remove the forum shortly because I am setting up the equivalent on this site, where it is more appropriate.

It turned out to be remarkably easy to achieve. A call to “file_get_contents” with the url of my feed returned the raw xml into a variable, whilst a call to “preg_match_all” enabled me to parse the feed content and find the relevant information to display. The formatting of the articles was already achieved by matching the same format as I had used for the forum feed.

Here is the code I used

$feed = file_get_contents(http://www.chandlerfamily.org.uk/feed/);
//having got the xml feed from chandler’s zen we parse the xml looking for all the entries
$pat = #<item>.*?<title>(.*?)</title>.*?<link>(.*?)</link>.*?<pubDate>[^,]+,\s+(\d+)\s+([[:alpha:]]+).*?</pubDate>’;
$pat .= .*?<description><!\[CDATA\[(.*?)\[\.\.\.\]\]\]></description>.*?</item>#sm’;
if (preg_match_all($pat,$feed, $topics,PREG_SET_ORDER)){
  $item = 0;
  foreach($topics as $newsitem) {
    $item++;
    ?> <div class="newsitem">
    <div class="date"><h4><?php echo $newsitem[4]; ?></h4><h5><?php echo $newsitem[3]; ?></h5></div><h3><?php echo $newsitem[1]; ?></h3>
    <p><?php echo $newsitem[5];?></p>
    <p><a href="<?php echo $newsitem[2]?>" title="view full post at www.chandlerfamily.org.uk (in a new window)" target="_blank">More …</a></p>
    </div>
    <?php
    if($item > 2) break;
  }
} else {
  echo <div class="newsitem">Sorry No Data</div>;
}
unset ($feed);
unset ($topics);

The most important part is the pattern to match. But even that turned out to be quite straight forward, even in it did take a bit of trial and error to get it exactly right. I hope someone trying to do the same thing can use this as a starting point.

UPDATE 22nd April 2020. As I move this site over to Jekyll and Hartley Consultants has already become a one page static site (I am retired and not looking for more business, so its just a placeholder until the domain name registration runs out), I am about to do the same thing again, this time using javascript in the client to achieve a similar outcome.

Note the stuff below is NOT working yet, but shows the approach

fetch('https://www.chandlerfamily.org.uk/feed.xml')
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
  .then(data => {
    const entries = data.querySelectorAll('entry');
    let html = ``;
    entries.forEach(el => {
      const title = el.querySelector('title').innerHTML;
      html += `
        <article>
          <h2>
            <a href="${el.querySelector('link').href}" target="_blank" rel="noopener">
              ${el.querySelector('title').innerHTML}
            </a>
          </h2>
          <details>
            <summary>${el.querySelector('summary').innerHTML}</summary>
            <p>${el.querySelector('content').innerHTML}</p>
          </details>
        </article>
      `;
    });
    document.body.insertAdjacentHTML("beforeend", html);
  });

Tags:

Categories:

Updated: