Editing User:Pixali/comictemplate/

Jump to: navigation, search

Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
<!-- The old template with my changes is broken as hell. This is a rewritten version. -->
+
<includeonly><!--
<includeonly><metadesc>Explain xkcd is a wiki dedicated to explaining the webcomic xkcd. Go figure.</metadesc><!--
+
--><metadesc>Explain xkcd is a wiki dedicated to explaining the webcomic xkcd. Go figure.</metadesc><!--
 +
--><table class="{{{bodyclass|}}}" cellspacing="5"
 +
          style="background-color: #FFFFFF; border: 1px solid #AAAAAA; color: black; font-size: 88%; line-height: 1.5em;
 +
                margin: 0.5em 0 0.5em 1em; padding: 0.2em; text-align: center; width:98%; {{{bodystyle|}}}"><!--
  
   Create the 'box' around the comic template
+
  ### Navigation bar (previous, next...) ###
 
+
 
  --><table class="{{{bodyclass|}}}" cellspacing="5" style="background-color: #FFFFFF;
+
   --><tr><td><!--
      border: 1px solid #AAAAAA; color: black; font-size: 88%;
+
 
       line-height: 1.5em; margin: 0.5em 0 0.5em 1em; padding: 0.2em;
+
    ### Generate the |< button ###
      text-align: center; width:98%; {{{bodystyle|}}}"><!--
