Difference between revisions of "Template:comic/sandbox"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
(comms)
Line 1: Line 1:
 
<includeonly><metadesc>explain xkcd is a wiki dedicated to explaining the webcomic xkcd. Go figure.</metadesc><!--
 
<includeonly><metadesc>explain xkcd is a wiki dedicated to explaining the webcomic xkcd. Go figure.</metadesc><!--
  
   Create the 'box' around the comic template
+
   Create the 'box' (table) around the comic template
  
 
   --><table class="comic-content {{#if:{{{bodyclass|}}}|{{{bodyclass}}}|}}" cellspacing="5" style="background-color: #FFFFFF;
 
   --><table class="comic-content {{#if:{{{bodyclass|}}}|{{{bodyclass}}}|}}" cellspacing="5" style="background-color: #FFFFFF;
Line 25: Line 25:
 
     --><tr><td><!--
 
     --><tr><td><!--
  
       Now make an unordered list which will display as the navigation bar
+
       Now make an unordered list which will display as the first navigation bar, above the image
 
     --><ul style="text-align: center; margin-bottom: 10px;" class="no-link-underline"><!--
 
     --><ul style="text-align: center; margin-bottom: 10px;" class="no-link-underline"><!--
  
Line 125: Line 125:
 
     --></span>}}</td></tr><!--</table>
 
     --></span>}}</td></tr><!--</table>
  
 
+
      Ok, the upper row is done! Now, let's make the lower WHITE row.
 
+
      You probably haven't seen this, check out comic [[10]] and others.
 
+
      This is only displayed if {{{ognumber}}} is specified, otherwise it's replaced by the "gray" navbar (we'll make it below).
WHITE ROW WITH COLORS INVERTED
 
 
       This table will contain a table row (tr) and cell (td)
 
       This table will contain a table row (tr) and cell (td)
 
     --><tr><td><!--
 
     --><tr><td><!--
Line 214: Line 213:
  
  
 
+
      Ok, that row's done. But it'll be hidden if the comic is one of the first 55.
 
+
      So let's make the lower GRAY row. This is hidden if {{{ognumber}}} is specified, because it's replaced by the "white" navbar above.
 
 
SECOND ROW IF NOT OG COMIC
 
 
       This table will contain a table row (tr) and cell (td)
 
       This table will contain a table row (tr) and cell (td)
 
       -->{{#ifexist: {{{ognumber}}} | <!-- If ognumber is provided, hide the entire block, if not show it  
 
       -->{{#ifexist: {{{ognumber}}} | <!-- If ognumber is provided, hide the entire block, if not show it  
Line 244: Line 241:
 
           Link to the previous comic
 
           Link to the previous comic
 
       -->[[{{#expr:{{{number|2}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;" title="">&lt;&nbsp;Prev</span>]]</li><!--
 
       -->[[{{#expr:{{{number|2}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;" title="">&lt;&nbsp;Prev</span>]]</li><!--
 
  
 
If {{{number}}} is valid, we need to make the RANDOM COMIC LINK
 
If {{{number}}} is valid, we need to make the RANDOM COMIC LINK
Line 285: Line 281:
  
  
 
+
     Add the comics to the automatic categories.
 
 
 
 
     Add the comics to the standard categories.
 
  
 
     Sort this page in categories by number. The padding ensures that #9 comes before #10
 
     Sort this page in categories by number. The padding ensures that #9 comes before #10
Line 308: Line 301:
 
     -->}}}}}}|}}<!--
 
     -->}}}}}}|}}<!--
 
     --></includeonly><noinclude><!--
 
     --></includeonly><noinclude><!--
 
 
 
  
 
       DOCUMENTATION
 
       DOCUMENTATION
 
-->{{:Template:comic/doc}}
 
-->{{:Template:comic/doc}}
 
[[Category:Templates]]</noinclude>
 
[[Category:Templates]]</noinclude>

Revision as of 17:16, 22 April 2025

The template {{comic}} has an associated sandbox, available at Template:comic/sandbox.


This is the basic infobox-style header template used to display xkcd comics on their own pages, including the comic number (with external link to xkcd), publication date, title, comic image, and title text.

(edit documentation)

Usage

