top

サムネイル考

MT4.1が出るのを待ち焦がれてすぐにバージョンアップし、こんな記事を書いたのも全ては「メインサイトのブログに全自動でサムネイルを表示させたかった」からでした。それで順調にいってたんですが、昨夜1つ困ったことが。

ネタばれに関することは「続きを読む」の中に隠しておくのが常ですが、自動生成されたサムネイルがネタばれになってしまうという困った事態が勃発。

MTが自動生成するサムネイルって、任意の一部を切り取ったものではなくて、単純に全体を縮小して不要な部分だけcssでカットするという形式なんですよね。なので、サムネイルでは画像の任意の一部のみを見せて、全体は隠しておきたい場合(特に今回のようにネタばれになり、続きを読むをクリックするまでは目に触れさせたくない場合)には困るんです。そういう場合の対処はというと、やっぱり自分で任意の位置で切り抜いたオリジナルサムネイルを用意するしかないでしょうね。。。

で、問題はどうやって別に用意した自作サムネイルを表示させるかなんですが。カスタムフィールドで自作サムネイル専用のアップ場所を設けて、条件分枝で自作サムネイルがある場合はそれを表示し無い場合は全体縮小で自動でサムネイルを作らせる…などということも一瞬頭をかすめたのですが(その方法は後からこちらにエントリしました)、今からそんなことをしてる時間はない。で、ごく単純な処置をしました。

■別に用意した自作サムネイルを表示させる
一言で言えば、「MTくんを騙してお仕事させちゃう戦法」です。まずは普通に記事を書いて画像をアップ。続けて自作サムネイルもMTの管理画面からアップします。そのまま「ブログ記事に表示」で記事にタグを挿入させます。挿入されたタグから自作サムネイルのID(赤字の部分)を調べ、元の画像のIDと入れ替えます。その後、自作サムネイルのタグは削除しておきます。

<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="hogehoge" src="http://www.example.com/photo/hogehoge.jpg" width="400" height="300" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></form>

要は、MTは mt:asset-id="12" の番号で記事に使われている画像を判断するので、<form>で囲まれた中身が違っていてもかまわないわけです。imgの中身は本来の画像で、IDに自作サムネイルの番号を指定しておけば、MTはサムネイルリストには自作サムネイルの方を表示してくれるというわけです。やや(かなり?)反則っぽい気はしますが、たまにならこれでお茶を濁すこともできるということで(^^;。

■画像のない記事に任意のサムネイルを表示させる
こういう需要があるかどうかは別にして…。上の応用で、実は画像のない記事にも好きな画像でサムネイルを表示させることができます。新しい画像をアップさせるかまたはアップ済みの画像一覧から好きな画像を選んで記事にタグを挿入します。で、<form>の中身はばっさり削除します。すると記事には画像は表示されず、サムネイルリストや記事一覧には選んだ画像のサムネイルを表示させることができます。

<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image" style="display: inline;"> </form>
<form mt:asset-id="12" class="mt-enclosure mt-enclosure-image" style="display: inline;">
</form>

ここでポイントなのは、<form>と</form>の間には半角スペースあるいは改行など、必ず何か挟んでおくことです。<form></form>みたいに隙間なくくっついていると画像ありと判断できないようなので(実験で確かめました←わざわざ実験するか…)。

どういう時に使うんだと突っ込まれたら困るんですが、記事リストをサムネイルで見せる場合、画像のない記事には一律No Images画像を出すんじゃなくて好きな画像を気分で選んで載せるとか・・・そんなこと読者が混乱するだけだから、やらない方がいい気がしますが、<form>にはこんな癖もあることを発見しました!なレポートってことで(笑)。

<注>この記事はMTデフォテンプレに付いてる画像のみを表示させるサムネイルリストではなくて、<MTEntryAssets>を使ってサムネイルと記事を連動させている場合を前提としてます。

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。