Difference between revisions of "Template:comic/sandbox"

Explain xkcd: It's 'cause you're dumb.
Jump to: navigation, search
Line 10: Line 10:
 
       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><!--
 +
 +
      Comic title in '''BOLD''' and in small caps, like on xkcd.com
 +
    -->{{#if:{{{title|}}}|<tr><td style="font-size: 21px; font-variant: small-caps; font-weight: 800; padding-bottom:10px">{{{title}}}</td></tr>}}<!--
  
 
       Now make an unordered list which will display as the navigation bar
 
       Now make an unordered list which will display as the navigation bar
  --><ul style="text-align: center; margin-bottom: 10px;" class="no-link-underline"><!--
+
    --><ul style="text-align: center; margin-bottom: 10px;" class="no-link-underline"><!--
  
 
       Generate the |< and prev buttons, but only if {{{number}}} exists and is greater than 1
 
       Generate the |< and prev buttons, but only if {{{number}}} exists and is greater than 1
Line 25: Line 28:
 
         -->[[1|<span style="color: #FFFFFF; padding: 0 12px;">&#124;&lt;</span>]]</li><!--
 
         -->[[1|<span style="color: #FFFFFF; padding: 0 12px;">&#124;&lt;</span>]]</li><!--
  
        We're not done here yet, make the back button next
+
        We're not done here yet, let's make the back button
 
         --><li style="background-color: #6E7B91;
 
         --><li style="background-color: #6E7B91;
 
               border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 
               border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
Line 31: Line 34:
 
               margin: 0 4px; padding: 1.5px 0;"><!--
 
               margin: 0 4px; padding: 1.5px 0;"><!--
  
               link to previous comic
+
               Link to the previous comic
 
           -->[[{{#expr:{{{number}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;">&lt;&nbsp;Prev</span>]]</li><!--
 
           -->[[{{#expr:{{{number}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;">&lt;&nbsp;Prev</span>]]</li><!--
  
Line 56: Line 59:
  
 
           Generate the title, with date if it exists
 
           Generate the title, with date if it exists
           --><span style="color: #FFFFFF; padding: 0 12px;">Comic&nbsp;<!--
+
           --><span style="color: #FFFFFF; padding: 0 12px;">Comic<!--
 
           -->{{#ifexpr:{{{number|-1}}}>= 1|&nbsp;&#35;|}}{{{number|}}}&nbsp;{{#if:{{{date|}}}|({{#replace:{{{date}}}| |&nbsp;}})}}</span>]</li><!--
 
           -->{{#ifexpr:{{{number|-1}}}>= 1|&nbsp;&#35;|}}{{{number|}}}&nbsp;{{#if:{{{date|}}}|({{#replace:{{{date}}}| |&nbsp;}})}}</span>]</li><!--
  
         Now make the next and >| buttons provided comic number exists
+
         Now make the next and >| buttons, provided the comic number exists
 
         -->{{#ifexist:{{#expr:{{{number|-2}}}+1}}<!--
 
         -->{{#ifexist:{{#expr:{{{number|-2}}}+1}}<!--
  
         No numbers higher than LATESTCOMIC
+
         Check if this is the LATESTCOMIC. If it is, then don't display the "Next" and >| buttons.
 
         -->|{{#ifexpr:{{LATESTCOMIC}}-{{{number}}}>0<!--
 
         -->|{{#ifexpr:{{LATESTCOMIC}}-{{{number}}}>0<!--
  
Line 83: Line 86:
 
     --></td></tr><!--
 
     --></td></tr><!--
  
     Now that the nav bar has been generated, display the rest of the filled-out comic template
+
     Now that the nav bar has been generated, display the rest if given.
 
 
    Comic title in =BOLD=
 
    -->{{#if:{{{title|}}}|<tr><td style="font-size: 21px; font-variant: small-caps; font-weight: 800; padding-bottom:10px">{{{title}}}</td></tr>}}<!--
 
  
 
     Display the (optional) text just before the comic
 
     Display the (optional) text just before the comic
 
     -->{{#if:{{{before|}}}|<tr><td style="padding-bottom:10px">{{{before}}}</td></tr>}}<!--
 
     -->{{#if:{{{before|}}}|<tr><td style="padding-bottom:10px">{{{before}}}</td></tr>}}<!--
  
     Almost done; just need to display the comic, title text and a bit more
+
     Almost done; just need to display the image, title text, and a bit more
 
     --><tr><td><!--
 
     --><tr><td><!--
  
Line 97: Line 97:
 
     -->{{#if: {{{custom|}}}|{{{custom|}}}<!--
 
     -->{{#if: {{{custom|}}}|{{{custom|}}}<!--
  
     Not going to replace the image, so let's draw that if it exists
+
     Now that we know we're not going to replace the image, let's display it if it exists
 
     -->|{{#if:{{{image|}}}|[[File:{{{image|}}}|{{{imagesize|}}}|{{{titletext|}}}]]}}}}<!--
 
     -->|{{#if:{{{image|}}}|[[File:{{{image|}}}|{{{imagesize|}}}|{{{titletext|}}}]]}}}}<!--
  
     {{{imagesize}}} will allow the comic to be shrinked if it's especially large
+
     {{{imagesize}}} will allow the comic to be shrunk if it's especially large
     {{{noexpand}}} will suppress the enlargement notice
+
 
 +
     {{{noexpand}}} will hide the "Click comic to enlarge" notice
 
     -->{{#ifeq:{{{noexpand|}}}|true||
 
     -->{{#ifeq:{{{noexpand|}}}|true||
 
         {{#if:{{{imagesize|}}}|<br />[Click comic to enlarge]}}
 
         {{#if:{{{imagesize|}}}|<br />[Click comic to enlarge]}}
 
       }}<!--
 
       }}<!--
  
     Final bit; if the comic has text on mouse-over, add that in a small print underneath the comic
+
     If the comic has a title text, then add it in a small print underneath the comic
     -->{{#if:{{{titletext|}}}|<br /><span style="{{{captionstyle|}}}"><span style="color:grey">Title text:</span> {{{titletext}}}<!--
+
     -->{{#if:{{{titletext|}}}|<br /><span style="margin-top:0.4em; display:inline-block; {{{captionstyle|}}}"><!--
 +
    --><span style="color:grey">'''[[Title text|Title&nbsp;text]]:'''</span> {{{titletext}}}<!--
 
     --></span>}}</td></tr></table><!--
 
     --></span>}}</td></tr></table><!--
  
     Categorisation for people who like that kind of thing
+
     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
     It otherwise sorts 'alphanumerically'; as in since the first char of 10 is 1, it would normally be placed before 9
+
     It otherwise sorts 'alphanumerically'; since the first character of "10" is "1", it would normally be placed before "9" even though it should be placed after
     The padding turns each into 0009 and 0010 etc. and since 0 is less than 1, #9 gets sorted before #10.
+
     The padding turns each into 0009 and 0010 etc. Now, since "0" is less than "1", #9 gets sorted before #10.
 
     -->{{#ifexpr:{{{number|-1}}}>=1|{{DEFAULTSORT: {{padleft:{{{number}}}|4}}}}|<!--
 
     -->{{#ifexpr:{{{number|-1}}}>=1|{{DEFAULTSORT: {{padleft:{{{number}}}|4}}}}|<!--
 
     -->}}<!--
 
     -->}}<!--
  
  Only categorise if in the main namespace
+
    Only categorise if the page is in the main namespace
  -->{{#ifeq:{{NAMESPACE}}|{{ns:0}}<!--
+
    -->{{#ifeq:{{NAMESPACE}}|{{ns:0}}<!--
  
  Don't try to categorise the main page nor the extra comics
+
    Don't try to categorise the Main Page nor the extra comics
  -->|{{#ifeq:{{FULLPAGENAME}}|{{int:mainpage}}||{{#ifeq:{{{extra|}}}|yes|[[Category:Extra comics]]|<!--
+
    -->|{{#ifeq:{{FULLPAGENAME}}|{{int:mainpage}}||{{#ifeq:{{{extra|}}}|yes|[[Category:Extra comics]]|<!--
  
 
     Alright, start putting it in the appropriate date categories
 
     Alright, start putting it in the appropriate date categories
     -->[[Category:All comics]]{{#if:{{{date|}}}|[[Category:Comics from {{#time:Y|{{{date}}}}}]]<!-- Years
+
     -->[[Category:All comics]]{{#if:{{{date|}}}|[[Category:Comics from {{#time:Y|{{{date}}}}}]] <!-- Years
 
     -->[[Category:Comics from {{#time:F|{{{date}}}}}]]                                          <!-- Months
 
     -->[[Category:Comics from {{#time:F|{{{date}}}}}]]                                          <!-- Months
 
     -->[[Category:{{#time:l|{{{date}}}}} comics]]                                                <!-- Weekdays
 
     -->[[Category:{{#time:l|{{{date}}}}} comics]]                                                <!-- Weekdays
 
     -->}}}}}}|}}<!--
 
     -->}}}}}}|}}<!--
--></includeonly><noinclude>
+
    --></includeonly><noinclude><!--
<!--   DOCUMENTATION 
+
 
  
  
 +
      DOCUMENTATION
  
-->
+
-->'''This template has an associated sandbox, available at [[Template:comic/sandbox]].'''
'''This template 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.
 
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.
  
== Sample ==
+
== Example ==
  
 
The following is a sample usage of this template:
 
The following is a sample usage of this template:

Revision as of 14:58, 18 April 2025

This template 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.

Example

The following is a sample usage of this template:

Monty Python -- Enough
I went to a dinner where there was a full 10 minutes of Holy Grail quotes exchanged, with no context, in lieu of conversation.  It depressed me badly.
Title text: I went to a dinner where there was a full 10 minutes of Holy Grail quotes exchanged, with no context, in lieu of conversation. It depressed me badly.

Usage

{{comic
| number    =
| date      =
| title     =
| before    =
| image     =
| custom    =
| imagesize =
| noexpand  =
| titletext =
| ldomain   =
| lappend   =
}}

Notes

  • At least the number, title, and image are required.
  • The date should be written in the form: January 1, 2006
  • The imagesize field is optional.
    • The comic's width will be limited to the set size. Format must be in pixels (eg: "350px")
    • The comic's height may be set by adding an 'x' to the start (eg: "x350px")
    • Warning: If the imagesize is larger than the image, the image will be stretched.
  • The noexpandfield is optional.
    • It is used in conjunction with imagesize, hiding the "Click comic to enlarge" button
    • To use this option, you must set it to true
  • before is a special field for inserting text before the comic. One use is for extremely large comics (e.g., 1732: Earth Temperature Timeline), to skip to the explanation.
  • If the custom field is not empty, the image field will be ignored and be replaced with any text that you put in the custom field.
  • If number is left undefined, most of the navigation bar will be disabled.
    • lappend must be defined as
      ...kd.com/LAPPEND/
      to keep the link to xkcd.com valid.
    • For example, if the link is to a blog post (blog.xkcd.com), ldomain can be defined as
      blog
      to change the subdomain in the link.

The above sample is produced by the following code:

{{comic
| number    = 16
| date      = October 4, 2005
| title     = Monty Python -- Enough
| image     = monty_python.jpg
| titletext = I went to a dinner where there was a full 10 minutes of Holy Grail quotes exchanged, with no context, in lieu of conversation.  It depressed me badly.
}}