Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Gallery: Difference between revisions

Template page
No edit summary
No edit summary
Line 1: Line 1:
<includeonly>
<includeonly><ul class="template gallery" {{#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" style="width:{{{width|150px}}};height:{{{height|150px}}};">[[{{#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{border:1px solid #c8ccd1;background-color:#f8f9fa;display:flex;justify-content:center;align-items:center;margin:4px;overflow-y:hidden;}ul.gallery.template li.gallerybox div.thumb span a img{width: 100%;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>
<ul class="template gallery" {{#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" style="width:{{{width|150px}}};height:{{{height|150px}}};">[[{{#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{
    border:1px solid #c8ccd1;
    background-color:#f8f9fa;
    display:flex;
    justify-content:center;
    align-items:center;margin:4px;
    overflow-y:hidden;
}
ul.gallery.template li.gallerybox div.thumb span a img{
    width: 100%;
    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动图
Line 47: Line 8:
===调用参数===
===调用参数===
<!-- 填写模板用法 -->
<!-- 填写模板用法 -->
<pre>{{gallery|id=<id>|caption=<caption>|width=<width>|height=<height>|perrow=<perrow>
<pre>{{gallery|caption=<caption>|width=<width>|height=<height>|perrow=<perrow>
|file1|title1
|file1|title1
|file2|title2
|file2|title2
Line 60: Line 21:
===选填===
===选填===
<!-- 选填参数项的说明,如没有可以留空或删除 -->
<!-- 选填参数项的说明,如没有可以留空或删除 -->
*id: gallery 当在同一个页面中需要多次调用此模板时必填
*caption:gallery的标题
*caption:gallery的标题
*width:宽(单位:px)
*width:宽(单位:px)
Line 66: Line 26:
*perrow:每行显示数量
*perrow:每行显示数量
*title:图片提示文字
*title:图片提示文字
==示例1==
==示例1==
<!-- 模板使用示例 -->
<!-- 模板使用示例 -->
Line 75: Line 36:
}}</pre>
}}</pre>
===显示内容===
===显示内容===
{{gallery|id=grallery1
{{gallery
|file:Main MPI3508.jpg|文字描述
|file:Main MPI3508.jpg|文字描述
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
Line 84: Line 45:
<!-- 模板使用示例 -->
<!-- 模板使用示例 -->
===你所写的===
===你所写的===
<pre>{{gallery|id=grallery2|caption=标题|width=300px|height=200px|perrow=2
<pre>{{gallery|caption=标题|width=200px|height=100px|perrow=2
|file:Main MPI3508.jpg|文字描述
|file:Main MPI3508.jpg|文字描述
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
Line 90: Line 51:
}}</pre>
}}</pre>
===显示内容===
===显示内容===
{{gallery|caption=标题|width=300px|height=200px|perrow=2
{{gallery|caption=标题|width=200px|height=100px|perrow=2
|file:Main MPI3508.jpg|文字描述
|file:Main MPI3508.jpg|文字描述
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
|file:4.0-HDMI-004.jpg|可以指向[[首页]]

Revision as of 20:18, 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=100px|perrow=2
|file:Main MPI3508.jpg|文字描述
|file:4.0-HDMI-004.jpg|可以指向[[首页]]
|file:4.0-HDMI-004.jpg|
}}

显示内容

}