Jump to content

Template:Screenshot: Difference between revisions

From Swarthmore Knowledge Base
Kwhiteb1 (talk | contribs)
Created page with "<includeonly> <div style="text-align:center; margin:1.5em 0;"> <div style="display:inline-block; max-width:100%; background:#fff; border:1px solid #d8dde8; border-radius:8px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.08);"> [[File:{{{1}}}|{{{2|600px}}}|alt={{{3|}}}]] {{#if:{{{4|}}}| <div style="margin-top:.75em; font-size:90%; color:#555; text-align:center;"> {{{4}}} </div> }} </div> </div> </includeonly> <noinclude> == Screenshot Template == Creates a consis..."
 
Kwhiteb1 (talk | contribs)
No edit summary
Line 1: Line 1:
<includeonly>
<includeonly>
<div style="text-align:center; margin:1.5em 0;">
<div role="figure" aria-label="{{#if:{{{4|}}}|Figure: {{{4}}}|Screenshot: {{{3|}}}}}" style="text-align:center; margin:1.5em 0;">


<div style="display:inline-block; max-width:100%; background:#fff; border:1px solid #d8dde8; border-radius:8px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.08);">
<div style="display:inline-block; max-width:100%; background:#fff; border:1px solid #d8dde8; border-radius:8px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); box-sizing:border-box;">


[[File:{{{1}}}|{{{2|600px}}}|alt={{{3|}}}]]
[[File:{{{1}}}|{{{2|600px}}}|alt={{{3|}}}]]


{{#if:{{{4|}}}|
{{#if:{{{4|}}}|
<div style="margin-top:.75em; font-size:90%; color:#555; text-align:center;">
<div style="margin-top:.75em; font-size:90%; color:#333; text-align:center; line-height:1.4;">
{{{4}}}
<strong>Figure:</strong> {{{4}}}
</div>
</div>
}}
}}
Line 20: Line 20:
== Screenshot Template ==
== Screenshot Template ==


Creates a consistently styled screenshot with an optional caption.
Creates a consistently styled screenshot with optional caption text.


=== Usage ===
=== Usage ===
Line 29: Line 29:
  | 600px
  | 600px
  | Alternative text
  | Alternative text
  | Optional caption
  | Caption text without "Figure:"
}}
}}
</pre>
</pre>
Line 35: Line 35:
=== Parameters ===
=== Parameters ===


# '''File name''' (required)
# '''File name''' required
# '''Width''' (optional, defaults to <code>600px</code>)
# '''Width''' optional, defaults to <code>600px</code>
# '''Alternative text''' (recommended)
# '''Alternative text''' — required for meaningful screenshots
# '''Caption''' (optional)
# '''Caption''' optional; the template automatically adds <code>Figure:</code>


=== Examples ===
=== Example ===
 
Without a caption:
 
<pre>
{{Screenshot
| DrupalMySites.png
| 500px
| Screenshot showing the My Sites menu
}}
</pre>
 
With a caption:


<pre>
<pre>
Line 58: Line 46:
  | DrupalMySites.png
  | DrupalMySites.png
  | 500px
  | 500px
  | Screenshot showing the My Sites menu
  | Screenshot showing the My Sites menu in the Drupal toolbar
  | Figure 1. The Drupal toolbar after a successful login.
  | The Drupal toolbar after a successful login.
}}
}}
</pre>
</pre>
</noinclude>
</noinclude>

Revision as of 13:55, 9 July 2026


Screenshot Template

Creates a consistently styled screenshot with optional caption text.

Usage

{{Screenshot
 | File.png
 | 600px
 | Alternative text
 | Caption text without "Figure:"
}}

Parameters

  1. File name — required
  2. Width — optional, defaults to 600px
  3. Alternative text — required for meaningful screenshots
  4. 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.
}}