【WordPress】プラグイン”Kntkr Gallery3 Embed Changer”でGallery3の画像を簡単に貼り付ける。【レスポンシブ機能付き】

シェアする

FlickrやInstagram、Tumblrなど様々な画像投稿サイトからIMGタグを介してWordPressの本文中にその画像を貼り付ける方法は色々あり、その方法を紹介した記事もネット上で検索すれば沢山見掛けます。

ですが、WordPressと同様に自前で設置するフォトギャラリー系CMSGallery3』にアップロードした画像を貼り付ける方法については、プラグインの品揃えが少ないばかりか、日本語で説明された記事すら見当たりませんでした。

そこで、Gallery3からWordPressへの画像の貼り付けを簡単にするために独自に開発したプラグイン”Kntkr Gallery3 Embed Changer“(GitHubにて公開中)についてご紹介します。

Kntkr Gallery3 Embed Changerは、本文中にあるGallery3のURL(要設定)を抽出して、レスポンシブな画像タグ(IMGタグ)に変換する機能を有します。

スポンサーリンク

デモンストレーション

Kntkr-Gallery3-Embed-Changer resized image

Source from GIPHY

この画像はPCでは640×480(※1)、スマホでは300×225(※2)のサイズで表示されます。

リンク先で開く画像のサイズはどちらも640×480です。

また、スマホからアクセスしてこの画像をタップした場合、新たにタブを開いた上で画像ファイルを開きます。

一方で、PCからアクセスしてこの画像をクリックした場合、Lightbox表示になります。これは実験段階であり、GitHubで公開中のコードでは同一タブのままで画像ファイルを開きます。

※1…Gallery3で設定したリサイズ画像のサイズ

※2…Gallery3で設定したサムネイル画像のサイズ

使用条件

ご利用前に以下の5つの条件に対して理解、同意なさった上でご利用ください。なお、ご利用を開始した時点で同意したものと見なされます。

1.動作環境が下記の動作確認済みの環境またはこれと互換性を有する環境である事。

【動作確認済み】

PHP…5.3

WordPress…4.3および4.3.1

Gallery3…3.0.9

2.Gallery3にアップロードした画像が以下の形式であり、尚且つ画像形式と対応拡張子が一致している事、並びに画像のファイル名が全て半角英数字(2017/10/11追記)である事。

【対応画像形式及び拡張子】

GIF(.gif)

JPEG(.jpegまたは.jpg)

PNG(.png)

BMP(.bmp)

3.Jetpackの”Photon”等のCDNサービス、または”lazy load plugin for jquery”などの画像遅延読み込み機能のどちらかが無効である事。

4.プラグイン有効後、オプションの設定を完了している事。

5.本プラグインの有効後に生じ得る如何なる不利益に対する一切の賠償請求を放棄する事。(免責事項)

導入手順

以下の4つの手順で完了となります。

1.GitHubのリポジトリにアクセスして、ZIPファイルをダウンロードします。

Kntkr-Gallery3-Embed-Changer

2.インストール先のWordPressへアップロードして有効化します。

3.設定のサブメニューに表示される”Kntkr Gallery3 Embed Changer“をクリックしてアクセスします。

4.Gallery3設置先のURL(※3)をフォームに入力して保存します。

【入力例】

example.com/gallery3

※3…トップページのURLを入力してください。入力例のように”http://”及び”index.php”等は不要です。ただし、末尾にスラッシュ(/)を付けないでください。また、HTTPSには未対応です。尚且つ、入力できるURLは1つだけです。

使い方

1.Gallery3にアクセスし、任意の貼り付けたい画像が表示されたページのURLを開きます。

http://example.com/gallery3/test/sample-image

2.下記のどちらかの方法で貼り付けます。

その1:貼り付けたい画像のページのURL(上に同じ)をアドレスバーからコピーし、ビジュアルモードで編集中の際に任意の箇所でペーストします。

http://example.com/gallery3/test/sample-image

その2:Gallery3側のモジュール”Embedlinks“(日本語名:埋め込みリンク)を有効にすると、コードの取得が可能になります。

デフォルトの状態でEmbedlinksを有効にした場合、以下の順に辿るとコードを取得出来ます。

メニューからの場合:”Link to this page”->”Link To The Resized Image”->”サムネイル”

サイドバーからの場合:”このページにリンクする”->”HTMLコードを表示”->”HTLM Code”->”Link To The Resized Image”->”サムネイル”

【表示例】

<a href="http://example.com/gallery3/var/resizes/test/sample-image.jpg?m=0123456789"><img src="http://example.com/gallery3/var/thumbs/test/sample-image.jpg?m=0123456789"></a>

これを取得した場合、テキストモード(HTMLコードを直書きできる表示状態)で編集中の際に任意の場所に貼り付けます。

仕様

変換例

設定(Gallery3設置先)

example.com/gallery3

変換前(編集画面表示時)

http://example.com/gallery3/test/sample-image

変換後(公開ページ上:PC表示の場合)

<a href="http://example.com/gallery3/var/resizes/test/sample-image.jpg"><img src="http://example.com/gallery3/var/resizes/test/sample-image.jpg"></a>

変換後(公開ページ上:スマホ表示の場合)

<a href="http://example.com/gallery3/var/resizes/test/sample-image.jpg" target="_blank"><img src="http://example.com/gallery3/var/thumbs/test/sample-image.jpg"></a>

解説

1.URLの抽出

Gallery3設置先に入力・保存したURLを基に画像ページのURL(※4)を抽出します。

※4…末尾に拡張子がなく、URL中に”/var/albums/”や”/var/resizes/”或いは”/var/thumbs/”の記述がない点に注意!

2.一次変換

抽出したURLを一旦”プロトコル://Gallery3設置先/var/resizes/URI”に変換します。

3.二次変換

一次変換したURLをexif_imagetype()関数に掛け、個々の拡張子を特定して末尾に付加します。

4.モバイル判別(最終処理)

PC表示時では、二次変換したURLをそのままリンク先(A要素のhref属性)と画像の(IMG要素のsrc属性)として使用。

スマホ表示時では、A要素にtarget=”_blank”を追加。また、src属性に関しては一次変換で加えた”/var/resizes/”を”/var/thumbs/”に変更。サムネイル画像を転用する事でレスポンシブ化を実装。