コーディングコンテストが先ほど締め切りになりましたね。
ご参加した皆さま、本当にお疲れさまでした。
きっとすごい時間使ったんだろうなぁ・・・と思います。
こんなブログ書いてるくせに、ボク個人としてはCSS3の使い方とかはそんなに重視して無くて、HTMLがどんだけイケてるかが重要だと思ってます。
さて、そんな中なのにMT関係のエントリーです。
MTで画像のリサイズを色々頑張るためのやり方です。
想定している状況は、あんまリテラシーが高くない人が画像をアップしても、大変な事にならないようにアップした画像サイズに合わせて適切な画像サイズになったらいいよねって感じです。
リサイズ関係では、以下の記事やプラグインも参考になるかなと。
今回ボクがやろうとしているのは、カスタムフィールドで種類を「画像」にして追加したフィールドでのリサイズなので、本文内のリサイズは上記プラグインがイケてる気がします。
まずは、おさらいも兼ねて。
普通にカスタムフィールドでアップロードした画像をリサイズして表示するだけの場合は以下のような感じでやります。
<mt:Entries> <mt:EntryDataPhotoAsset> <img src="<mt:AssetThumbnailURL width="90">" alt="<mt:EntryTitle>"> </mt:EntryDataPhotoAsset> </mt:Entries>
これで、記事一覧にサムネイルを表示させたいとき何かに使っていけます。
この例は、カスタムフィールドの作成から、EntryDataPhoto っていうテンプレートタグを作った場合になり、画像を表示させる場合テンプレートタグの最後に、 Asset を追加する必要が有ります。
Asset を追加する事で、mt:Assets と同様の機能を持つ事が出来ます。
詳しくは、以下のMT5 ドキュメントが役に立つかと。
この記事、ちょっと見付けにくい場所にありませんか・・・
それはさておき、そろそろ本題に。
こんな感じでアップロードした画像を個別ページ（ブログ記事）で表示させたいけど、アップロードする画像のサイズは毎回まちまちで、時にはデジカメで撮った画像サイズそのままでアップロードされちゃったり、逆にケータイのカメラで撮った随分小さい画像をアップロードされちゃうと、サイズ固定でリサイズするとキレイに表示されない場合が有ります。
なので、アップロードされた画像に対して柔軟にリサイズするようちょっと頑張ってごにょごにょします。
まずは、アーカイブテンプレートのブログ記事テンプレートの先頭辺りに、以下のような感じで記述します。
（可読性重視の為改行していますが、実際には一行にしてください）
<mt:SetVarBlock name="imageWidth"> <mt:EntryDataPhotoAsset> <mt:AssetProperty property="image_width"> </mt:EntryDataPhotoAsset> </mt:SetVarBlock>
これで、アップロードした画像の横幅はナンボ？ってのがセットされました。
次に、画像を表示させたい部分に以下の様に記述します。
（可読性重視の為改行していますが、実際には基本的に一行にしてください）
<mt:If tag="EntryDataPhoto"> <p class="photo"> <mt:EntryDataPhotoAsset> <mt:If name="imageWidth" gt="240"> <a href=" <mt:If name="imageWidth" lt="930"> <mt:AssetURL> <mt:Else> <mt:AssetThumbnailURL width="930"> </mt:If> "> </mt:If> <img src=" <mt:If name="imageWidth" lt="240"> <mt:AssetURL> <mt:Else> <mt:AssetThumbnailURL width="240"> </mt:If> " alt=" <mt:If tag="AssetDescription"> 写真：<mt:AssetDescription> <mt:Else> 写真：<mt:AssetLabel> </mt:If> "> <mt:If name="imageWidth" gt="240"> </a> </mt:If> </mt:EntryDataPhotoAsset> </p> </mt:If>
これ、パッと見なんだか良く分かりませんね・・・
まずは、そもそも画像がアップロードされているかを確認して、アップされていなければ何も表示されないようにしています。
んで、次に先ほどセットした imageWidth からサイズを確認して、アップロードした画像が横240px以上の場合は、横240pxにリサイズされて画像が表示され、さらに大きい画像にリンクしています。
この時、アップロードした画像が横930px以下の場合はアップロードした画像サイズそのままで表示して、横が930pxより大きい場合横を930pxにリサイズした画像にリンクするようにしています。
アップロードした画像が横240px以下の場合は、リンクはされずに、アップロードした画像がそのままのサイズで表示されます。
altは、使い方によって何を表示させるかが異なってきますが、取り合えずこのサンプルでは、アイテムの「説明」に入力した内容が表示され、説明が何もない場合アイテムの「名前」を表示させています。
説明付きだと以下のような感じで。
<mt:If tag="EntryDataPhoto"><mt:Ignore>画像がアップされているか</mt:Ignore> <p class="photo"> <mt:EntryDataPhotoAsset><mt:Ignore>Assetを末尾に付けてMTAssetと同じに</mt:Ignore> <mt:If name="imageWidth" gt="240"><mt:Ignore>アップした画像が240pxより大きい場合画像にリンク</mt:Ignore> <a href=" <mt:If name="imageWidth" lt="930"><mt:Ignore>アップした画像が930px以下の場合そのまま表示</mt:Ignore> <mt:AssetURL><mt:Ignore>アップした画像のURL</mt:Ignore> <mt:Else><mt:Ignore>930px以上なら</mt:Ignore> <mt:AssetThumbnailURL width="930"><mt:Ignore>930pxにリサイズして表示</mt:Ignore> </mt:If> "> </mt:If> <img src=" <mt:If name="imageWidth" lt="240"><mt:Ignore>アップした画像のサイズが240px以下なら</mt:Ignore> <mt:AssetURL><mt:Ignore>そのままの画像を表示</mt:Ignore> <mt:Else><mt:Ignore>240px以上なら</mt:Ignore> <mt:AssetThumbnailURL width="240"><mt:Ignore>240pxにリサイズして表示</mt:Ignore> </mt:If> " alt=" <mt:If tag="AssetDescription"><mt:Ignore>アイテムの「説明」が有るかどうか</mt:Ignore> 写真：<mt:AssetDescription><mt:Ignore>アイテムの「説明」を表示</mt:Ignore> <mt:Else><mt:Ignore>説明に何も入力されていないなら</mt:Ignore> 写真：<mt:AssetLabel><mt:Ignore>アイテムの「名前」を表示</mt:Ignore> </mt:If> "> <mt:If name="imageWidth" gt="240"><mt:Ignore>アップした画像が240pxより大きい場合に表示</mt:Ignore> </a> </mt:If> </mt:EntryDataPhotoAsset> </p> </mt:If>
余計訳わかんない気もしないでも・・・
これに高さも加える場合、セットしたimageWidth同じようにimageHeight とかの名前で高さもセットして、
<mt:If name="imageWidth" gt="$imageHeight"> ・・・（縦長の場合こっちが実行される） <mt:Else> ・・・（横長ならこっちが実行される） </mt:If>
みたいな感じにすれば、縦長の画像対策もしつつ出来るかと。
ここまでやると分岐がだいぶ面倒になってきますが。
ざっとこんな感じです。
ボクはプログラマーじゃないので、もっと簡単で効率が良い方法が有るかもですが、これは一例と言う事で。
いっぱい登場している、mt:Ifタグに関してはドキュメントを参照してください。
以下は自分のコピペ用です。
<mt:SetVarBlock name="imageWidth"><mt:EntryDataPhotoAsset><mt:AssetProperty property="image_width"></mt:EntryDataPhotoAsset></mt:SetVarBlock> <mt:If tag="EntryDataPhotoAsset"><p class="photo"> <mt:EntryDataPhotoAsset><mt:If name="imageWidth" gt="240"><a href="<mt:If name="imageWidth" lt="930"><mt:AssetURL abs2rel="1"><mt:Else><mt:AssetThumbnailURL width="930" abs2rel="1"></mt:If>" rel="photoBox"></mt:If><img src="<mt:If name="imageWidth" lt="240"><mt:AssetURL abs2rel="1"><mt:Else><mt:AssetThumbnailURL width="240" abs2rel="1"></mt:If>" alt="<mt:If tag="AssetDescription">写真：<mt:AssetDescription><mt:Else>写真：<mt:AssetLabel></mt:If>" /><mt:If name="imageWidth" gt="240"></a></mt:If></mt:EntryDataPhotoAsset> </p></mt:If>
URLっぽいところのMTタグに指定しているモディファイアの「abs2rel="1"」は、スカイアークさんで配布されている以下のプラグイン用です。
このプラグインは、URLのドメイン名部分を削除するだけなんですけど、必ずといって良い程使ってるプラグインです。
ソース見た時にドメイン名が表示されているのが個人的に許せないってのも有りますけど、開発中はIP直打ちでやってて公開前にドメインがーとかって場合に全再構築掛ける手間が省けたりもするのですごく素敵です。