More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<ul class | {{#vardefine:uniqueClass|gallery-{{#timeseq:}}}} | ||
{{#if:{{{caption|}}}|<li class="gallerycaption">{{{caption}}}</li>}} | <ul class="{{#var:uniqueClass}}" {{#if:{{{perrow|}}}|style="max-width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}px;"}}> | ||
{{#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>}}}}}} | {{#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> | </ul> | ||
{{# | <style> | ||
ul.{{#var:uniqueClass}} { margin: 2px; padding: 2px; } | |||
ul.{{#var:uniqueClass}} li.gallerycaption { font-weight: bold; text-align: center; word-wrap: break-word; } | |||
ul.{{#var:uniqueClass}} li.gallerybox { vertical-align: top; display: inline-flex; flex-direction: column; } | |||
ul.{{#var:uniqueClass}} 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#{{{ | ul.{{#var:uniqueClass}} 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 | ul.{{#var:uniqueClass}} div.gallerytext { overflow: hidden; font-size: 94%; padding: 2px 4px; word-wrap: break-word; text-align: center; } | ||
</style> | |||
} | |||
} | |||
</includeonly> | </includeonly> | ||
<noinclude> | |||
模板使用说明 | |||
</noinclude> | |||
<noinclude> | <noinclude> | ||
Revision as of 18:57, 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|
}}
显示内容
<ul class="gallery-{{#timeseq:}}" {{#if:|style="max-width:Expression error: Unrecognized punctuation character "{".>
文字描述
可以指向首页
<style> ul.gallery-{{#timeseq:}} { margin: 2px; padding: 2px; } ul.gallery-{{#timeseq:}} li.gallerycaption { font-weight: bold; text-align: center; word-wrap: break-word; } ul.gallery-{{#timeseq:}} li.gallerybox { vertical-align: top; display: inline-flex; flex-direction: column; } ul.gallery-{{#timeseq:}} li.gallerybox div.thumb {
width: 150px; height: 150px; max-width: 150px; max-height: 150px; padding: 15px; border: 1px solid #c8ccd1; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; margin: 4px;
} ul.gallery-{{#timeseq:}} li.gallerybox div.thumb img {
max-width: 120px; max-height: 120px; object-fit: contain; margin: 0 auto;
} ul.gallery-{{#timeseq:}} div.gallerytext { overflow: hidden; font-size: 94%; padding: 2px 4px; word-wrap: break-word; text-align: center; } </style>
示例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|
}}
显示内容
<ul class="gallery-{{#timeseq:}}" {{#if:2|style="max-width:Expression error: Unrecognized punctuation character "}".>
文字描述
可以指向首页
<style> ul.gallery-{{#timeseq:}} { margin: 2px; padding: 2px; } ul.gallery-{{#timeseq:}} li.gallerycaption { font-weight: bold; text-align: center; word-wrap: break-word; } ul.gallery-{{#timeseq:}} li.gallerybox { vertical-align: top; display: inline-flex; flex-direction: column; } ul.gallery-{{#timeseq:}} li.gallerybox div.thumb {
width: 300px; height: 200px; max-width: 300px; max-height: 200px; padding: 15px; border: 1px solid #c8ccd1; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; margin: 4px;
} ul.gallery-{{#timeseq:}} li.gallerybox div.thumb img {
max-width: 270px; max-height: 270px; object-fit: contain; margin: 0 auto;
} ul.gallery-{{#timeseq:}} div.gallerytext { overflow: hidden; font-size: 94%; padding: 2px 4px; word-wrap: break-word; text-align: center; } </style>