+
### Special case modification: the ifeq has been replaced with switch to make undefined numbers work and make the navigation bar go *poof* when this happens ###
 +
    --><ul style="text-align: center; margin-bottom: 10px;" class="no-link-underline"><!--
 +
    -->{{#switch: {{{number|-1}}} | 1=&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<!--
 +
-->-1==&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|<!--
 +
    --><li style="background-color: #6E7B91;
 +
                      border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 +
                      display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 +
                      margin: 0 4px; padding: 1.5px 0;"><!--
 +
          -->[[1|<span style="color: #FFFFFF; padding: 0 12px;">&#124;&lt;</span>]]<!--
 +
        --></li> <!--
 +
      ### Create the prev button ###
 +
 
 +
    --><li style="background-color: #6E7B91;
 +
                    border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 +
                    display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 +
                    margin: 0 4px; padding: 1.5px 0;"><!--
 +
        -->[[{{#expr:{{{number}}} - 1}}|<span style="color: #FFFFFF; padding: 0 12px;">&lt;&nbsp;Prev</span>]]<!--
 +
      --></li>}} <!--
 +
 
 +
      ### Create a centre button with comic number, date (if exists) and link ###
 +
 
 +
       --><li style="background-color: #6E7B91;
 +
                    border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 +
                    display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 +
                    margin: 0 4px; padding: 1.5px 0;"
 +
            class="plainlinks"><!--
 +
### Special case modification; if number is undefined ldomain and link must be defined to redirect comic link to elsewhere on xkcd.com ###
 +
        -->[{{#ifeq:{{{number|-1}}}|-1|http://{{{ldomain}}}.xkcd.com/{{{lappend}}}/|http://www.xkcd.com/{{{number}}}/}} <!--
 +
        --><span style="color: #FFFFFF; padding: 0 12px;">Comic&nbsp;&#35;{{{number}}}&nbsp;{{#if:{{{date|}}}|({{{date}}})}}</span>]<!--
 +
      --></li> <!--
 +
 
 +
      ### Generate the "next" button, and have it point to the next comic, unless the current number matches LATESTCOMIC ###
 +
### Special case modification; if number is left undefined it will default to -1 which results in an invalid comic number which then disables the next button. ###
 +
      -->{{#ifexist:{{#expr:{{{number|-1}}} + 1}}<!--
 +
      -->|<li style="background-color: #6E7B91;
 +
                      border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 +
                      display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 +
                      margin: 0 4px; padding: 1.5px 0;"><!--
 +
          -->[[{{#expr:{{{number}}} + 1}}|<span style="color: #FFFFFF; padding: 0 12px;">Next&nbsp;&gt;</span>]]<!--
 +
        --></li> <!--
 
        
 
        
      This table will contain a table row (tr) and cell (td)
+
 
  --><tr><td><!--
+
### Generate a button that points to the page specified by LATESTCOMIC: the latest comic. ###
 
+
      --><li style="background-color: #6E7B91;
      Now make an unordered list which will display as the navigation bar
+
                      border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
  --><ul style="text-align: center; margin-bottom: 10px;" class="no-link-underline"><!--
+
                      display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 
+
                      margin: 0 4px; padding: 1.5px 0;"><!--
      Generate the |< and prev buttons, but only if {{{number}}} exists and is greater than 1
+
          -->[[{{LATESTCOMIC}}|<span style="color: #FFFFFF; padding: 0 12px;">&gt;&#124;</span>]]<!--
    -->{{#ifexpr:{{{number|-1}}}>1<!--
+
        --></li><!--
   
+
      -->}}<!--
        {{{number}}} is greater than 1; make a list item and put a button in it that links to #1
+
### Undefined numbers should also make this work now. ###
      -->|<li style="background-color: #6E7B91;
+
      -->{{#ifexist:{{#expr:{{{number|-1}}} + 1}}||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}<!--
              border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
+
    --></ul><!--
              display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
+
  --></td></tr><!--
              margin: 0 4px; padding: 1.5px 0;"><!--
+
 
              link to #1
+
 
        -->[[1|<span style="color: #FFFFFF; padding: 0 12px;">&#124;&lt;</span>]]</li><!--
+
 
       
+
  ### Comic title ###
        We're not done here yet, make the back button next
+
 
        --><li style="background-color: #6E7B91;
+
  -->{{#if:{{{title|}}}|<tr><td style="font-size: 20px; padding-bottom:10px"><!--
              border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
+
    -->'''{{{title}}}'''<!--
              display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
+
  --></td></tr>}}<!--
              margin: 0 4px; padding: 1.5px 0;"><!--
+
 
             
+
  ### Text before comic ###
              link to previous comic
+
 
          -->[[{{#expr:{{{number}}}-1}}|<span style="color: #FFFFFF; padding: 0 12px;">&lt;&nbsp;Prev</span>]]</li><!--
+
  -->{{#if:{{{before|}}}|<tr><td style="padding-bottom:10px"><!--
             
+
    -->{{{before}}}<!--
              {{{number}}} doesn't exist or is less than 1; just put non-breaking spaces here
+
  --></td></tr>}}<!--
              -->|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}<!--
+
 
       
+
  ### Comic image and title text ###
        Regardless of {{{number}}}, we need to make the comic date, link etc.
+
 
      --><li style="background-color: #6E7B91;
+
  --><tr><td><!--
          border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
+
  -->{{#if: {{{custom|}}} |<!--
          display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
+
    -->{{{custom|}}}|<!--
          margin: 0 4px; padding: 1.5px 0;"
+
    -->{{#if:{{{image|}}}|[[File:{{{image|}}}|{{{imagesize|}}}|{{{titletext|}}}]]}}}}<!--
          class="plainlinks"><!--
+
  -->{{#if:{{{imagesize|}}}|<br />[Click comic to enlarge]}}<!--
         
+
  -->{{#if:{{{titletext|}}}|<br /><span style="{{{captionstyle|}}}"><span style="color:grey">Title text:</span> {{{titletext}}}</span>}}<!--
          [ and ] makes an external link, vs. [[ and ]] which are internal only.
+
  --></td></tr><!--
          Depending whether {{{number}}} exists or not, toggle between using wide link mode or number link mode.
+
--></table><!--
          Wide link mode requires {{{lappend}}} to be set, while {{{ldomain}}} can default to www
+
 
          -->[{{#ifexpr:{{{number|-1}}}>=1<!--
+
  ### Add categories to comic based on date field ###
         
+
 
          Comic number is probably valid, use number link mode
+
-->{{DEFAULTSORT:&nbsp;{{padleft:{{{number}}}|4}}}}<!-- (default sorting key for all categories: use zero-padding to make sure #9 comes before #10, etc.)
          -->|http://www.xkcd.com/{{{number}}}/<!--
+
-->{{#ifeq:{{NAMESPACE}}|{{ns:0}}|<!-- (no categorization except for the main namespace)
         
+
  -->{{#ifeq:{{FULLPAGENAME}}|{{int:mainpage}}||<!-- (no categorization when transcluded into the main page)
          Comic number is invalid or doesn't exist, use wide link mode
+
    -->[[Category:Comics]]<!--
          -->|http://{{{ldomain|www}}}.xkcd.com/{{{lappend}}}/}}<!--
+
    -->{{#if:{{{date|}}}|<!--
         
+
      -->[[Category:Comics from {{#time:Y|{{{date}}}}}]]<!-- (categorize by year)
          Generate the title, with date if it exists
+
      -->[[Category:Comics from {{#time:F|{{{date}}}}}]]<!-- (categorize by month)
          --><span style="color: #FFFFFF; padding: 0 12px;">Comic&nbsp;<!--
+
      -->[[Category:{{#time:l|{{{date}}}}} comics]]<!-- (categorize by weekday)
          -->{{#ifexpr:{{{number|-1}}}>= 1|&#35;|}}{{{number|}}}&nbsp;{{#if:{{{date|}}}|({{{date}}})}}</span>]</li><!--
 
         
 
        Now make the next and >| buttons provided comic number exists
 
        -->{{#ifexist:{{#expr:{{{number|-1}}}+1}}<!--
 
       
 
        Comic number is valid, generate the buttons
 
        -->|<li style="background-color: #6E7B91;
 
              border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 
              display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 
              margin: 0 4px; padding: 1.5px 0;"><!--
 
        -->[[{{#expr:{{{number}}}+1}}|<span style="color: #FFFFFF; padding: 0 12px;">Next&nbsp;&gt;</span>]]</li><!--
 
       
 
        Make a button that points to LATESTCOMIC (which is of course the latest comic)
 
        --><li style="background-color: #6E7B91;
 
              border: 1.5px solid #333333; border-radius: 3px 3px 3px 3px; box-shadow: 0 0 5px 0 gray;
 
              display: inline; font-size: 16px; font-variant: small-caps; font-weight: 600;
 
              margin: 0 4px; padding: 1.5px 0;"><!--
 
              -->[[{{LATESTCOMIC}}|<span style="color: #FFFFFF; padding: 0 12px;">&gt;&#124;</span>]]</li><!--
 
       
 
        Comic number (plus one) is not valid, don't show the buttons
 
        -->|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}</ul><!--
 
    --></td></tr><!--
 
   
 
    Now that the nav bar has been generated, display the rest of the filled-out comic template
 
   
 
    Comic title in =BOLD=
 
    -->{{#if:{{{title|}}}|<tr><td style="font-size: 20px; padding-bottom:10px">'''{{{title}}}'''</td></tr>}}<!--
 
   
 
    Display the (optional) text just before the comic
 
    -->{{#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
 
    --><tr><td><!--
 
   
 
    {{{custom}}} will replace the image with whatever it contains if it exists
 
    -->{{#if: {{{custom|}}}|{{{custom|}}}<!--
 
   
 
    Not going to replace the image, so let's draw that if it exists
 
    -->|{{#if:{{{image|}}}|[[File:{{{image|}}}|{{{imagesize|}}}|{{{titletext|}}}]]}}}}<!--
 
   
 
    {{{imagesize}}} will allow the comic to be shrinked if it's especially large
 
    -->{{#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:{{{titletext|}}}|<br /><span style="{{{captionstyle|}}}"><span style="color:grey">Title text:</span> {{{titletext}}}<!--
 
    --></span>}}</td></tr></table><!--
 
   
 
    Categorisation for people who like that kind of thing
 
   
 
    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
 
    The padding turns each into 0009 and 0010 etc. and since 0 is less than 1, #9 gets sorted before #10.
 
    -->{{#ifexpr:{{{number|-1}}}>=1|{{DEFAULTSORT:&nbsp;{{padleft:{{{number}}}|4}}}}|<!--
 
 
     -->}}<!--
 
     -->}}<!--
   
+
   -->}}<!--
  Only categorise if in the main namespace
+
-->|}}<!--
   -->{{#ifeq:{{NAMESPACE}}|{{ns:0}}<!--
+
 
 
+
  ### DOCUMENTATION ###
  Don't try to categorise the main page
+
 
  -->|{{#ifeq:{{FULLPAGENAME}}|{{int:mainpage}}<!--
 
 
 
    Alright, start putting it in the appropriate date categories
 
    -->||[[Category:Comics]]{{#if:{{{date|}}}|[[Category:Comics from {{#time:Y|{{{date}}}}}]]<!-- Years
 
    -->[[Category:Comics from {{#time:F|{{{date}}}}}]]                                      <!-- Months
 
    -->[[Category:{{#time:l|{{{date}}}}} comics]]                                            <!-- Weekdays
 
    -->}}}}|}}<!--
 
 
--></includeonly><noinclude>
 
--></includeonly><noinclude>
<!-- and now for the documentation. -->
+
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 an upgraded version that has support for undefined numbers; allowing use with comics that are not present in the main series (for example, [[Radiation]]).
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 an upgraded version that has support for undefined/invalid numbers; allowing use with comics that are not present in the main series (for example, [[Radiation]]).
 
  
 
== Sample ==
 
== Sample ==
  
 
The following is a sample usage of this template:
 
The following is a sample usage of this template:
(see [[User_talk:Pixali/comictemplate/|talk page]])
+
(see talk page?)
  
 
== Usage ==
 
== Usage ==
  
 
<pre>{{comic
 
<pre>{{comic
| number    =
+
| number    =  
| date      =
+
| date      =  
| title    =
+
| title    =  
 
| before    =
 
| before    =
| image    =
+
| image    =  
| custom    =
+
| custom    =  
| imagesize =
+
| imagesize =  
| titletext =
+
| titletext =  
| ldomain  =
+
| ldomain  =  
| lappend  =
+
| link      =  
 
}}</pre>
 
}}</pre>
  
Line 153: Line 133:
 
* At least the number, title and image are required.
 
* At least the number, title and image are required.
 
* The date should be written in the form: January 1, 2006
 
* The date should be written in the form: January 1, 2006
* The imagesize field is optional.
+
* 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 '''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")
 
** The comic's '''height''' may be set by adding an 'x' to the start (eg: "x350px")
** Warning: If the size is larger than the image, the image will be stretched.
+
** Warning: If the size is larger than the image, the image will be stretched.  
 
* '''before''' is a special field for inserting text before the comic. One use is for extremely large comics (e.g. [[Umwelt]]), to skip to the explanation.
 
* '''before''' is a special field for inserting text before the comic. One use is for extremely large comics (e.g. [[Umwelt]]), 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 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.
+
* if '''number''' is left undefined, most of the navigation bar will be disabled and '''ldomain''' along with '''link''' must be defined to keep the link to xkcd.com valid.
** '''lappend''' must be defined as <pre>...kd.com/'''lappend'''/</pre> to keep the link to xkcd.com valid.
 
** If the link is to eg. a blog post (blog.xkcd.com) '''ldomain''' can be defined as <pre>blog</pre> to change the subdomain in the link.
 
  
The example in [[User_talk:Pixali/comictemplate/|the talk page]] is produced by the following code:
+
The above sample is produced by the following code:
  
 
<pre>{{User:Pixali/comictemplate/
 
<pre>{{User:Pixali/comictemplate/
 +
| number    =
 
| date      = October 4, 2005
 
| date      = October 4, 2005
 
| title    = Example with different link
 
| title    = Example with different link
| image    = schrodinger.jpg
+
| 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.
 
| 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.
 
| ldomain  = www
 
| ldomain  = www
| lappend  = radiation
+
| link      = radiation
 
}}</pre>
 
}}</pre>
 
</noinclude>
 
</noinclude>

Please note that all contributions to explain xkcd may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see explain xkcd:Copyrights for details). Do not submit copyrighted work without permission!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Cancel | Editing help (opens in new window)