【a-blog cms】メディアユニットの @thumbnail とは

今回はa-blog cmsのメディアユニットを利用してカスタムフィールドを作成する時に見かける @thumbnail について調べたことをまとめました。今回の内容はa-blog cmsのドキュメントにも書かれていない（僕調べ）内容です。そのため、a-blog cms を使っている製作者様必見でございます。

@thumbnail の仕様

@thumbnail とは、メディアを表示する時、メディアタイプがファイルの時に使用します。基本的にpdf等のファイルを表示するための記述ですが、画像を表示することもできます。

<!-- BEGIN_IF [{media@type}/eq/file] -->
            <a href="{media@path}">
              <img
                alt="{media@alt}"
                src="{media@thumbnail}"
                style="width: 64px; height: auto"
              />
            </a>

@thumbnail を src 属性の media の後に記述すると、以下のような効果があります。

それぞれ、解説します。

サムネイル表示するページを設定できる

@thumbnail を記述してファイルを表示させることで、ファイルが複数ページある場合に、サイト上に表示させるためのサムネイルを設定できます。

↓のように、普通に画像を表示させるとpdfの1枚めがサムネイル表示するページとしてサイト上に表示されています。

管理画面上のメディアの設定から編集ボタンをクリックし、右矢印（画像赤丸の部分）でサムネイル表示させたいページを先頭にすることで、現在赤枠の中に表示されているページを実際にサイト上で表示させることができます。

実際に設定し終わった後のWebサイトが↓になります。サムネイルで表示されているページがpdfファイルの2枚目になっている事がわかるかと思います。

もしならない場合は、メディアの編集時に上書き保存をするのを忘れている可能性があります。確認してみてください。

画像を縮小する

@thumbnail は基本的にファイルを表示させるために使用しますが、画像を表示させることもできます。 @thumbnail を使用して画像を表示させると、面白いことが起こります。なんと、一定以上の大きさの画像の場合、縮小されるのです。

実際に見ていきましょう。

コードとしては、下記のようになります。

<img
  alt="{media@alt}"
  src="{media@thumbnail}"
/>

管理画面で画像を設定すると、↑のようになります。この画像の元々のサイズは 964 x 1000 px になります。それが、検証ツールを開いて確認してみると…

↑画像のように 319 x 330 px に縮小されていることがわかると思います。そして、下線の部分をみていただけたらわかりますが、tiny- という接頭語がついています。画像が縮小されると、 tiny- という接頭語が画像名につくことになっています。

また、一定の大きさ以上は縮小されると書きましたが、僕調べでは一定の大きさとは 330 × 330 pxです。画像の横幅または縦幅が 330 px より大きい場合に、縦横比を保ったまま、横幅と縦幅のどちらかが 330 px 以内になるように縮小されます。

[resizeImg] などの校正オプションが効かない

@thumbnail を使用して画像やファイルを表示させたときのデメリットとして、校正オプションが使用できないことが挙げられます。

実際に↓のコードを使用して試してみます。

<img
   alt="{media@alt}"
   src="{media@thumbnail}[resizeImg(200, 200)]"
/>

なんと、画像が表示されなくなってしまいました。

このように、 @thumbnail を使用した場合、校正オプションを使用することができなくなります。これは画像を表示した場合に限らず、ファイルを表示させる場合でも同様です。

まとめ

今回は a-blog cms の @thumbnail について解説しました。今回の内容をまとめると…

以上になります。

僕も初めてみたときは、画像が急に小さくなって表示され、なにがこの現象を起こしているのかわからず、テンパりました。また、今回のブログでは、あえて画像を表示させるために @thumbnail を使用しましたが、基本的にはファイルを表示させるために使用されるものだということにお気をつけください。