[続]honda-beat.jpの記事一覧に表示させるアイキャッチ画像について

  • 投稿者:
  • カテゴリ:
このエントリーをはてなブックマークに追加

honda-beat.jpのアイキャッチ画像をブログ記事の一番目の画像にする

先日、「honda-beat.jpの記事一覧に表示させるアイキャッチ画像について」で、ブログ記事のアイキャッチ画像として、記事の一番最初に表示される画像を使用する方法を書きましたが、紹介したものより簡単にできる方法があったのでこちらにメモとして残しておきます。

※「記事の一番最初に表示される画像=ブログ記事内の画像で一番最初にアップロードされた画像」という前提です。

まずは<mt:EntryAssets>でブログ記事の画像を書き出した場合の確認です。No.1〜No.5の5枚の画像を使っています。記事への登録は「1 > 2 > 3 > 4 > 5」の順番でアップロード・登録しています。

以下の3パターンで書き出しています。

//「lastn」「limit」のモディファイアなし
<mt:EntryAssets>
<img src="<mt:AssetThumbnailUrl>" width="120">
</mt:EntryAssets>

//「lastn」のモディファイアあり
<mt:EntryAssets lastn="5">
<img src="<mt:AssetThumbnailUrl>">
</mt:EntryAssets>

//「limit」のモディファイアあり
<mt:EntryAssets limit="5">
<img src="<mt:AssetThumbnailUrl>" width="120">
</mt:EntryAssets>

書き出し結果は以下となります。

mt:EntryAssetsでの画像の書き出し順について

現状、<mt:EntryAssets>タグでは「lastn」モディファイアがある場合は新しい画像から書き出され、「lastn」モディファイアがない場合は古い画像から書き出される仕様となっているようです。

そのため、「limit」モディファイアを使う(=lastnモディファイアがない)と古い画像から順番に書き出されるようになり、「limit="1"」とすると「ブログ記事内の画像で最初にアップロードされた画像」が表示されるようになります。

//「lastn」「limit」のモディファイアなし
<mt:EntryAssets>
<img src="<mt:AssetThumbnailUrl>" width="120">
</mt:EntryAssets>

//「lastn」モディファイアに「1件」を指定
<mt:EntryAssets lastn="1">
<img src="<mt:AssetThumbnailUrl>">
</mt:EntryAssets>

//「limit」モディファイアに「1件」を指定
<mt:EntryAssets limit="1">
<img src="<mt:AssetThumbnailUrl>" width="120">
</mt:EntryAssets>

「lastn」「limit」ともに1件と指定すると下記のような結果になります。

mt:EntryAssetsの「lastn」「limit」に1件を指定した場合

honda-beat.jpの記事一覧に表示させるアイキャッチ画像について」では、ブログ記事に登録された画像のうち、一番古い画像を表示するために「lastn」と「offset」を使っていますが、「limit」モディファイアを使う方法に修正しました。

//テンプレートから抜粋・簡略化済み
//修正前:「lastn」と「offset」を使った場合の一例
<mt:Entries>
<mt:SetVar name="entryassetscount" value="0">
  <mt:EntryAssets>
    <mt:SetVar name="entryassetscount" value="1" op="+">
  </mt:EntryAssets>
  <mt:If name="entryassetscount" eq="0">
  <mt:ElseIf name="entryassetscount" ge="2">
    <mt:SetVar name="entryassetscount" value="1" op="-">
    <mt:EntryAssets offset="$entryassetscount" lastn="1"><mt:AssetThumbnailURL></mt:EntryAssets>
  <mt:Else>
    <mt:EntryAssets lastn="1"><mt:AssetThumbnailURL width="320"></mt:EntryAssets>
  </mt:If>
</mt:Entries>

//修正後:「limit」モデファイアを使った場合
<mt:Entries>
  <mt:EntryAssets limit="1">
    <mt:AssetThumbnailURL width="320">
  </mt:EntryAssets>
</mt:Entries>

つらつらと書いていたものが、簡単に数行で済んでしまいました。

このエントリーをはてなブックマークに追加