Difference between revisions of "Template:comic/doc"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
(grabbing some undocumented parameters from the template)
(Undo revision 391475 by 42.book.addict (talk) no it is not!)
 
(31 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<noinclude><big><big>This page WILL BE transcluded into [[Template:comic]] as its documentation. (once the changes are approved by an admin)</big></big>
+
<noinclude><big><big>This page is transcluded inside [[Template:comic]] as its documentation, so everyone can edit it.</big></big>
 +
 
 +
</noinclude>'''The template {{tl|comic}} has an associated sandbox, available at [[Template:comic/sandbox]].'''
  
 
----
 
----
  
−
'''This template has an associated sandbox, available at [[Template:comic/sandbox]].''' </noinclude>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.
+
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.
−
__NOTOC__
 
−
== Example 1 ==
 
−
 
 
−
{{comic/sandbox
 
−
| 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 ==
 
−
{{comic/sandbox
 
−
| number    = 1
 
−
| date      = September 30, 2005
 
−
| title    = Barrel - Part 1
 
−
| oglink    = https://web.archive.org/web/20070927001941/http://xkcd-drawings.livejournal.com/?skip=40#:~:text=8%3A38%20pm-,Barrel,-He%27s%20fairly%20upbeat
 
−
| ogtitle=    Barrel
 
−
| image    = barrel_cropped_(1).jpg
 
−
| titletext = Don't we all.<br><br><span class="plainlinks">[https://web.archive.org/web/20070927001941/http://xkcd-drawings.livejournal.com/?skip=40#:~:text=8%3A38%20pm-,Barrel,-He%27s%20fairly%20upbeat Original caption</span>]: He's fairly upbeat about the situation!
 
−
}}
 
  
 +
[https://www.explainxkcd.com/wiki/index.php?title=Template:comic/doc&action=edit ''(edit documentation)'']__NOTOC__
 
== Usage ==
 
== Usage ==
−
 
 
<pre>{{comic
 
<pre>{{comic
 
| number    =
 
| number    =
 
| date      =
 
| date      =
 
| title    =
 
| title    =
 +
| ognumber  =
 +
| oglink    =
 +
| ogttlabel =
 +
| ogtitle  =
 +
| ogprev    =
 +
| ognote    =
 +
| ognext    =
 
| before    =
 
| before    =
 
| image    =
 
| image    =
Line 40: Line 26:
 
| noexpand  =
 
| noexpand  =
 
| titletext =
 
| titletext =
 +
| ttstyle  =
 +
| bodystyle =
 +
| bodyclass =
 +
| extra    =
 
| ldomain  =
 
| ldomain  =
 
| lappend  =
 
| lappend  =
 
}}</pre>
 
}}</pre>
 +
{{notice|The new parameters are undocumented! There's some info about them [https://www.explainxkcd.com/wiki/index.php?title{{=}}Template:comic/sandbox&action{{=}}edit in the code].<pre>
 +
ogttlabel = optional
 +
ognumber  =
 +
ogprev    = required if ognumber given, otherwise throws an error
 +
ognote    = optional
 +
ognext    = required if ognumber given, otherwise throws an error
 +
</pre>}}
  
−
=== Notes ===
+
{| class="wikitable sortable"
−
* '''<code>number</code>''', '''<code>title</code>''', and '''<code>image</code>''' are the comic number, comic title, and comic image.
+
! Parameter
 +
! Usage
 +
! Description
 +
|-
 +
| '''<code>number</code>'''
 +
| Required in normal circumstances
 +
| rowspan="3" | The comic's basic information. In normal circumstances, these should always be defined.
 +
|-
 +
| '''<code>title</code>'''
 +
| Required in normal circumstances
 +
|-
 +
| '''<code>image</code>'''
 +
| Required in normal circumstances
 +
|-
 +
| '''<code>date</code>'''
 +
| Optional; omit if unreleased or undated
 +
| The date the comic was first published and should be written in the form <code>mmmm d, yyyy</code>. (Full month name, day number without digit padding, 4-digit year. Example: <code>January 1, 2006</code>). If the comic [[:Category:No date|has no date]] or [[:Category:Unreleased comics|has not been released]], it should be omitted.
 +
|-
 +
| '''<code>ognumber</code>'''
 +
| rowspan="3" | Optional; only used for early comics
 +
| rowspan="3" | Must always be used together for [[LiveJournal|the early xkcd comics]], not when Randall [[:Category:Comics edited after their publication|changes the title]] of an existing comic. Note that if '''<code>ognumber</code>''' is given, some parameters are required.
 +
|-
 +
| '''<code>oglink</code>'''
 +
|-
 +
| '''<code>ogtitle</code>'''
 +
|-
 +
| '''<code>before</code>'''
 +
| 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 <code><nowiki>[[#Explanation|↓ Skip to explanation ↓]]</nowiki></code>.
 +
|-
 +
| '''<code>imagesize</code>'''
 +
| Optional; limits image display size
 +
| Limits the size of the image in pixels.
 +
*To limit the width, simply list the width. E.g.: <code>350px</code>
 +
* To limit the height, prepend an "x" to the desired height. E.g.: <code>x400px</code><br />
 +
Note that, if the '''<code>imagesize</code>''' is larger than the '''<code>image</code>''', the image will be stretched.
 +
|-
 +
| '''<code>noexpand</code>'''
 +
| Optional; used when imagesize limits display
 +
| Boolean to hide the "Click to enlarge" button, usually when using '''<code>imagesize</code>'''.
 +
|-
 +
| '''<code>custom</code>'''
 +
| Optional; overrides image
 +
| Replaces the comic image with custom text or content.
 +
|-
 +
| '''<code>titletext</code>'''
 +
| Optional; sets title text
 +
| Sets the [[Title text|title text]] of the comic.
 +
|-
 +
| '''<code>ttstyle</code>'''
 +
| Optional; styles title text
 +
| Sets the CSS style of the '''<code>titletext</code>''' span element.
 +
|-
 +
| '''<code>bodystyle</code>'''
 +
| Optional; sets wrapper style
 +
| Sets the inline CSS style of the outer comic container.
 +
|-
 +
| '''<code>bodyclass</code>'''
 +
| Optional; sets wrapper class
 +
| Sets the HTML class attribute of the outer comic container.
 +
|-
 +
| '''<code>extra</code>'''
 +
| Optional; boolean
 +
| When set to <code>yes</code>, adds the page to the [[:Category:Extra comics|Extra comics]] category.
 +
|-
 +
| '''<code>lappend</code>'''
 +
| Required if <code>number</code> is missing
 +
| The part of the link appended to <code>xkcd.com/</code> in "wide link mode". Required when <code>number</code> is not set.
 +
|-
 +
| '''<code>ldomain</code>'''
 +
| Optional; changes link domain
 +
| Sets the subdomain for the link (e.g., <code>blog</code> for blog.xkcd.com). Defaults to <code>www</code>. For example, if the link is to a blog post (blog.xkcd.com), '''<code>ldomain</code>''' should be set to <code>blog</code>. The resulting link when using <code>lappend</code> and optionally <code>ldomain</code> is:<br />
 +
<code>https://'''ldomain'''.xkcd.com/'''lappend'''</code>
 +
|}
  
−
* '''<code>date</code>''' is the date the comic was published and should be written in the form <code>mmmm d, yyyy</code> (full month name, day number without padding, 4-digit year; i.e. <code>January 1, 2006</code> for 2006-1-1)
+
== Example 1 ==
 +
{{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.
 +
}}
  
−
* '''<code>titletext</code>''' sets the [[Title text|title text]] of the comic.
+
The example above is produced by the following code:
  
−
* '''<code>imagesize</code>''' limits the size of the image in units of pixels. This parameter is optional.
+
<pre>{{comic
−
** To limit the width, simply list the width (e.g.: "350px").
+
| number    = 3048
−
** To limit the height, prepend an "x" to the desired height (e.g.: "x350px")
+
| date      = February 7, 2025
−
** Warning: If the '''<code>imagesize</code>''' is larger than the '''<code>image</code>''', the image will be stretched.
+
| 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.
 +
}}</pre>
  
−
* '''<code>noexpand</code>''' is a boolean parameter indicating whether the "Click comic to enlarge" button is hidden, usually used when '''<code>imagesize</code>''' is limiting the size of the comic. To hide the button, set this to <code>true</code>. This parameter is optional.
+
== Example 2 ==
 +
{{comic
 +
| number    = 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
 +
}}
  
−
* '''<code>before</code>''' is 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]]. The text provided to this parameter is placed on the line between the title and the image. This parameter is optional.
+
The example above is produced by the following code:
−
** The wikitext to skip to the explanation is <code><nowiki>[[#Explanation|↓ Skip to explanation ↓]]</nowiki></code>.
 
  
−
* '''<code>custom</code>''' overrides the '''<code>image</code>''' parameter and replaces the image with the text provided. This parameter is optional.
+
<pre>{{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
 +
}}</pre>
  
−
* If '''<code>number</code>''' is left undefined, the comic link will be set using "wide link mode"; at least '''<code>lappend</code>''' must be defined if '''<code>number</code>''' is undefined.
+
==Tests==
−
** '''<code>lappend</code>''' ('''L'''ink '''APPEND''') is the text that is appended to <code>xkcd.com/</code> in the link. This parameter is required when using "wide link mode".
+
{{comic
−
** '''<code>ldomain</code>''' ('''L'''ink '''DOMAIN''') is the subdomain of the link, defaulting to <code>www</code>. It is placed before <code>.xkcd.com/</code>. For example, if the link is to a blog post (blog.xkcd.com), '''<code>ldomain</code>''' should be set to <code>blog</code>. This parameter does not have to be explicitly set.
+
| number   = 3070
−
** The resulting link will be <code>'''ldomain'''.xkcd.com/'''lappend'''</code> whenever '''<code>number</code>''' is undefined.
+
| date      = April 21, 2025
−
 
+
| title    = Air Fact
−
* '''<code>captionstyle</code>''' will set the style of the title text that appears beneath the comic via the style attribute of the span object. This parameter is optional.
+
| image    = air_fact_2x.png
−
 
+
| imagesize = 250x394px
−
* '''<code>extra</code>''' is a boolean parameter that will automatically add the page to the [[:Category:Extra comics|Extra comics category]] when it is set to <code>yes</code>. This parameter is optional.
+
| noexpand  = true
−
 
+
| titletext = 'Wow, that must be why you swallow so many of them per year!' 'No, that's spiders. You swallow WAY more ants.'
−
The example above is produced by the following code:
+
}}
  
−
<pre>{{comic
+
{{comic
 
| number    = 3048
 
| number    = 3048
 
| date      = February 7, 2025
 
| date      = February 7, 2025
Line 82: Line 183:
 
| noexpand  = true
 
| 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.
 
| 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.
−
}}</pre>
+
}}
 +
 
 +
 
 +
{{comic
 +
| ognumber  = 7
 +
| ogtitle  = Hello there
 +
| ogttlabel = Libehuornel title
 +
| number    = 8
 +
| ognext    = 12
 +
| ogprev    = 8
 +
| 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
 +
| image    = pi.jpg
 +
| titletext = My most famous drawing, and one of the first I did for the site
 +
}}
 +
 
 +
{{comic/sandbox
 +
| ognumber  = 9
 +
| number    = 10
 +
| ogprev    = 8
 +
| ognext    = 12
 +
| ognote    =
 +
| date      = September 30, 2005
 +
| title    = Pi Equals
 +
| ogtitle    = Pi Equa
 +
| 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
 +
}}

Latest revision as of 02:14, 23 November 2025

This page is transcluded inside Template:comic as its documentation, so everyone can edit it.

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[edit]

{{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[edit]

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[edit]

    Pi Equals
    Original title: 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[edit]

      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
          Libehuornel title: Hello there
          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
          Original title: 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".
          Retrieved from "https://www.explainxkcd.com/wiki/index.php?title=Template:comic/doc&oldid=391476"