Feb 10, 2009

Loggix:imgタグのカスタマイズ

旧Ganesha's Lab.(by SQLite2版Loggix)より移転転記。(2009-12-13)

Loggix作者のkazさんにカスタマイズ方法をお伺いし、カスタマイズを実行してみた。

imgタグ挿入時に、同時にwidth・height値を自動取得・挿入させる

P_BLOGにはあるのに、なぜかLoggixにはない機能。ブラウザの実装状況からすると、width・heightともに指定しなくても実害はない。ところが、Another HTML-lint gatewayでXHTMLの採点をすると怒られてしまうのである。それに、大きめの画像を縮小して表示したいときなどは、予め値が指定してあった方が、値を修正するだけで済むので楽チンだったりする。

とゆーことで、kazさんに質問してみたところ、回答していただけた

ちなみに、カスタマイズしたファイルは、/theme/js/script.js。このファイルに、P_BLOGの/include/script.jsから該当機能を移植すればOKだそうだ。

具体的には、P_BLOGの/include/script.jsの302行目から始まる、

function Attach(num)

という関数の306行目~310行目までの5行を、Loggixの/theme/js/script.jsの255行目にある、

    var targetFile = document.getElementById('img' + num);

の後ろに追加する。

また、Loggixの/theme/js/script.jsの262~263行目と266~267行目にある、

    var attachCode  = '<img src="./data/resources/'
                    + file + '" alt="' + file + '" />';
    attachCode  = '<img src="./data/resources/'
                + file + '" alt="' + file + '" />';

という部分を、それぞれ次のように書き換える。

    var attachCode  = '<img src="./data/resources/'
                    + file + '" width="' + fileWidth + '" height="' + fileHeight 
                    + '" alt="' + file + '" />';
    attachCode  = '<img src="./data/resources/'
                + file + '" width="' + fileWidth + '" height="' + fileHeight 
                + '" alt="' + file + '" />';

以上、これでLoggixでもタグボタンでimgタグを挿入する際に、自動的に画像ファイルのwidth値とheight値を取得し、挿入するようになった。