Template:Gallery: Difference between revisions

Latest revision as of 20:34, 1 August 2024

标签 <gallery> 的替代品，支持gif动图

使用方法

调用参数

{{gallery|caption=<caption>|width=<width>|height=<height>|perrow=<perrow>
|file1|title1
|file2|title2
…
|fileN|titleN
}}

必填

file：图片名

选填

caption：gallery的标题
width：宽（单位：px）设置宽高时建议按照图片尺寸比例设置
height：高（单位：px）设置宽高时建议按照图片尺寸比例设置
perrow：每行显示数量
title：图片提示文字

示例1

你所写的

{{gallery
|file:Main MPI3508.jpg|文字描述
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
|file:4.0-HDMI-004.jpg|
}}

显示内容

文字描述
可以指向首页

示例2

你所写的

{{gallery|caption=标题|width=200px|height=200px|perrow=2
|file:Main MPI3508.jpg|文字描述
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
|file:4.0-HDMI-004.jpg|
}}

显示内容

标题
文字描述
可以指向首页

@@ Line 1: / Line 1: @@
-<includeonly>
+<includeonly><ul class="template gallery" {{#if:{{{perrow|}}}|style="width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}}px"}}>
-<ul class="template gallery" id="{{{id|mygallery}}}" {{#if:{{{perrow|}}}|style="width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}}px"}}>
 {{#if:{{{caption|}}}|<li class="gallerycaption">{{{caption}}}</li>}}
-{{#forargs:|k|v|{{#rmatch:{{#var:k}}|^\d+$|{{#ifeq:{{#expr:{{#var:k}} mod 2}}|1|<li class="gallerybox"><div class="thumb">[[{{#var:v}}]]</div><div class="gallerytext"><p>|{{#var:v}}</p></div></li>}}}}}}
+{{#forargs:|k|v|{{#rmatch:{{#var:k}}|^\d+$|{{#ifeq:{{#expr:{{#var:k}} mod 2}}|1|<li class="gallerybox"><div class="thumb" style="width:{{{width|150px}}};height:{{{height|150px}}};">[[{{#var:v}}]]</div><div class="gallerytext"><p>|{{#var:v}}</p></div></li>}}}}}}
-</ul>
+</ul>{{#if:{{#varexists:gallery}}||{{#vardefineecho:gallery
-{{#if:{{#varexists:gallery}}
-|
-|{{#vardefineecho:gallery
 |{{#css:
-ul#{{{id|mygallery}}}.gallery.template{
+ul.gallery.template{
      margin:2px;padding:2px;
 }
-ul#{{{id|mygallery}}}.gallery.template li.gallerycaption{
+ul.gallery.template li.gallerycaption{
      font-weight:bold;text-align:center;word-wrap:break-word
 }
-ul#{{{id|mygallery}}}.gallery.template li.gallerybox{
+ul.gallery.template li.gallerybox{
      vertical-align:top;display:inline-flex;flex-direction:column;
 }
-ul#{{{id|mygallery}}}.gallery.template li.gallerybox div.thumb{
+ul.gallery.template li.gallerybox div.thumb{
-    width:{{{width|150px}}};
-    height:{{{height|150px}}};
-    padding:5px;
      border:1px solid #c8ccd1;
      background-color:#f8f9fa;
@@ Line 26: / Line 19: @@
      justify-content:center;
      align-items:center;margin:4px;
+    overflow-y:hidden;
 }
-ul#{{{id|mygallery}}}.gallery.template li.gallerybox div.thumb img{
+ul.gallery.template li.gallerybox div.thumb span a img{
-     width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-10)}}px;
+     width: 100%;
-    height:{{#expr:({{#rmatch:{{{height|150px}}}|(\d+)|$1}}-10)}}px;
      object-fit:contain;margin:0 auto;
 }
-ul#{{{id|mygallery}}}.gallery.template div.gallerytext{
+ul.gallery.template div.gallerytext{
      overflow:hidden;font-size:94%;padding:2px 4px;word-wrap:break-word;text-align:center;
 }
-}}}}}}
+}}}}}}</includeonly>
-</includeonly>
 <noinclude>
 <!-- 简述模板作用 -->
@@ Line 61: / Line 52: @@
 <!-- 选填参数项的说明，如没有可以留空或删除 -->
 *caption：gallery的标题
-*width：宽（单位：px）
+*width：宽（单位：px）设置宽高时建议按照图片尺寸比例设置
-*height：高（单位：px）
+*height：高（单位：px）设置宽高时建议按照图片尺寸比例设置
 *perrow：每行显示数量
 *title：图片提示文字
+==示例1==
+<!-- 模板使用示例 -->
+===你所写的===
+<pre>{{gallery
+|file:Main MPI3508.jpg|文字描述
+|file:4.0-HDMI-004.jpg|可以指向[[首页]]
+|file:4.0-HDMI-004.jpg|
+}}</pre>
+===显示内容===
+{{gallery
+|file:Main MPI3508.jpg|文字描述
+|file:4.0-HDMI-004.jpg|可以指向[[首页]]
+|file:4.0-HDMI-004.jpg|
+}}
 ==示例2==
 <!-- 模板使用示例 -->
 ===你所写的===
-<pre>{{gallery|caption=标题|width=300px|height=200px|perrow=2
+<pre>{{gallery|caption=标题|width=200px|height=200px|perrow=2
 |file:Main MPI3508.jpg|文字描述
 |file:4.0-HDMI-004.jpg|可以指向[[首页]]
@@ Line 76: / Line 81: @@
 }}</pre>
 ===显示内容===
-{{gallery|caption=标题|width=300px|height=200px|perrow=2
+{{gallery|caption=标题|width=200px|height=200px|perrow=2
 |file:Main MPI3508.jpg|文字描述
 |file:4.0-HDMI-004.jpg|可以指向[[首页]]
 |file:4.0-HDMI-004.jpg|
 }}
 </noinclude>