カスタムフィールドの画像リンクを画像に変換する

MT4.1からカスタムフィールドで画像がアップロードできるようになったのですが、こいつがなかなか曲者。

標準のカスタムフィールドタグで出力すると

<span class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a href="http://localhost/mt4.1/sample.jpg">表示</a>
</span>

というhtmlが表示されるだけ。

画像へのリンクじゃなくて画像を表示したいのに。。。

一応、対応策としては画像をアップロードする際に、任意のキーワードでタグ付けしてMTAssetを利用して取り出す形になります。

<MTEntryAssets>
<MTAssetIfTagged tag="任意のタグ">
  <img src="<$MTAssetURL$>" alt="<MTEntryTitle>" />
</MTAssetIfTagged>
</MTEntryAssets>

ただのアイテムとして取得して表示するわけです。

なんとなく、カスタムフィールドの便利さが半減してしますね。

jsで対応

タグ付けしなくても表示できるプラグイン作ったよ。

と言いたい所なのですがMovable Type のプラグインなんて作ったことないのでJavaScriptで書いてみました。

var images = document.getElementsByTagName("a");
for(var i=0; i<images.length ;i++){
    if(images[i].textContent=="表示"){
        var img =document.createElement("img");
        img.src=images[i].href;
        images[i].parentNode.replaceChild(img,images[i])
    }
}

標準のカスタムフィールドタグが出力する標準のhtmlのa要素をimg要素に変換するJavaScriptです。

対応してくれるプラグインが出るまでの間に合わせにはよいかもしれませんので。

追記

小粋空間さんでプラグインがリリースされてました。

カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02

追記の追記

MTタグのみで実装する方法を追加しました。

MTカスタムフィールド画像を見えるようにする（推奨）

関連エントリー

MTで特定のカテゴリーのみテンプレートに反映させる方法
Movable TypeでSEO対策-metaタグ編-
Movable Type で画像挿入をきれいにする「StylelessImage」
MovableTypeにお問い合わせフォームを設置
MovableTypeにタグクラウド(SEO対策済み)を設置する

スポンサードリンク

«MTで特定のカテゴリーのみテンプレートに反映させる方法 | メイン | SEO最新事情 2008－SMO、LPO、そして検索エンジンの未来も交えて－»