linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

MTで本文(entrybody)から画像のURLをとりだしてみる

090706.gif

みなさん、こんにちは、まーしーです
なんかMTに関係しそうなのが続いています。こちらとかに刺激を受けたわけじゃないんですがね。仕事の延長ってのもありますね。

AssetTHumbnailURLをつかって画像のURLを取り出す

MTの管理画面から画像をアップロードして本文に画像などを挿入している場合、その画像をアーカイブなどでサムネイルとして表示するのはそこまで難しくないですよね。

<mt:Entries lastn="20">
<mt:EntriesHeader>
<ul>
</mt:EntriesHeader>
<li><a href="<mt:EntryPermalink />"><mt:EntryAssets lastn="1"><img src="<mt:AssetThumbnailURL width="100" square="1" />" /></mt:EntryAssets></li>
<mt:EntriesFooter>
</ul>
</mt:EntriesFooter>
</mt:Entries>

こういう感じにしておけば、とりあえず幅100pxの画像一覧を取得できます。厳密には画像がある場合とない場合の条件分岐も必要なので、そのあたりは適宜入れてもらうとして。

MTの管理画面からアップしたアイテムを使用しているのでmt:asset系のタグが使えるわけですが、画像をMTで管理していない場合はなかなかめんどいなぁ、と思うことがありました。
担当がFTPでアップした方がいい、とかいう場合もあるかもしれません。(まぁこのあたりはこちらとかで色々解決できちゃいそうです)

正規表現で画像のURLを取り出す

ということでmt:entrybodyを使うときに、imgタグから画像のURLを引っ張り出して100pxで表示させるという感じで近いところまで持っていこうと。
実際のところは画像を無理矢理小さくして表示させているのだけなので、生のサイズをそのまま一度引っ張る分重くなってしまうとかもあります。
そもそもこういうちょっと無理な書き方をすることで再構築がどのくらいかわるか?とかも意識しないと行けないところかもしれません。

なんだかんだで正規表現について調べながらたどり着いたサンプルはこんな感じなわけです。

<img src="<mt:EntryBody convert_bleaks="1" strip_linefeeds="1" encode_html="1" regex_replace="/(.*)?src="(.*)?(\.jpg|\.gif|\.png|\.jpeg|\.JPG|\.PNG|\.GIF).*/","$2$3" />" width="100" />

正規表現をちゃんとやろう、と決意したのは言うまでもないです。
なにかあったら読みなおすことにしているこのエントリーにも正規表現についてはかかれてあるのですが。
行動遅いですねぇ。。反省。。

最初のサンプルみたいに正方形でということになればimgをdivとかでくくってあふれた部分はoverflow:hiddenとかそういう方法で解決できますね。

画像自体のサムネイルをサーバー側で作成しておくとか解決方法は他にもあるような気がするのですが、手持ちのコマでできることがこのくらいだったので現時点の解がこのくらいになってしまいました。
まだまだ勉強不足ですね。

このあたりの若干無理矢理な解決方法をしながら、MTでサイトを作る場合の設計などの重要性を再認識しましたし、運用段階でのリニューアルにあたって気をつけないといけないところが結構あるなぁ、と改めて思ったりしました。