サムネイルに画像の任意の一部分だけを使いたい場合、サムネイルはMT任せでなく自分で作りたい場合、どうしたらいいのでしょう? 先日は時間がなかったのでこんなことやって澄ませてしまいましたが、ハック的な方法ではなく、MT4での正しい方法でのタグ組みもしてみたので覚え書きしておきます。
基本編はこちらです。
サムネイルリストからブログ記事(エントリー)にリンクを張る(2) MT4.1完成版
これに「任意のサムネイルも表示できる」ようにしてみたのが以下です。ふだんは自動で記事から画像を拾ってサムネイルを作らせますが、「記事によっては自分で作ったサムネイルの方を表示させたい」場合がある時に使います。以下の特徴があります。
- あらかじめ自作サムネイル専用のカスタムフィールドを作っておく。
- カスタムフィールドに画像がある場合はそちらを記事の代表サムネイルにする。
- カスタムフィールドに画像がない場合は記事中の画像から自動でサムネイルを作る。
- 記事に複数画像があり、その中の任意の画像をサムネイルにしたい場合にも使える(カスタムフィールドにサムネイルにしたい画像を指定しておく)。
- 記事1つにつきサムネイル1つが作られ、リストには常に指定したサムネイル数が保たれる。
1.カスタムフィールドを作る
ブログ記事で作ります。ベースネームにも名前入れといた方がいいみたいですね。
名前:自作サムネイル
説明:なし
種類:画像
必須?:チェックなし
ベースネーム:entryimgthum
テンプレートタグ:entryimgthum
自分で作ったオリジナルのサムネイルを使いたい記事にはこのフィールドからサムネイル用の画像をアップしておきます。
また、記事に複数画像があり、その中の任意の画像(2番目とか3番目とか、lastn="1"やsort_order="ascend"では拾えない画像)をサムネイルにしたい場合はその画像をカスタムフィールドで選んで指定しておきます。
2.コード
MT4.1デフォルトwidget用に書いてあります。赤字の部分に表示したい数を指定します(例:10個並べたい場合は10にする)。
サムネイルを全部正方形にするカスタマイズも入れてますが、コードが複雑になってきたので、その辺はより簡単な(場所をとらない)書き方にしてあります。widgetとして使う場合はcssの修正も要りますので、詳しくはこちらを見てバージョンに応じた修正をして下さい。
<MTIfNonZero tag="AssetCount">
<div class="widget-recent-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list">
<MTSetvar name="imgcount" value="0"><MTEntries lastn="0"><MTEntryAssets type="image" lastn="1"><MTSetVar name="imgcount" op="++"><MTIf name="imgcount" le="10">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<MTIfNonEmpty tag="entryImgthum">
<MTentryImgthumAsset>
<img src="<MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="70"$><MTElse><$MTAssetThumbnailURL width="70"$></MTElse></MTIf>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTentryImgthumAsset>
<MTElse>
<img src="<MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="70"$><MTElse><$MTAssetThumbnailURL width="70"$></MTElse></MTIf>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</MTElse></MTIfNonEmpty></a></li></MTIf>
</MTEntryAssets></MTEntries>
</ul>
</div>
</div>
</MTIfNonZero>
これでもうサムネイルも自由自在!と言いたんですが、しかし。
<MTxxxxAsset>がダイナミック・パブリッシングで動かないという罠がorz
これはカスタムフィールドで指定(アップ)した画像を頁で表示させるためのタグなんですが、
参考:カスタムフィールドでアップロード・選択した画像を出力ページで表示する
(ここでは青字の<MTentryImgthumAsset>がそうです)さすがにベータテスト時代にカスタムフィールド作って画像を表示させるテストまではしてなかったので、今試してみて気が付きましたよぉ(泣)。ということでこれをダイナミック頁で使いたい場合は2項で終わりじゃなくて、以下の第3項へもお進み下さい(追記:4.2では修正されました)。
3.ダイナミック・パブリッシングで応用編のコードを使う(4.1用)
インデックステンプレートで新規テンプレートを作り、上のコードをそっくりコピペして「thumlist.html」というファイル名で保存・再構築します。このファイルは静的ファイルにしてインデックステンプレートと一緒に再構築させるようにします。サムネイルリストを表示させたい場所に以下の一行を入れます。
<$MTInclude file="thumlist.html"$>
index.htmlを動的生成にしていて、widgetで使いたい場合は、ホームページwidgetのアイテムを以下のように差し替えればOK。
<mt:If name="main_index">
<$mt:include widget="最近のコメント"$>
<$mt:include widget="最近のブログ記事"$>
<$mt:Include file="thumlist.html"$>
<$mt:include widget="タグクラウド"$>
</mt:If>
MT4になってMTタグだけで色々なことが出来るようになって、ダイナミックTipsなんて使わなくていい環境に慣れ始めてたので、これは軽くへこみました(^^;。アーカイブは動的でもindex.htmlは静的でサムネイルリストを表示するのはindex.htmlだけ、なら問題ないんですけどね…。元気のある時にでもフィードバックしてきますか。。。
まあそこまでサムネイルにこだわらなければ通常は基本編で十分足りるとは思いますけど、使える時のための覚え書きってことで。ハックな方法もあることだし(笑)。
<2008.7.1>4.2では<MTxxxxAsset>が修正されたことを追記。
<2008.8.20>タイプミスを修正。
コメント
meu | 2008年8月18日 19:11
はじめまして。
4.1の頃から参考にさせていただいていました♪
今回こちらの応用編でサイドバーに画像を…。と思いやってみましたが、どうしても縦長画像が正方形になりません(涙
MT4.2 RC5を新規に作り、そこから4.2にアップグレードしています。
blog.cssの.itemに「height: 60px;」(60pxにしたいので70pxを全て60pxに置き換えています。)も追加していて、styles.cssにも.itemのスタイル指定をしています。
何日か前からやめては挑戦し…の繰り返しなのですが結果が変わらないのできっとどこか同じところを見落としているのかもしれません。
「サムネイルリストからブログ記事(エントリー)にリンクを張る(2) MT4.1完成版」の方は正方形になるのですが、こちらは「srt_order="ascend"」を追加しても一番後にアップした画像が表示されてしまいます。
お時間の有る時でかまいませんので怪しいところ等、もしわかりましたらお願いします。
TAEKO | 2008年8月19日 11:16
こちらこそ初めまして。
参考にしていただけて嬉しいです。^^
>正方形
縦長画像の横幅が60pxになっていないようですね。テンプレートを確認してみて下さい。
width="60"になるべきところがheight="60"になっていないでしょうか。
CSSはたぶん問題ないと思います。
>srt_order="ascend"
申し訳ありません!! 私のタイプミスです(汗)。正しくは
sort_order="ascend"
です。これで試してみて下さい。記事の方も後で修正しておきますね。
meu | 2008年8月19日 20:47
お返事ありがとうございます。
わかりましたっ!
お借りしているこちらのコードの
<MTentryImgthumAsset>
<img src="<MTIf name="imgw" gt="$imgh"><$MTAssetThumbnailURL height="70"$><MTElse><$MTAssetThumbnailURL width="70"$></MTElse></MTIf>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" /
</MTentryImgthumAsset>
の部分のheightをwidthに入れ替えてみたら全部正方形になりました♪
が、それで良かったでしょうか?(汗
それでおかしくなるようならsort_order="ascend"の方を使ってみます。
お忙しい中りがとうございました♪
TAEKO | 2008年8月20日 00:49
meuさんのテンプレートを見てないので推測ですが、横長サムネイルと縦長サムネイルの縦横が指定した通りになっているので、それでいいと思いますよ。
お役に立てたなら幸いです。^^