Template:Screenshot: Difference between revisions

Latest revision as of 15:18, 10 July 2026

Screenshot Template

Creates a responsive, consistently styled screenshot with optional caption text.

Usage

{{Screenshot|File.png|600px|Alternative text|Optional caption}}

Parameters

File name — Required.
Width — Optional; defaults to 600px.
Alternative text — Required for meaningful screenshots.
Caption — Optional; the template automatically adds Figure:.

Example

{{Screenshot|DrupalMySites.png|500px|Screenshot showing the My Sites menu in the Drupal toolbar.|The Drupal toolbar after a successful login.}}

@@ Line 1: / Line 1: @@
-<includeonly><div style="text-align:center; margin:1.5em 0;">
+<includeonly><templatestyles src="Template:Screenshot/styles.css" /><div class="screenshot-wrapper"><div class="screenshot" role="figure" aria-label="{{#if:{{{4|}}}|Figure: {{{4}}}|Screenshot: {{{3|}}}}}"><div class="screenshot__image">[[File:{{{1}}}|frameless|{{{2|600px}}}|alt={{{3|}}}]]</div>{{#if:{{{4|}}}|<div class="screenshot__caption"><strong>Figure:</strong> {{{4}}}</div>}}</div></div></includeonly><noinclude>
-<div role="figure" aria-label="{{#if:{{{4|}}}|Figure: {{{4}}}|Screenshot: {{{3|}}}}}" style="display:inline-block; max-width:100%; background:#fff; border:1px solid #d8dde8; border-radius:8px; padding:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); box-sizing:border-box;">
-<div style="display:inline-block; max-width:100%; border:1px solid #c8ccd1; border-radius:4px; overflow:hidden; line-height:0; box-sizing:border-box;">
-[[File:{{{1}}}|frameless|{{{2|600px}}}|alt={{{3|}}}]]
-</div>
-{{#if:{{{4|}}}|
-<div style="margin-top:.75em; font-size:90%; color:#333; text-align:center; line-height:1.4;">
-<strong>Figure:</strong> {{{4}}}
-</div>
-}}
-</div>
-</div></includeonly>
-<noinclude>
 == Screenshot Template ==
-Creates a consistently styled screenshot with optional caption text.
+Creates a responsive, consistently styled screenshot with optional caption text.
 === Usage ===
 <pre>
-{{Screenshot
+{{Screenshot|File.png|600px|Alternative text|Optional caption}}
- | File.png
- | 600px
- | Alternative text
- | Caption text without "Figure:"
-}}
 </pre>
 === Parameters ===
-# '''File name''' — required
+# '''File name''' — Required.
-# '''Width''' — optional, defaults to <code>600px</code>
+# '''Width''' — Optional; defaults to <code>600px</code>.
-# '''Alternative text''' — required for meaningful screenshots
+# '''Alternative text''' — Required for meaningful screenshots.
-# '''Caption''' — optional; the template automatically adds <code>Figure:</code>
+# '''Caption''' — Optional; the template automatically adds <code>Figure:</code>.
+=== Example ===
+<pre>
+{{Screenshot|DrupalMySites.png|500px|Screenshot showing the My Sites menu in the Drupal toolbar.|The Drupal toolbar after a successful login.}}
+</pre>
 </noinclude>