Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

サイドバーにサムネイルを表示する

Oct282007
Author: bzbell
Categories: Customize
Tags: 4.0, Customize, MovableType
Social Bookmark

Prev Page: Ajaxでアクセス・ランキングを表示する３
Next Page: 自動保存間隔を変更する

こんにちわ^^

今日は天気良いですね♪ まさに台風一過です。
朝から気持ちよかったので、ビックカメラ行って USB ハードディスク買ってきましたの。
で、こちらのさくらインターネットでSubversionを使う２でご紹介したバージョン管理ツール使って、公開してるテンプレートやスクリプトのバージョン管理をサーバ上でなく、ローカルのハードディスクで管理することにしました。

お引越しした CORESER は調子悪くって、たまに接続できないことがあります。
たまにこのサイトも表示できないことがあります (´Д｀；) 少し時間おくと接続できるので『まぁ、いっか』で放置してますが、ソースコードは別です。
必要なときに接続できないと困るし、かといってパソコンのハードディスクだと心配なので、外付けのハードディスクで管理することにしました (●´∀｀●)

上記バージョン管理ツールは扱いも楽なので、テンプレートのバージョン管理などに使ってみてください♪
機会があったら覚えたことをご紹介しますが、分からないことありましたらご連絡いただければサポートしますよ (￣∇￣)b

さて、今回はアイテムリストに関連するカスタマイズのご紹介です。

