最近撮影した写真が海外の人達に好評なので久しぶりにサイトをフォトグラファーのサイトっぽくすることにしました。 Flickrが枚数制限を始めて以降、Lycheeという写真管理用ソフトをインストールしてフォトギャラリーとして運用しています。
ここにアップした画像を背景画像に利用できないか調べたところ「Lychee-RSS」というプラグインを追加することで対応できそうだったので実装してみました。

手順

1.Lychee-RSSをダウンロードしてファイルを解凍、Lycheeのpluginsディレクトリに「rss」フォルダをアップロードする。
2.RSSフィードからxmlデータを取得、必要なデータを抜き取り加工してimgタグを10件ほど出力。

<div id="latest-photos">
<?php
// RSSフィードのURL
$rssUrl = 'https://560days.com/photo-gallery/plugins/rss/?format=xml';
// RSSフィードを取得してXMLデータを取得
$rssData = file_get_contents($rssUrl);
// XMLデータをSimpleXMLElementオブジェクトに変換
$rssXml = simplexml_load_string($rssData);
// 加工したURLを格納する配列を初期化
$processedUrls = [];
// XMLデータからURLを抽出して加工
foreach ($rssXml->channel->item as $item) {      
$pubDate = date_create_from_format('D, d M Y H:i:s O', (string) $item->pubDate);
$processedPubDate = $pubDate->format('Ymd');
// 'media'プレフィックスで名前空間を指定して、'content'要素内の'url'属性の値を取得
$mediaContent = $item->children('media', true)->content;
$url = (string) $mediaContent->attributes()->url;
// 'plugins/../../'を削除してURLを加工
$processedUrl = str_replace('plugins/../../', '', $url);      
// 加工したURLと日付を配列に追加
$processedUrls[] = [
'url' => $processedUrl,
'pubDate' => $processedPubDate
] ;
// 10件以上の場合はループを抜ける
if (count($processedUrls) >= 10) {
break;
}
}
// 加工したURLを出力
foreach ($processedUrls as $data) {
echo '<img src="'.$data['url'].'?v='.$data['pubDate'].'">' . PHP_EOL;
}
?>
</div><!--/.latest-photos-->

3.PHPで出力したimgをランダムで1秒当たり5秒表示する。

<script>
//背景ギャラリーの制御
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll("#latest-photos img");
let index = Math.floor(Math.random() * images.length);
function changeBackground() {
images[index].style.opacity = "0";
index = (index + 1) % images.length;
images[index].style.opacity = "1";
}
// ランダムな画像を表示
images[index].style.opacity = "1";
// 1枚当たりの表示秒数
setInterval(changeBackground, 5000);
});
</script>

トップページに実装しました。 気まぐれでリニューアルするのでいつまで実装されているかはわからないけれど・・・。