Bloosh Company

2021年3月1日

Development>WordPress

lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする

, , ,

2021.10.19 編集。
lightgallery.jsは、Ver1とVer2があり、商用利用する場合はVer2は有料です。
lightgalleryに関する記事一覧はこちら
Ver1公式サイトはこちら
Ver2公式サイトはこちら
 
 
lightgallery.jsでは、サムネイルを表示する場合、小さいサイズの画像を指定できます。
 
そして、WordPressでは、wp_get_attachment_image_src($id, "画像サイズ")[0]という関数を使えば、サイズを指定して画像を取得することができます。
組み合わせると、

<a href="<?php echo $src; ?>" data-exthumbimage="<?php echo wp_get_attachment_image_src($id, "thumbnail")[0];?>">
</a>

このように、属性にdata-exthumbimage=サムネイルサイズの画像URLと指定します。
 

lightgallery.js Ver2の場合

上記に続いて、下記のように設定。
HTMLではなく<script type="text/javascript">で指定してるところに、付け足します。


<script type="text/javascript">
lightGallery(document.getElementById('gallery'), {
	plugins: [lgThumbnail],
	thumbnail:true,
	exThumbImage: 'data-exthumbimage'
});
</script>

 

補足

WordPressは、画像をアップロードするとき、オリジナルのサイズだけでなく、自動で大・中・小にリサイズして保存してくれます。
大・中・小の実際の大きさは、管理画面の設定⇒メディアから設定できます。
さらに、functions.phpに追加すれば、任意のサイズを指定することができます。
注意点として、管理画面等からサイズ変更しても、アップロード済の画像はリサイズされません。
アップロード済みの画像をまとめてリサイズできるプラグインがあるので安心してね。
 

wp_get_attachment_image_src($id, "画像サイズ")[0]とうしろに[0]がついてるのは、wp_get_attachment_image_src()の返り値が配列で、
[0] -> 画像URL
[1] -> 画像幅
[2] -> 画像縦
だからです。

lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする #WordPress #JavaScript #lightgalleryjs #ギャラリー #軽量化

<<次の記事

Really Simple CSV Importerのフックでカスタムフィールドの情報を本文に追加する

前の記事>>

lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題