Editing Template:Comic

<includeonly>
<table style="text-align: center; width:98%;font-size: 88%;"><!--

      This table will contain a table row (tr) and cell (td)
   --><tr><td><!--

      Now make an unordered list which will display as the navigation bar
   --><ul style="display: flex; height: auto; justify-content: center; margin: 0 0 20px 0;" class="no-link-underline"><!--

      Generate the |< and prev buttons, but only if {{{number}}} exists and is greater than 1
     -->{{#ifexpr:{{{number|-1}}}>1<!--

        {{{number}}} is greater than 1; make a list item and put a button in it that links to #1
       -->|<li style="background-color: transparent;
              border-radius: 1px;
              display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
              -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--
              link to #1
         -->[[1|<span style="color: #fff; padding: 0 12px;">&lt;&lt;</span>]]</li><!--

        We're not done here yet, make the back button next
         --><li style="background-color: transparent;
              border-radius: 1px;
              display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
              -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--

              link to previous comic
           -->[[{{#expr:{{{number}}}-1}}|<span style="color: #fff; padding: 0 12px;">&lt;</span>]]</li><!--

              {{{number}}} doesn't exist or is less than 1; just put non-breaking spaces here
              -->|&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;}}<!--

        Regardless of {{{number}}}, we need to make the comic date, link etc.
      --><li style="background-color: #fa9b63;
          border-radius: 1px;
          display: flex; font-size: 17px; font-variant: small-caps; font-weight: 600;
          margin: auto 1em; padding: 0.5em 0.75em;"
          class="plainlinks">
          <div style="display: block; margin: auto 1em;"><!--

          [ and ] makes an external link, vs. [[ and ]] which are internal only.
          Depending whether {{{number}}} exists or not, toggle between using wide link mode or number link mode.
          Wide link mode requires {{{lappend}}} to be set, while {{{ldomain}}} can default to www
          -->[{{#ifexpr:{{{number|-1}}}>=1<!--

          Comic number is probably valid, use number link mode
          -->|https://www.smbc-comics.com/comic/{{{title}}}<!--

          Comic number is invalid or doesn't exist, use wide link mode
          -->|http://{{{ldomain|www}}}.smbc-comics.com/{{{lappend}}}/}}<!--

          Generate the title, with date if it exists
          --><span style="color: #592305; padding: 0;">Comic&nbsp;<!--
          -->{{#ifexpr:{{{number|-1}}}>= 1|&#35;|}}{{{number|}}}&nbsp;{{#if:{{{date|}}}|({{{date}}})}}</span>]
</div></li><!--

        Now make the next and >| buttons provided comic number exists
        -->{{#if:true<!--

        No numbers higher than LATESTCOMIC
        -->|{{#ifexpr:{{LATESTCOMIC}}-{{{number}}}>0<!--

        Comic number is valid, generate the buttons
        -->|<li style="background-color: transparent;
              border-radius: 1px;
              display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
              -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--
        -->[[{{#expr:{{{number}}}+1}}{{!}}<span style="color: #fff; padding: 0 12px;">&gt;</span>]]</li><!--

        Make a button that points to LATESTCOMIC (which is of course the latest comic)
        --><li style="background-color: transparent;
              border-radius: 1px;
              display: inline-block; font-size: 40px; font-variant: small-caps; font-weight: 900;
              -webkit-text-stroke: 2.5px #ff5402; margin: auto 0.5em; padding: 0; height: 100%;"><!--
              -->[[{{LATESTCOMIC}}{{!}}<span style="color: #fff; padding: 0 12px;">&gt;&gt;</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;}}|&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:{{{name|}}}|<tr><td style="font-size: 30px; padding-bottom:10px">'''{{{name}}}'''</td></tr>|{{#if:{{{title|}}}|<tr><td style="font-size: 30px; 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
    {{{noexpand}}} will suppress the enlargement notice
    -->{{#ifeq:{{{noexpand|}}}|true||
         {{#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>
==Votey==
{{#if: {{{customvotey|}}}|{{{customvotey|}}}|{{#if:{{{votey|}}}|[[File:{{{votey|}}}{{{voteysize|}}}]]}}}}{{#ifeq:{{{noexpand|}}}|true||{{#if:{{{imagesize|}}}|<br />[Click comic to enlarge]}}}}



{{#ifexpr:{{{number|-1}}}>=1|{{DEFAULTSORT: {{padleft:{{{number}}}|4}}}}|}}{{#ifeq:{{NAMESPACE}}|{{ns:0}}|{{#ifeq:{{FULLPAGENAME}}|{{int:mainpage}}||{{#ifeq:{{{extra|}}}|yes|[[Category:Extra comics]]|[[Category:All comics]]{{#if:{{{date|}}}|[[Category:Comics from {{#time:Y|{{{date}}}}}]]
[[Category:Comics from {{#time:F|{{{date}}}}}]]
[[Category:{{#time:l|{{{date}}}}} comics]]}}}}}}|}}
</includeonly>
<noinclude>

<!--    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.

== Sample ==

The following is a sample usage of this template:
{{comic
| number    = 1127
| date      = March 25, 2008
| title     = 2008-03-25
| name      = 2008-03-25
| image     = 20080325.gif
| votey     = 20080325after.gif
| titletext = 2008-03-25
}}

== Usage ==

<pre>{{comic
| number    =
| date      =
| title     =
| name      =
| before    =
| image     =
| custom    =
| customvotey=
| imagesize =
| noexpand  =
| titletext =
| ldomain   =
| lappend   =
}}</pre>

=== Notes ===

The above sample is produced by the following code:

<pre>{{comic
| number    = 1127
| date      = March 25, 2008
| title     = 2008-03-25
| name      = 2008-03-25
| image     = 20080325.gif
| votey     = 20080325after.gif
| titletext = 2008-03-25
}}</pre>

[[Category:Templates]]
</noinclude>