【Blogger】投稿一覧のサムネイル画像をラベルによって表示させてみた

フッターに配置しているページガジェットを編集したいのですが、今(2020.11.12)現在、保存する事が出来ません。Google側も認識しているようなので修復待ちです。

さて、纏まらない話は置いておき、ちょっとした機能の備忘録です。

投稿一覧サムネイルをラベルから任意の画像を表示させる

Bloggerのテーマの中には、投稿(記事)一覧に表示されるサムネイルが投稿に貼付けた最初の画像を表示させている仕様の物が多いかと思います。

しかし、画像によっては非常にカッコ悪い画像が表示される事もあります。

こんな感じに。

ブログの一覧に表示されるにはあまり相応しく見えない画像が表示されてます。
ブログの内容にもよりますが、ラベルによって共通画像を表示してみようかと。

一覧表示の投稿サムネイル

使用しているテーマにより記述されている箇所や方法は違うと思いますが、大体同じ。
一覧表示時に投稿の最初の画像を表示させているのであれば、その前にラベルを参照する条件を追加するだけです。

変更する場合、テーマ(テンプレート)のバックアップを取ってから変更しましょう。

HTMLの変更はBloggerの管理画面より テーマ>>HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。

投稿一覧に表示されるサムネイル画像をclass='article-thumbnailとした場合の1例として、以下の通り記述します。

<div class='article-thumbnail'>      
<!--  第1分岐条件  対象ラベルの画像-->
  <b:if cond='data:post.labels any (l => l.name in{ "ラベル1","ラベル2","ラベル3"})'>    
   <img height='200' loading='lazy' src='表示したい画像のURL' width='200'/>

<!--  第2分岐条件 投稿画像の場合 -->
    <b:elseif cond='data:post.firstImageUrl'/>
     <img expr:src='resizeImage(data:post.firstImageUrl, 200, &quot;1:1&quot;)' loading='lazy'/>

<!--  第3分岐条件 投稿画像なしの場合 -->
    <b:else/>
     <img height='200' loading='lazy' src='表示したい画像のURL' width='200'/>
  </b:if>          
 </div>

HTMLをちょっと説明

実行している事は分岐自体は簡単な事をしています。

第1分岐条件

<b:if>を使い、任意の画像をラベルによって表示させる分岐判断。

in{}内に記述するラベルが存在する投稿の場合、指定する画像を表示し、存在しない場合は第2分岐条件へ。


第2分岐条件

<b:elseif>を使います。
画像が貼られた投稿の場合に最初の画像を表示する。画像を貼っていない投稿の場合は第3分岐条件へ。

第3分岐条件

どれにも該当無しの場合、<b:else>を使い指定した任意の画像を表示。(No Imageなど)
まぁこの方法だと単純分岐の為、複数ラベル群による複数の画像を表示しません。
表示したい場合は第1分岐条件を画像の数行えば良いと思いますが、考えていないので分かりません。


ラムダ式(lambda expression)

今回第1分岐条件にラムダ式なる方法を使っています。

構文は次の通り

 [set of items] [lambda operator] ([variable name] => [expression])

今回の場合は、

<b:if cond='data:post.labels any (l => l.name in{ ”ラベル1”,”ラベル2”})'>    

細かく見ましょ…

[set of items] は参照相手。今回は、Bloggerデータタグのdata:post.labelsを参照します。

[lambda operator] は演算子で今回はanyを使用。

他にもall/count/map/firstが用意されており、使用する値によって必要な結果を得られます。
詳細はBloggerラムダ式に記述されています。

[variable name] は 、data:post.labelsを変数としてl としていますが、何でも良い。labelsでも良い。

=> [expression]は訳そのまま[式]にあたる部分。

今回は変数 l に対する計算になります。data:post.labelsに含まれる.nameからin{}で対象としたラベルテキストのいずれか(any)が合致すればtrueを返して、続くURLの画像を表示させています。

in{}は代わりに他の比較演算子「==」、「!=」や「<」「>」、等なども使えます。

Bloggerのデータタグについて、詳しくはデータタグ一覧を参照。


ラムダ式?ラムダ演算?

どっちでもいいか…。SQLQueryやJavaを書いている方ならご存知かと思います。詳しい説明は難しいのでしません。(出来ません。)

Bloggerのテーマにはあまり使わない方法…というか、Bloggerで使える様になっていた事も知りませんでした。本来<loop>を駆使する所も簡単に記述出来たので便利。

もう少し何かに使えそう。

以上



コメント