GNAVIモジュールの記事ごとの画像をサムネイル画像に変更する
GNAVIモジュールの記事ごとの画像をサムネイル画像に変更する
msg# 1
- depth:
- 0
前の投稿
-
次の投稿
|
親投稿
-
子投稿なし
|
投稿日時 2026/8/14 13:13
タツ
投稿数: 2601
投稿数: 2601
以前から気になっていたのですが、Gnaviモジュールでは記事ごとの画像をオリジナルの大きさの画像を縮小して利用しているため、地図も利用していることから読み込みに時間がかかります。少しでも軽くするために記事内の画像をサムネイルの画像を使うように改造してみました。
これに関連してこの記事内の画像をサムネイル画像にするとプレビューでは画像が表示されなくなるという不具合もありモジュール名+__itemheader.htmlのFILE1からFILE3の部分をを次のように編集しました。なお、記事内の画像とlightbox2でリンクするための要素も含んでいます。
これに関連してこの記事内の画像をサムネイル画像にするとプレビューでは画像が表示されなくなるという不具合もありモジュール名+__itemheader.htmlのFILE1からFILE3の部分をを次のように編集しました。なお、記事内の画像とlightbox2でリンクするための要素も含んでいます。
<{* FILE1 *}>
<{if $photo.ext}><div class="gn_file">
<{* プレビュー対策：サムネイルがあればそれを、なければ大画像を変数 $display_img にセット *}>
<{if $photo.imgsrc_thumb}>
<{assign var="display_img" value=$photo.imgsrc_thumb}>
<{else}>
<{assign var="display_img" value=$photo.ahref_photo}>
<{/if}>
<{if $photo.img==1}>
<!-- 表示画像（src）に $display_img を使用、リンク先（href）は大画像のまま保持 -->
<a href="<{$photo.ahref_photo}>" data-title="<{$photo.caption}>" data-lightbox="<{$xoops_pagetitle}>">
<img src="<{$display_img}>" alt="<{$photo.caption}>" <{$photo.width_height}> />
</a>
<{elseif $photo.img==2}>
<!-- リンクなし表示の場合 -->
<img src="<{$display_img}>" alt="<{$photo.caption}>" <{$photo.width_height}> />
<{else}>
<!-- 外部リンクなどの場合 -->
<a href="<{$photo.ahref_photo}>" target="_blank">
<img src="<{$display_img}>" alt="<{$photo.caption}>" />
</a>
<{/if}>
<{if $photo.caption}><div class="gn_caption" <{$photo.captionstyle}>><{$photo.caption}></div><{/if}>
<{if $photo.exif.0}>
<{assign var="photo_num" value=0}>
<{assign var="item_exif" value=$photo.exif.0}>
<{include file="db:`$mydirname`_inc_exif_table.html"}>
<{/if}>
</div><{/if}>
<{* FILE2 *}>
<{if $photo.ext1}><div class="gn_file">
<{* プレビュー対策：サムネイルがあればそれを、なければ大画像を変数 $display_img にセット *}>
<{if $photo.imgsrc_thumb1}>
<{assign var="display_img" value=$photo.imgsrc_thumb1}>
<{else}>
<{assign var="display_img" value=$photo.ahref_photo1}>
<{/if}>
<{if $photo.img1==1}>
<!-- 表示画像（src）に $display_img を使用、リンク先（href）は大画像のまま保持 -->
<a href="<{$photo.ahref_photo1}>" data-title="<{$photo.caption1}>" data-lightbox="<{$xoops_pagetitle}>">
<img src="<{$display_img}>" alt="<{$photo.caption1}>" <{$photo.width_height1}> />
</a>
<{elseif $photo.img1==2}>
<!-- リンクなし表示の場合 -->
<img src="<{$display_img}>" alt="<{$photo.caption1}>" <{$photo.width_height1}> />
<{else}>
<!-- 外部リンクなどの場合 -->
<a href="<{$photo.ahref_photo1}>" target="_blank">
<img src="<{$display_img}>" alt="<{$photo.caption1}>" />
</a>
<{/if}>
<{if $photo.caption1}><div class="gn_caption" <{$photo.captionstyle1}>><{$photo.caption1}></div><{/if}>
<{if $photo.exif.1}>
<{assign var="photo_num" value=1}>
<{assign var="item_exif" value=$photo.exif.1}>
<{include file="db:`$mydirname`_inc_exif_table.html"}>
<{/if}>
</div><{/if}>
<{* FILE3 *}>
<{if $photo.ext2}><div class="gn_file">
<{* プレビュー対策：サムネイルがあればそれを、なければ大画像を変数 $display_img にセット *}>
<{if $photo.imgsrc_thumb2}>
<{assign var="display_img" value=$photo.imgsrc_thumb2}>
<{else}>
<{assign var="display_img" value=$photo.ahref_photo2}>
<{/if}>
<{if $photo.img2==1}>
<!-- 表示画像（src）に $display_img を使用、リンク先（href）は大画像のまま保持 -->
<a href="<{$photo.ahref_photo2}>" data-title="<{$photo.caption2}>" data-lightbox="<{$xoops_pagetitle}>">
<img src="<{$display_img}>" alt="<{$photo.caption2}>" <{$photo.width_height2}> />
</a>
<{elseif $photo.img2==2}>
<!-- リンクなし表示の場合 -->
<img src="<{$display_img}>" alt="<{$photo.caption2}>" <{$photo.width_height2}> />
<{else}>
<!-- 外部リンクなどの場合 -->
<a href="<{$photo.ahref_photo2}>" target="_blank">
<img src="<{$display_img}>" alt="<{$photo.caption2}>" />
</a>
<{/if}>
<{if $photo.caption2}><div class="gn_caption" <{$photo.captionstyle2}>><{$photo.caption2}></div><{/if}>
<{if $photo.exif.2}>
<{assign var="photo_num" value=2}>
<{assign var="item_exif" value=$photo.exif.2}>
<{include file="db:`$mydirname`_inc_exif_table.html"}>
<{/if}>
</div><{/if}>
投票数:3
平均点:3.33
投稿ツリー
-
GNAVIモジュールの記事ごとの画像をサムネイル画像に変更する
(タツ, 2026/8/14 13:13)
