More actions
Created page with "<includeonly><ul class="template gallery" {{#if:{{{perrow|}}}|style="max-width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+9)*{{{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>}}}}}}</ul>{{#if:{{#varexists:gallery}}||{{#vardefineecho:gal..." |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
<includeonly><ul class="template gallery" {{#if:{{{perrow|}}}|style="max-width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+9)*{{{perrow}}}}} | <includeonly> | ||
<ul class="template gallery" {{#if:{{{perrow|}}}|style="max-width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+9)*{{{perrow}}}}}"}}> | |||
{{#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>}}}}}} | |||
</ul> | |||
{{#if:{{#varexists:gallery}}||{{#vardefineecho:gallery| | |||
{{#css: | |||
ul.gallery.template { margin: 2px; padding: 2px; } | |||
ul.gallery.template li.gallerycaption { font-weight: bold; text-align: center; word-wrap: break-word; } | |||
ul.gallery.template li.gallerybox { vertical-align: top; display: inline-flex; flex-direction: column; } | |||
ul.gallery.template li.gallerybox div.thumb { | |||
width: {{{width|150px}}}; | |||
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.gallery.template li.gallerybox div.thumb img { | |||
max-width: {{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-30)}}px; | |||
max-height: {{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-30)}}px; | |||
object-fit: contain; | |||
margin: 0 auto; | |||
} | |||
ul.gallery.template div.gallerytext { overflow: hidden; font-size: 94%; padding: 2px 4px; word-wrap: break-word; text-align: center; } | |||
}}}}} | |||
</includeonly> | |||
<noinclude> | |||
<!-- 简述模板作用 --> | <!-- 简述模板作用 --> | ||
标签 <nowiki><gallery></nowiki> 的替代品,支持gif动图 | 标签 <nowiki><gallery></nowiki> 的替代品,支持gif动图 |
Revision as of 17:33, 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| }}
显示内容
文字描述
可以指向首页
{{#if:||}
示例2
你所写的
{{gallery|caption=标题|width=200px|height=100px|perrow=2 |file:Main MPI3508.jpg|文字描述 |file:4.0-HDMI-004.jpg|可以指向[[首页]] |file:4.0-HDMI-004.jpg| }}
显示内容
- 标题
文字描述
可以指向首页
{{#if:1||}