Template:BackgroundImage |
No edit summary |
||
| Line 3: | Line 3: | ||
{{Sandbox heading}} | {{Sandbox heading}} | ||
== Please test below ==</noinclude> | == Please test below ==</noinclude> | ||
<includeonly><templatestyles src="Template: | <includeonly><templatestyles src="Template:Background Image/page.css" />{{#Widget:SideBarPic}}<!-- | ||
-->{{#vardefine: | -->{{#vardefine:Background Image.isInside|{{filepath:{{{1|{{{url|}}}}}}}}}}<!-- | ||
-->{{array|new|name=widths|1920|1680|1600|1400|1366|1360|1280|1024|800}}<!-- | -->{{array|new|name=widths|1920|1680|1600|1400|1366|1360|1280|1024|800}}<!-- | ||
-->{{#vardefine: | -->{{#vardefine:Background Image.animate|{{#ifeq:{{{animate|show}}}|none| | ||
|animation:{{#vardefineecho: | |animation:{{#vardefineecho:Background Image.animateName|{{#if:{{{animate|}}} | ||
|{{#ifeq:{{{animate|}}}|look|look-{{#ifeq:{{{position|}}}|top|bottom|top}}|{{{animate|}}}}} | |{{#ifeq:{{{animate|}}}|look|look-{{#ifeq:{{{position|}}}|top|bottom|top}}|{{{animate|}}}}} | ||
|show}}}} {{{action|{{#switch:{{#var: | |show}}}} {{{action|{{#switch:{{#var:Background Image.animateName}}|show=2s|shrink=4s ease-out|clear=2s|appear|look|look-top|look-bottom=5s ease|#default=2s}}}}}; | ||
}}}}<!-- | }}}}<!-- | ||
--><div><!-- | --><div><!-- | ||
--><div class="nomobile sidebar-character" style="width:100%; height:100%; top:0; left:0; z-index:-3;" data-displaylogo="{{#ifeq:{{{displaylogo|yes}}}|no|no|yes}}"><!-- | --><div class="nomobile sidebar-character" style="width:100%; height:100%; top:0; left:0; z-index:-3;" data-displaylogo="{{#ifeq:{{{displaylogo|yes}}}|no|no|yes}}"><!-- | ||
--><div style="position:fixed; top:0; left:0; width:100%; height:100%; background:{{{color|transparent}}}; {{#var: | --><div style="position:fixed; top:0; left:0; width:100%; height:100%; background:{{{color|transparent}}}; {{#var:Background Image.animate}}"></div><!-- Background color | ||
--><img data-src="{{#if:{{#var: | --><img data-src="{{#if:{{#var:Background Image.isInside}}|{{#var:Background Image.isInside}}|{{#if:{{{1|{{{url|}}}}}}|{{{1|{{{url|}}}}}}|data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=}}}}" | ||
style="position:fixed; top:0; width:100%; height:100%; object-fit:cover; object-position:{{{position|center center}}}; {{#var: | style="position:fixed; top:0; width:100%; height:100%; object-fit:cover; object-position:{{{position|center center}}}; {{#var:Background Image.animate}}" | ||
{{#if:{{#var: | {{#if:{{#var:Background Image.isInside}}|{{#vardefine:Background Image.maxWidth|{{#invoke:fileInfo|main|{{{1|{{{url|}}}}}}|width}}}} | ||
srcset="{{#invoke:loop|main|times=1|{{array|get|widths|count}}|do=<nowiki> | srcset="{{#invoke:loop|main|times=1|{{array|get|widths|count}}|do=<nowiki> | ||
{{#ifexpr:{{array|get|widths|{{#var:times}}}} < {{#var: | {{#ifexpr:{{array|get|widths|{{#var:times}}}} < {{#var:Background Image.maxWidth}}| | ||
{{filepath:{{{1|{{{url|}}}}}}|{{array|get|widths|{{#var:times}}}}}} {{array|get|widths|{{#var:times}}}}w, | {{filepath:{{{1|{{{url|}}}}}}|{{array|get|widths|{{#var:times}}}}}} {{array|get|widths|{{#var:times}}}}w, | ||
}} | }} | ||
</nowiki>}}{{filepath:{{{1|{{{url|}}}}}}}} | </nowiki>}}{{filepath:{{{1|{{{url|}}}}}}}} | ||
" | " | ||
}} /><!-- | }} /><!-- Image | ||
-->{{#if:{{{make|}}}|<div style="position:fixed; top:0; width:100%; height:100%; {{{make|}}}; {{#var: | -->{{#if:{{{make|}}}|<div style="position:fixed; top:0; width:100%; height:100%; {{{make|}}}; {{#var:Background Image.animate}}"></div>}}<!-- make | ||
--><div style="position:fixed; top:0; width:100%; height:100%; background:{{{shadeColor|white}}}; opacity:{{{shade|0}}}; {{#var: | --><div style="position:fixed; top:0; width:100%; height:100%; background:{{{shadeColor|white}}}; opacity:{{{shade|0}}}; {{#var:Background Image.animate}}"></div><!-- shade | ||
--></div></div><!-- | --></div></div><!-- | ||
-->{{#if:{{{logo-url|}}}|<span id="wglogo" class="nomobile" data-background-position="{{{logo-position|}}}" data-background-size="{{#switch:{{{logo-size|}}}|false|False=|#default={{{logo-size|}}}}}" data-background-image="{{#if:{{filepath:{{PAGENAME:{{{logo-url|ZhMoegirl15.2.png}}}}}}}|{{filepath:{{PAGENAME:{{{logo-url|ZhMoegirl15.2.png}}}}}}}|{{{logo-url|ZhMoegirl15.2.png}}}}}"></span>{{#Widget:Wglogo}}}}<!-- | -->{{#if:{{{logo-url|}}}|<span id="wglogo" class="nomobile" data-background-position="{{{logo-position|}}}" data-background-size="{{#switch:{{{logo-size|}}}|false|False=|#default={{{logo-size|}}}}}" data-background-image="{{#if:{{filepath:{{PAGENAME:{{{logo-url|ZhMoegirl15.2.png}}}}}}}|{{filepath:{{PAGENAME:{{{logo-url|ZhMoegirl15.2.png}}}}}}}|{{{logo-url|ZhMoegirl15.2.png}}}}}"></span>{{#Widget:Wglogo}}}}<!-- Replace logo | ||
--></includeonly> | --></includeonly> | ||
|