アイテムリストを使って、公開してるテンプレートのサムネイルをサイドバーに表示させてみました。
Movable Type 4 には、アイテムリストを表示するウィジェットが用意されてます。
デフォルトでは、登録されているアイテムリスト(イメージ)のサムネイルをただ表示するだけとなっています。サムネイルをクリックすると元イメージが表示されるだけです (;￣∇￣A

フォトギャラリーのように撮った写真やイラストを紹介するような場合には、ぜんぜん OK だと思いますが、わたしのサイトのようにカスタマイズやテンプレート記事に促すような場合には不向きですね (￣∇￣)b

ここはやっぱりイメージを貼り付けたエントリへのリンクを貼りたいとこです。

ということで、各イメージのリンク先をエントリの URL に変更するカスタマイズをやってみました。

Movable Type 4 で用意されている「フォト」ウィジェットは以下になります。

<MTIf name="main_index">
<MTIfNonZero tag="AssetCount">
<MTAssets type="image" lastn="10">
<MTAssetsHeader>
<div class="widget-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list"></MTAssetsHeader>
<li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>
<MTAssetsFooter></ul>
</div>
</div>
</MTAssetsFooter>
</MTAssets>
</MTIfNonZero>
</MTIf>

エントリに関係なく、登録されたアイテムを一覧表示します。

一覧表示されたアイテムを Lightbox で表示する

たとえば、各イメージを Lightbox で表示させたい場合には、上記ウィジェットを以下のように変更します。

<li class="item"><a class="asset-image" href="<$MTAssetURL$>" rel="lightbox[photo]"><img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>

青い字の部分を追加するだけです。

一覧表示されたアイテムをエントリに関連付けする

各イメージのリンク先を、投稿したエントリの URL にするには上記ウィジェットは使用できません。
以下のようなウィジェット(or テンプレートモジュール)を作成します。

<MTIf name="main_index">
<MTIfNonZero tag="AssetCount">
<div class="widget-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list">
<MTEntries category="カテゴリ名称" lastn="0">
<MTEntryAssets type="image" tags="Photo">
<li class="item"><a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>" >
<img class="asset-img-thumb" src="<$MTAssetThumbnailURL height="70"$>" title="<$MTEntryTitle$>" alt="<$MTEntryTitle$>" /></a></li>
</MTEntryAssets>
</MTEntries>
</ul>
</div>
</div>
</MTIfNonZero>
</MTIf>

上記は任意のカテゴリに属するエントリの中から、任意のタグに関連するすべてのアイテムを一覧表示させています。
具体的には、青い字の部分でカテゴリ名称を指定します。そして、赤い字の部分でアイテム登録時に付けたタグ名称を指定します。

上記では『カテゴリ名称』で検索するエントリを絞って、さらに『タグ名称』でアイテムを絞るというフィルタリングを行ってますが、用途、表示させたいアイテムによってどのようにフィルターするかがポイントです。

たとえば、『MTEntries ブロックタグには、過去 180 日以内のエントリを検索対象とする』とか、『任意のエントリ・タグが付けられたエントリのみ検索対象とする』などのようなフィルターを行うことができます。

MTEntryAssets ブロックタグでも、同様のフィルターをかけることができます。

以下にアイテムリストのスタイルを記します。

div.widget-assets div.widget-content ul.widget-list {
overflow: auto;
margin-right: 0;
}
li.item {
display: table-cell;
float: left;
margin: 0pt 5px 8px;
overflow: hidden;
width: 70px;
}

上記はサイドバーにアイテムリストを利用したサムネイルを表示するで紹介されてたものです。

以下はわたしのサイトで公開してるテンプレート用のスタイルになります。
参考にしてください。

div.widget-assets ul.widget-list {
margin-right: 0;
overflow: auto;
}
div.widget-assets ul.widget-list li.item {
margin: 0 .3em .8em;
width: 76px;
float: left;
}
* html div.widget-assets ul.widget-list li.item {/*for IE*/
margin: 0 .1em .8em 0;
}
div.widget-assets ul.widget-list li.item a {
padding: .4em;
width: 70px;
height: 70px;
display: block;
text-align: center;
vertical-align: middle;
border: 1px solid #eae5e3;
}
div.widget-assets ul.widget-list li.item a:hover {
background-color: #f0f0f0;
border: 1px solid #414141;
}
div.widget-assets ul.widget-list li.item a img {
width: 70px;
height: 70px;
}

青い字の部分は各アイテム間の余白になります。
赤い字の部分ではイメージサイズより少し大きめのサイズを指定することで、イメージとボーダーの隙間を作ってます。
緑の字の部分には表示したいイメージサイズを指定します。

お好みで変更してください♪

一覧表示されない原因

上記で紹介した MTEntryAssets ブロックタグを使用した場合の注意事項を、今知ってる限りで以下に記します。

登録済みのアイテムを削除した場合

アイテムを登録してエントリに画像挿入すると、通常以下のようなタグが出力されます。
1. <form mt:asset-id="5" class="mt-enclosure mt-enclosure-image"><img alt="ajax-loader.gif" src="http://bizcaz.com/images/ajax-loader.gif" width="100" height="100" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></form>
青い字の部分がアイテム管理されている ID になりますが、エントリを投稿した後でアイテムを削除してしまうと、管理されていた ID は欠番となります。
削除した後、同じイメージを追加したとしても当時の ID は欠番となり、新しい ID が割り当てられます。

その場合、投稿済みのエントリには古い ID が記事内に埋め込まれた状態となりますので、その際には、再度画像挿入して新しい form タグで更新する必要があります。そうしないと MTEntryAssets ブロックタグは正しくリスト表示してくれませんでした。
form タグを削除した場合

上記で記した、画像挿入で出力される form タグを削除してしまうと、正しく MTEntryAssets ブロックタグが動作しない(アイテム一覧が表示されない)ようです。
- 画像を挿入したときにformタグがつく理由
form タグはアイテムとエントリを関連付けしてる大事なもののようですし、再構築すれば span タグに変換されますので、削除しない方がよさそうですよ。

Edit
Permalink
Comments(8)
Trackbacks(0)

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(8)

#1: Posted by sinnchan @ October 28, 2007 [REPLY]

おばんでございます。

＞CORESERVER
接続不調ですか・・・。私が契約しているCORESERVERは恐らくbzbellさんの契約しているのとは違う内部鯖だと思いますが、今のところ特に不都合無く使えてますよ。
私もCORESERVERへの移転を一時考えましたけど、移転作業が面倒なのと（爆）、今の鯖（X-Server）が幸いにも調子よく使えているので、そのままにしてあります。
メインBlogのテンプレ変更だけでもあんなにbzbellさんのお手を煩わせる位でしたから、鯖移転なんて想像するに恐ろしいので、当分現状維持で行きます（苦笑）。

あ、メールフォームの件は作業に手が着かずそのままになってます。
たぶん、相当はまりこまないとダメそうなので・・・（爆）。
（本当はタグクラウド一覧も作りたいんですけど・・・）

#2: Posted by bzbell @ October 28, 2007 [REPLY]

>>1 sinnchan さん

こんばんわ^^

> 私が契約しているCORESERVERは恐らくbzbellさんの契約しているのとは違う内部鯖だと思いますが、今のところ特に不都合無く使えてますよ。

そうですかぁ（つω-`｡）
いっつもじゃないのであまり気にしてないのですが、たまにそぅいぅことがあるんです。

確かにサーバお引越しは大変ですよね (;￣∇￣A
わたしは 2 度目だったので思いのほかスムーズにいけました。
前回のお引越しでは DNS 変更でドメインが広がるまでに数日かかったのですが、今回は数時間!? ですんだのにはビックリでしたけど･･･ホントかな!?

メルフォもタグクラウドも気が向いた時にやるのが 1 番です (￣∇￣)b

わたしは今 SSL での MT ログインに TRY 中ですの♪

#3: Posted by 海の河童 @ April 5, 2009 [REPLY]

お久しぶりです(＠｀▽´＠)
毎度毎度ですが、質問させてください。

表示する画像の数を設定するには
どのようにしたらいいでしょうか？
で試してみたんですが
できませんでした。

よろしくおねがいします。

http://successstory.jp/kurashitas_page/

#4: Posted by bzbellから海の河童への返信 @ April 5, 2009 [REPLY]

>>3 海の河童さん

こんばんわ^^

たとえば、フォト一覧のコードが以下のようなものだったとします。

<MTEntries lastn="5">
<MTEntriesHeader><ul></MTEntriesHeader>
<MTEntryAssets type="image" lastn="1">
　<li><a href="<$MTEntryPermalink$>" <img src="<$MTAssetThumbnailURL$>" /></a></li>
</MTEntryAssets>
<MTEntriesFooter></ul></MTEntriesFooter>
</MTEntries>

上記 MTEntries ブロックタグの lastn を制御することで、直近のエントリ 5 件分を対象とします。
そして、MTEntryAssets ブロックタグの lastn を制御することで、エントリ内に含まれる画像 1 検分を表示します。

と、いうかんじで表示したらいいです。
ちなみに、MTEntries ブロックタグの直近エントリとは、画像を含むエントリではなく、無条件に直近 5 件となりますのでお間違えのないように

#5: Posted by 海の河童 @ April 5, 2009 [REPLY]

タグの意味を少し理解することができました。
ありがとうございます。

画像を含むエントリを条件に含めることはできないのは残念ですが、
カテゴリ＆タグで絞れそうです。

ありがとうございますヽ( ´ ▽ ` )ﾉ

#6: Posted by 海の河童 @ April 6, 2009 [REPLY]

またまたすみません。

MT4.25にアップデートしたせいなのかわかりませんが
<MTEntryAssets type="image" tags="Photo">の部分が機能しなくなってしまいました。
MT4.23の時は機能していたような・・・
はっきりわかりませんが

よろしくお願します。

#7: Posted by bzbellから海の河童への返信 @ April 6, 2009 [REPLY]

>>6 海の河童さん

おはよございます。
一点確認しますが、MTEntries で指定した件数内に Photo というタグが付いた画像はありますか!?
ない場合には、何も表示されないはずです。
でも、あるにもかかわらず表示されないのであれば MT4.25 の不具合かもしれませんね。
SixApart に不具合報告したらいいと思います