FCKeditor + IMCE + Lightbox2で写真を簡単に公開する方法

Drupalは非常に柔軟であるため、私は気に入っています。 問題はいくつかの方法で解決できます。



私の仕事は、テキスト内の写真を簡単にダウンロードして公開できるようにすることでした。

私はインタラクティブなギャラリーを作成するつもりはないという事実に注目します。 ユーザーが便利なビジュアルエディターを使用して写真をアップロードし、同じように便利に公開できるようにするだけです。



FCKeditorをエディターとして、イメージダウンローダーおよびIMCEファイルブラウザーとして選択しました。



ここで問題自体について。



画像をサーバーにアップロードし、サムネイルを作成し、このサムネイルを投稿に挿入したいとします。 サムネイルをクリックすると、Lightbox2モジュールを使用して、サムネイルが元のサイズで画像を開くはずです。



手動で行うのは不便で長いです。

drupal.ruのページで解決策を見つけました。 解決策は、FCKeditorを編集することでした。 そのため、更新するたびに、これらすべてのファイルを再編集する必要があります。

それで、私は自分の自転車を書くことにしました。 しかし、私のサイトに適しています。



解決策





私はプラグインを書くことで最も猛烈な恋人です-私はpage.tpl.php



を通してすべてをpage.tpl.php



か、 index.php



私の関数を直接含めるのが好きです。



では、ページのhtmlコードを見て、現時点で何があるかを見てみましょう。

< img alt ="" height ="90" src ="/sites/default/files/img/2-27SP_vorn_small.jpg" width ="90" />



* This source code was highlighted with Source Code Highlighter .








このコードを次のように変換する必要があります。

< a href ="/sites/default/files/img/2-27SP_vorn.jpg" >< img src ="/sites/default/files/img/2-27SP_vorn_small.jpg" alt ="" ></ a >



* This source code was highlighted with Source Code Highlighter .








page.tpl.phpを開きましょう(これがテーマファイルです)。

そして、コードの最初の行を書きます。

if (strstr($content, 'src=' )){

}



* This source code was highlighted with Source Code Highlighter .








この行は、ページに画像要素があるかどうかを示します。

次に、画像を元の画像リンクに変更するスクリプトを作成します。

$content = preg_replace( '#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#' , "<a href=\"$1.$3\"><img src=\"$1$2.$3\" $4></a>" ,$content);



* This source code was highlighted with Source Code Highlighter .








+ビジュアルエディターのページではこれらの変更を行わないようにしましょう。 これを行うには、次の条件を作成します。

if (!strstr($_SERVER[ 'REQUEST_URI' ], 'edit' ))



* This source code was highlighted with Source Code Highlighter .








その結果、次のスクリプトが得られました。



if (!strstr($_SERVER[ 'REQUEST_URI' ], 'edit' ))

{

if (strstr($content, "src=" ))

{

$content = preg_replace( '#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#' , "<a href=\"$1.$3

\"><img src=\"$1$2.$3\" $4></a>"
,$content);

}

}




* This source code was highlighted with Source Code Highlighter .








これで、このコードをpage.tpl.php



ファイルの最初に安全に挿入できます。



私たちは何をしましたか?



これで、すべてのユーザーが画像をアップロードするだけで、接尾辞_smallを使用してサムネイルを作成し(ロード時にアイテムを選択すると作成されます)、このサムネイルをノードに追加します。



+ lightbox2のサポートを追加



管理パネルに移動してから、ライトボックスページに移動します。

[ Automatic image handling



]タブを見つけます。

アイテムCustom Class Images



移動します。

Lightbox、または、たとえば、Lightbox Gropedを選択し、画像クラスの名前を指定します。

デフォルトではlb2です。 これを残すことをお勧めします。



写真にこのクラスが含まれるようにスクリプトを変更します。

if (!strstr($_SERVER[ 'REQUEST_URI' ], 'edit' ))

{

if (strstr($content, "src=" ))

{

$content = preg_replace( '#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#' , "<a href=\"$1.$3

\"><img class=\"lb2\" src=\"$1$2.$3\" $4></a>"
,$content);

}

}




* This source code was highlighted with Source Code Highlighter .








すべて準備完了です!



完全なスクリプトをダウンロード [0.5 kb]



スクリプトの結果 (テストサイト)






All Articles