サポート » プラグイン » Ktai Style 画像表示のカスタム方法

  • Ktai Styleを使用させていただいているのですが、画像の表示部分、

    画像[元画像(000KB)]

    の部分にて

    [元画像(000KB)]

    の部分を削除し、画像自体に元画像へのリンクが貼られるように変更したいのですが、どこをいじればいいのか分かりません。

    最悪、画像への「元画像リンク」は実現できなくても、[元画像(000KB)]の部分を取る方法だけでも結構です。

    分かる方いらっしゃいましたら是非教えてください。
    よろしくお願いします。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • モデレーター IKEDA Yuriko

    (@lilyfan)

    プラグイン作者です。

    画像 (img 要素) に対して張られたリンク (a 要素) は、これは shrinkage.php の convert_links() 関数で処理しています。この結果は、独自フィルターフック convert_links で変更できますので、以下のようなコードを my-hacks.php ないし携帯テーマの functions.php に書くと、img 要素を囲む a 要素はそのまま放置するようになります。

    function ks_keep_link_of_images($link_html, $orig, $href, $label) {
      if (preg_match('/<img [^>]*?src=/', $label)) {
        $link_html = NULL;
      }
      return $link_html;
    }
    add_filter(''convert_links/ktai_style.php', 'ks_keep_link_of_images', 10,4);

    なお、この改造をするならば、サムネールに対してリンクする元画像は高々数十KBであるようにしてください。100KB を越えるような元画像をリンクした場合、携帯電話で表示できなかったり、表示できても数百円を越えるパケット料金がかかることがあり、閲覧者に不親切なページとなってしまいます (パケット割引サービスに入っていない場合、1KB 1.68円かかります)。

    トピック投稿者 cwic

    (@cwic)

    lilyfanさんありがとうございます。

    なお、この改造をするならば、サムネールに対してリンクする元画像は高々数十KBであるようにしてください。100KB を越えるような元画像をリンクした場合、携帯電話で表示できなかったり、表示できても数百円を越えるパケット料金がかかることがあり、閲覧者に不親切なページとなってしまいます (パケット割引サービスに入っていない場合、1KB 1.68円かかります)。

    ここの部分を読ませていただいて、消すのはよろしくないな…と思いました。

    で、情報を残しつつの見せ方として

    写真(改行)
    [元画像(000KB)]

    に変更したいと思うのですが、br要素はどの部分に追加すればいいのでしょうか?

    モデレーター IKEDA Yuriko

    (@lilyfan)

    写真(改行)
    [元画像(000KB)]

    に変更したいと思うのですが、br要素はどの部分に追加すればいいのでしょうか?

    これは、写真に対して元画像のリンクを残しつつ、画像サイズも見せるんでしょうか。それとも、現在のKtai Style の見せ方で「元画像」の文字の前に改行を入れたいということでしょうか。

    前者はちょっと難しいのですが、後者であれば、以下のようなコードでいけます。

    function ks_line_break_to_images($replace, $orig, $src) {
      if (preg_match('/has_orig=/', $orig)) {
        $replace = preg_replace('/([[|])$/', '<br />$1', $replace);
      }
      return $replace;
    }
    add_filter('image_to_link/ktai_style.php', 'ks_line_break_to_images', 10,3);
    トピック投稿者 cwic

    (@cwic)

    lilyfanさんありがとうございます。

    現在のKtai Style の見せ方で「元画像」の文字の前に改行を入れたいということでしょうか。

    すいません。記載するのを忘れてました…がそれで全く問題なかったので、いただいたコードを追加して無事解決できました。

    度々の質問、申し訳ありませんでした&丁寧にご回答いただきまして本当にありがとうございます。
    いいサイトを作れそうです!

    トピック投稿者 cwic

    (@cwic)

    度々の書き込みすいません。

    いただいたコードを追加してテストをしていたところ、写真を2枚以上投稿に入れた際に若干問題が発生しまして、横写真×2枚の時は

    画像
    [元画像(000KB)]
    画像
    [元画像(000KB]

    と表示され問題ないのですが、横写真と縦写真の場合

    画像
    [元画像(000KB)]画像
    [元画像(000KB]

    と表示され、レイアウトが崩れているように見えてしまいます。
    「preg_replace」が置き換えをするコードで、[を[brと置き換えている…
    という所まではなんとか自力で調べたのですが、そこから先を理解できませんでした。
    [元画像(000KB]の最後尾部分にもbrを追加するにはどのような追加をすればよろしいのでしょうか?
    何度も申し訳ありません。

    モデレーター IKEDA Yuriko

    (@lilyfan)

    実は画像の縮小表示はけっこうトリッキーな処理になっています。サムネールと元画像がある場合、[元画像(xxxKB)] という見せ方のうち、開きブラケット ([) は、サムネール画像の処理時に出してしまっているのです。なので、末尾の[<br />[ と変換する正規表現となっています。

    全体の処理としては次のような2段階で行なっています。

    a 要素で囲まれたサムネール

    ↓ convert_links()

    サムネールの img 要素
    元画像を示す img 要素 (a 要素から変換)

    ↓ image_to_link()

    画像[
    元画像(xxxKB)]

    このため、「元画像」の表示のあとに改行を入れるには、元画像と分かっている img 要素をリンクに変換した結果をいじれば OK です。元画像の場合は、変換前の img 要素に filesize= という属性が入っているので、以下のコードでいけそうです (テストしてないので動かなかったらごめんなさい)。

    function ks_line_break_to_images($replace, $orig, $src) {
      if (preg_match('/has_orig=/', $orig)) {
        $replace = preg_replace('/([[|])$/', '<br />$1', $replace);
      } elseif (preg_match('/filesize=/', $orig)) {
        $replace = preg_replace('/(\])$/', '$1<br />', $replace);
      }
      return $replace;
    }
    add_filter('image_to_link/ktai_style.php', 'ks_line_break_to_images', 10,3);

    K-tai Style、K-Tai Entry共に活用させて頂いております!!

    上記の内容、とても参考になりました。
    ありがとうございます!

    さっそくなので申し訳ありませんが、質問させてください。

    現在「img 要素を囲む a 要素はそのまま放置」するコードを使わせて頂いて、
    サムネイル画像をクリックすると、「オリジナル画像」が表示される状態になっているのですが
    オリジナル画像ではなく、「中サイズ画像」にリンクを貼りたい場合にはどうしたら良いでしょうか?

    色々と検索したのですが、対処法が分からず困ってしまいました;;
    初心者なもので申し訳ありませんが、お手隙の時にでもご教授頂ければ幸いです。

    よろしくお願い致します!

    モデレーター IKEDA Yuriko

    (@lilyfan)

    サムネイル画像をクリックすると、「オリジナル画像」が表示される状態になっているのですが
    オリジナル画像ではなく、「中サイズ画像」にリンクを貼りたい場合にはどうしたら良いでしょうか?

    1年の前の質問が上に上がってきてビックリしました。便乗質問だったのですね……。

    えーと、便乗質問は新たにトピックを作って投稿してください。そして、質問内容で、このトピックにリンクを張ってもらえれば、関連項目と分かりますので。いちおう、このフォーラムは「1トピック1案件」という使い方をする方針のようなので、それでお願いします。

    今回は「解決ずみ」フラグが立ってませんでしたが、もし解決ずみフラグが立っているトピックで便乗質問しても答えない場合があります。

    lilyfanさん

    大変失礼致しました。
    新しくトピックを立てさせて頂こうと思います。
    申し訳ありませんでした。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「Ktai Style 画像表示のカスタム方法」には新たに返信することはできません。