ムーバブルタイプ4で今までアップロードした画像をプレビューするページを作る
作り方
まず新規インデックステンプレートを作成し、コンテンツ部分に下のソースを追加します。<MTIfNonZero tag="AssetCount"> <MTAssets type="image"> <MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock> <MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock> <MTAssetsHeader> <div class="ImagesBox"> <ul></MTAssetsHeader> <li><a href="<$MTAssetURL$>"><MTIf name="imgw" gt="$imgh"><img src="<$MTAssetThumbnailURL height="50"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /><MTElse> <img src="<$MTAssetThumbnailURL width="50"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /> </MTElse> </MTIf></a></li> <MTAssetsFooter> </ul> </div> </MTAssetsFooter> </MTAssets> </MTIfNonZero>
<$MTAssetThumbnailURL height="50"$>と<$MTAssetThumbnailURL width="50"$>のwidth,heightがサムネイルのサイズを示しています。
これを追加するだけでサムネイルの表示は可能になります。
あとはCSSで表示を整えてください。
下にCSSの例を載せておきます。
.ImagesBox ul li { display: inline; float: left; margin: 0pt 4px 5px; overflow: hidden; text-align: center; vertical-align: middle; width: 50px; height: 50px; border:2px solid #eee; }
CSSのwidthとheightをサムネイルのサイズに合わせることで綺麗に表示することができます。
Lightboxとかライブラリ使うと綺麗に表示できて使い勝手が良いかもですね。
参考にさせていただきました。
サイドバーのサムネイルを全部正方形にする(MT4用)
カテゴリ
ムーバブルタイプ使えるメモ関連記事
トラックバック(0)
このブログ記事を参照しているブログ一覧: ムーバブルタイプ4で今までアップロードした画像をプレビューするページを作る
このブログ記事に対するトラックバックURL: http://newflow.heteml.jp/mt4/mt-tb.cgi/263









コメントする