Template:Gallery: Difference between revisions

Revision as of 18:59, 1 August 2024

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

使用方法

调用参数

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

必填

file：图片名

选填

id: gallery 当在同一个页面中需要多次调用此模板时必填
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|id=grallery2|caption=标题|width=300px|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>
 {{#vardefine:uniqueClass|gallery-{{#timeseq:}}}}
-<ul class="{{#var:uniqueClass}}" {{#if:{{{perrow|}}}|style="max-width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}px;"}}>
+<ul class="{{#var:uniqueClass}}" {{#if:{{{perrow|}}}|style="width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}}px"}}>
-  {{#if:{{{caption|}}}|<li class="gallerycaption">{{{caption}}}</li>}}
+{{#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">[[{{#var:v}}]]</div><div class="gallerytext"><p>|{{#var:v}}</p></div></li>}}}}}}
 </ul>
-<style>
+{{#if:{{#varexists:gallery}}
-ul.{{#var:uniqueClass}} { margin: 2px; padding: 2px; }
+|
-ul.{{#var:uniqueClass}} li.gallerycaption { font-weight: bold; text-align: center; word-wrap: break-word; }
+|{{#vardefineecho:gallery
-ul.{{#var:uniqueClass}} li.gallerybox { vertical-align: top; display: inline-flex; flex-direction: column; }
+|{{#css:
-ul.{{#var:uniqueClass}} li.gallerybox div.thumb {
+ul.{{#var:uniqueClass}}{
-     width: {{{width|150px}}};
+     margin:2px;padding:2px;
-    height: {{{height|150px}}};
-    max-width: {{{width|150px}}};
-    max-height: {{{height|150px}}};
-    padding: 15px;
-    border: 1px solid #c8ccd1;
-    background-color: #f8f9fa;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 4px;
 }
-ul.{{#var:uniqueClass}} li.gallerybox div.thumb img {
+ul.{{#var:uniqueClass}} li.gallerycaption{
-     max-width: {{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-30)}}px;
+     font-weight:bold;text-align:center;word-wrap:break-word
-    max-height: {{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-30)}}px;
-    object-fit: contain;
-    margin: 0 auto;
 }
-ul.{{#var:uniqueClass}} div.gallerytext { overflow: hidden; font-size: 94%; padding: 2px 4px; word-wrap: break-word; text-align: center; }
+ul.{{#var:uniqueClass}} li.gallerybox{
-</style>
+    vertical-align:top;display:inline-flex;flex-direction:column;
+}
+ul.{{#var:uniqueClass}} li.gallerybox div.thumb{
+    width:{{{width|150px}}};
+    height:{{{height|150px}}};
+    padding:5px;
+    border:1px solid #c8ccd1;
+    background-color:#f8f9fa;
+    display:flex;
+    justify-content:center;
+    align-items:center;margin:4px;
+}
+ul.{{#var:uniqueClass}} li.gallerybox div.thumb img{
+    width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-10)}}px;
+    height:{{#expr:({{#rmatch:{{{height|150px}}}|(\d+)|$1}}-10)}}px;
+    object-fit:contain;margin:0 auto;
+}
+ul.{{#var:uniqueClass}} div.gallerytext{
+    overflow:hidden;font-size:94%;padding:2px 4px;word-wrap:break-word;text-align:center;
+}
+}}}}}}
 </includeonly>
-<noinclude>
-模板使用说明
-</noinclude>
 <noinclude>