Difference between revisions of "Template:comic/sandbox"
(title="") |
|||
| Line 33: | Line 33: | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
link to #1 | link to #1 | ||
| − | -->[[1: Barrel - Part 1|<span style="color: #FFFFFF; padding: 0 12px;">|<</span>]]</li><!-- | + | -->[[1: Barrel - Part 1|<span style="color: #FFFFFF; padding: 0 12px;" title="">|<</span>]]</li><!-- |
We're not done here yet, let's make the back button | We're not done here yet, let's make the back button | ||
| Line 42: | Line 42: | ||
Link to the previous comic | Link to the previous comic | ||
| − | -->[[{{#expr:{{{number|2}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;">< Prev</span>]]</li><!-- | + | -->[[{{#expr:{{{number|2}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;" title="">< Prev</span>]]</li><!-- |
{{{number}}} doesn't exist or is less than 1; just put non-breaking spaces here | {{{number}}} doesn't exist or is less than 1; just put non-breaking spaces here | ||
| Line 80: | Line 80: | ||
display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
| − | -->[[{{#expr:{{{number|0}}}+1}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;">Next ></span>]]</li><!-- | + | -->[[{{#expr:{{{number|0}}}+1}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;" title="">Next ></span>]]</li><!-- |
Make a button that points to LATESTCOMIC (which is of course the latest comic) | Make a button that points to LATESTCOMIC (which is of course the latest comic) | ||
| Line 87: | Line 87: | ||
display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
| − | -->[[{{LATESTCOMIC}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;">>|</span>]]</li><!-- | + | -->[[{{LATESTCOMIC}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;" title="">>|</span>]]</li><!-- |
Comic number (plus one) is the latest, so don't show the buttons | Comic number (plus one) is the latest, so don't show the buttons | ||
| Line 138: | Line 138: | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
link to #1 | link to #1 | ||
| − | -->[[7: Girl sleeping (Sketch -- 11th grade Spanish class)|<span style="color: #6E7B91; padding: 0 12px;">|<</span>]]</li><!-- | + | -->[[7: Girl sleeping (Sketch -- 11th grade Spanish class)|<span style="color: #6E7B91; padding: 0 12px;" title="">|<</span>]]</li><!-- |
Let's make the back button! | Let's make the back button! | ||
| Line 147: | Line 147: | ||
Link to the previous comic | Link to the previous comic | ||
| − | -->[[{{{ogprev}}}|<span style="color: #6E7B91; padding: 0 12px;">< OG Prev (Comic #{{{ogprev|}}})</span>]]</li><!-- | + | -->[[{{{ogprev}}}|<span style="color: #6E7B91; padding: 0 12px;" title="">< OG Prev (Comic #{{{ogprev|}}})</span>]]</li><!-- |
{{{ognumber}}} is 7; just put non-breaking spaces here | {{{ognumber}}} is 7; just put non-breaking spaces here | ||
| Line 198: | Line 198: | ||
display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
| − | -->[[{{{ognext}}}|<span style="color: #6E7B91; padding: 0 12px;">OG Next > (Comic #{{{ognext}}})</span>]]</li><!-- | + | -->[[{{{ognext}}}|<span style="color: #6E7B91; padding: 0 12px;" title="">OG Next > (Comic #{{{ognext}}})</span>]]</li><!-- |
Make a button that points to 55 (which is the latest LiveJournal comic) | Make a button that points to 55 (which is the latest LiveJournal comic) | ||
| Line 205: | Line 205: | ||
display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
| − | -->[[55: Useless{{!}}<span style="color: #6E7B91; padding: 0 12px;">>|</span>]]</li><!-- | + | -->[[55: Useless{{!}}<span style="color: #6E7B91; padding: 0 12px;" title="">>|</span>]]</li><!-- |
Comic number (plus one) is the latest, so don't show the buttons | Comic number (plus one) is the latest, so don't show the buttons | ||
| Line 236: | Line 236: | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
link to #1 | link to #1 | ||
| − | -->[[1: Barrel - Part 1|<span style="color: #FFFFFF; padding: 0 12px;">|<</span>]]</li><!-- | + | -->[[1: Barrel - Part 1|<span style="color: #FFFFFF; padding: 0 12px;" title="">|<</span>]]</li><!-- |
We're not done here yet, let's make the back button | We're not done here yet, let's make the back button | ||
| Line 271: | Line 271: | ||
display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
| − | -->[[{{#expr:{{{number|0}}}+1}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;">Next ></span>]]</li><!-- | + | -->[[{{#expr:{{{number|0}}}+1}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;" title="">Next ></span>]]</li><!-- |
Make a button that points to LATESTCOMIC (which is of course the latest comic) | Make a button that points to LATESTCOMIC (which is of course the latest comic) | ||
| Line 278: | Line 278: | ||
display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600; | ||
margin: 0 4px; padding: 1.5px 0;"><!-- | margin: 0 4px; padding: 1.5px 0;"><!-- | ||
| − | -->[[{{LATESTCOMIC}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;">>|</span>]]</li><!-- | + | -->[[{{LATESTCOMIC}}{{!}}<span style="color: #FFFFFF; padding: 0 12px;" title="">>|</span>]]</li><!-- |
Comic number (plus one) is the latest, so don't show the buttons | Comic number (plus one) is the latest, so don't show the buttons | ||
Revision as of 10:11, 22 April 2025
| Air Fact |
Title text: 'Wow, that must be why you swallow so many of them per year!' 'No, that's spiders. You swallow WAY more ants.' |
| Suspension Bridge |
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. |
| Pi Equals |
| Original title: Pi equals |
![]() Title text: My most famous drawing, and one of the first I did for the site |
| Pi Equals |
| Original title: Pi equals |
![]() Title text: My most famous drawing, and one of the first I did for the site |
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.
Usage
{{comic
| number =
| date =
| title =
| ognumber =
| oglink =
| ogttlabel =
| ogtitle =
| ogprev =
| ognote =
| ognext =
| before =
| image =
| custom =
| imagesize =
| noexpand =
| titletext =
| ttstyle =
| bodystyle =
| bodyclass =
| extra =
| ldomain =
| lappend =
}}
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.
Note that, if the |
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:
|
Example 1
| Suspension Bridge |
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 |
| Original title: Pi equals |
![]() Title text: My most famous drawing, and one of the first I did for the site |
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 |
Title text: 'Wow, that must be why you swallow so many of them per year!' 'No, that's spiders. You swallow WAY more ants.' |
| Suspension Bridge |
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. |
| Pi Equals |
| Libehuornel title: Hello there |
![]() Title text: My most famous drawing, and one of the first I did for the site |
| Pi Equals |
| Original title: Pi equals |
![]() Title text: My most famous drawing, and one of the first I did for the site |

