Movable Type 備忘録

 

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

こんにちわ^^

今日は天気良いですね♪ まさに台風一過です。
朝から気持ちよかったので、ビックカメラ行って 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 ブロックタグを使用した場合の注意事項を、今知ってる限りで以下に記します。

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

    アイテムを登録してエントリに画像挿入すると、通常以下のようなタグが出力されます。

    <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 タグはアイテムとエントリを関連付けしてる大事なもののようですし、再構築すれば span タグに変換されますので、削除しない方がよさそうですよ。

  • Edit
  • Permalink
  • Comments(2)
  • Trackbacks(0)

 Trackback Pings(0)

No trackbacks found.

 Comments(2)

#1: Posted by sinnchan Author Profile Page [RES]

おばんでございます。

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

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

Posted on October 28, 2007
#2: Posted by bzbell Author Profile Page [RES]

>>1 sinnchan さん

こんばんわ^^

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

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

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

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

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

Posted on October 28, 2007

 Post a Comment

コメント用フィード