{{comic
| number    =
| date      =
| title     =
| ognumber  =
| oglink    =
| ogttlabel =
| ogtitle   =
| ogprev    =
| ognote    =
| ognext    =
| before    =
| image     =
| custom    =
| imagesize =
| noexpand  =
| titletext =
| ttstyle   =
| bodystyle =
| bodyclass =
| extra     =
| ldomain   =
| lappend   =
}}
Ambox notice.png The new parameters are undocumented! There's some info about them in the code.
ogttlabel = optional
ognumber  = 
ogprev    = required if ognumber given, otherwise throws an error
ognote    = optional
ognext    = required if ognumber given, otherwise throws an error
Parameter Usage Description
number Required in normal circumstances The comic's basic information. In normal circumstances, these should always be defined.
title Required in normal circumstances
image Required in normal circumstances
date Optional; omit if unreleased or undated The date the comic was first published and should be written in the form mmmm d, yyyy. (Full month name, day number without digit padding, 4-digit year. Example: January 1, 2006). If the comic has no date or has not been released, it should be omitted.
ognumber Optional; only used for early comics Must always be used together for the early xkcd comics, not when Randall changes the title of an existing comic. Note that if ognumber is given, some parameters are required.
oglink
ogtitle
before Optional; used for long comics Used to insert text before the comic, usually to insert a link to skip to the explanation on extremely large comics like 1732: Earth Temperature Timeline or for the comic itself if it's just text like Blue Eyes. The text provided to this parameter is placed on the line between the title and the image. This parameter is optional. The wikitext used to jump to the ==Explanation== is [[#Explanation|↓ Skip to explanation ↓]].
imagesize Optional; limits image display size Limits the size of the image in pixels.
  • To limit the width, simply list the width. E.g.: 350px
  • To limit the height, prepend an "x" to the desired height. E.g.: x400px

Note that, if the imagesize is larger than the image, the image will be stretched.

noexpand Optional; used when imagesize limits display Boolean to hide the "Click to enlarge" button, usually when using imagesize.
custom Optional; overrides image Replaces the comic image with custom text or content.
titletext Optional; sets title text Sets the title text of the comic.
ttstyle Optional; styles title text Sets the CSS style of the titletext span element.
bodystyle Optional; sets wrapper style Sets the inline CSS style of the outer comic container.
bodyclass Optional; sets wrapper class Sets the HTML class attribute of the outer comic container.
extra Optional; boolean When set to yes, adds the page to the Extra comics category.
lappend Required if number is missing The part of the link appended to xkcd.com/ in "wide link mode". Required when number is not set.
ldomain Optional; changes link domain Sets the subdomain for the link (e.g., blog for blog.xkcd.com). Defaults to www. For example, if the link is to a blog post (blog.xkcd.com), ldomain should be set to blog. The resulting link when using lappend and optionally ldomain is:

https://ldomain.xkcd.com/lappend

Example 1

Suspension Bridge
As a first step, they can put in a secondary deck, to help drivers try it out and find out how fun the jumps are. After a while no one will use the old flat deck and they can remove it.
Title text: As a first step, they can put in a secondary deck, to help drivers try it out and find out how fun the jumps are. After a while no one will use the old flat deck and they can remove it.

The example above is produced by the following code:

{{comic
| number    = 3048
| date      = February 7, 2025
| title     = Suspension Bridge
| image     = suspension_bridge_2x.png
| imagesize = 362x365px
| noexpand  = true
| titletext = As a first step, they can put in a secondary deck, to help drivers try it out and find out how fun the jumps are. After a while no one will use the old flat deck and they can remove it.
}}

Example 2

Pi Equals
My most famous drawing, and one of the first I did for the site
Title text: My most famous drawing, and one of the first I did for the site
Warning: Default sort key "0010" overrides earlier default sort key "3048".

The example above is produced by the following code:

{{comic
| ognumber    = 10
| ognumber    = 10
| date      = September 30, 2005
| title     = Pi Equals
| oglink    = https://web.archive.org/web/20070927001941/http://xkcd-drawings.livejournal.com/?skip=40#:~:text=8%3A44%20pm-,Pi%20equals,-(4%20Comments
| ogtitle   = Pi equals
| image     = pi.jpg
| titletext = My most famous drawing, and one of the first I did for the site
}}

Tests

Air Fact
'Wow, that must be why you swallow so many of them per year!' 'No, that's spiders. You swallow WAY more ants.'
Title text: 'Wow, that must be why you swallow so many of them per year!' 'No, that's spiders. You swallow WAY more ants.'
Warning: Default sort key "3070" overrides earlier default sort key "0010".
Suspension Bridge
As a first step, they can put in a secondary deck, to help drivers try it out and find out how fun the jumps are. After a while no one will use the old flat deck and they can remove it.
Title text: As a first step, they can put in a secondary deck, to help drivers try it out and find out how fun the jumps are. After a while no one will use the old flat deck and they can remove it.
Warning: Default sort key "3048" overrides earlier default sort key "3070".


Pi Equals
My most famous drawing, and one of the first I did for the site
Title text: My most famous drawing, and one of the first I did for the site
Warning: Default sort key "0008" overrides earlier default sort key "3048".
Pi Equals
My most famous drawing, and one of the first I did for the site
Title text: My most famous drawing, and one of the first I did for the site
Warning: Default sort key "0010" overrides earlier default sort key "0008".