Template:Chat: Difference between revisions
From VNDev Wiki
Tale glider (talk | contribs) Partially undo my last edit as it didn't seem to work on mobile |
added more message lines (up to 15); nested if statements to improve load time |
||
| (17 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<div style="display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;"> | <div style="display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;"> | ||
<div style="flex-grow: 0; flex-wrap: wrap;" class="circular"><p style="margin: | <div style="flex-grow: 0; flex-wrap: wrap;" class="circular"><p style="margin:3px;"> | ||
{{#switch: {{{name|{{{1|}}}}}} | {{#switch: {{{name|{{{1|}}}}}} | ||
| Plum = [[File:Plum PFP 2024.png| | | Plum|P = [[File:Plum PFP 2024.png|50px|alt=""]] | ||
| Lemon = [[File:Lemon PFP 2024.png| | | Lemon|Le = [[File:Lemon PFP 2024.png|50px|alt=""]] | ||
| Cherry = [[File:Cherry PFP 2024.png| | | Cherry|C = [[File:Cherry PFP 2024.png|50px|alt=""]] | ||
| Lime = [[File:Lime PFP 2024.png| | | Lime|Li = [[File:Lime PFP 2024.png|50px|alt=""]] | ||
| #default = {{#if:{{{image|}}} | [[{{{image}}}| | | PD|Pd = [[File:Plum PFP Dogboy.png|50px|alt=""]] | ||
}}<noinclude>[[File:Lime PFP 2024.png| | | Stella|S = [[File:Stella PFP.png|50px|alt=""]] | ||
| #default = {{#if:{{{image|}}} | [[{{{image}}}|50px|alt=""]] | }} | |||
}}<noinclude>[[File:Lime PFP 2024.png|50px|alt=""]]</noinclude></p> | |||
</div> | </div> | ||
<div style="flex-shrink: 0; flex-grow: 1; flex-wrap: wrap; padding-left: | <div style="flex-shrink: 0; flex-grow: 1; flex-wrap: wrap; padding-left: 0.5em; padding-right: 1em; padding-bottom: 1ex; max-width: 80%;"> | ||
<div><p style="margin:0;"> | <div><p style="margin:0;">{{#switch: {{{name|{{{1|}}}}}} | ||
{{#switch: {{{name|{{{1|}}}}}} | | P | PD | Pd | Plum = <span style="color:purple"> | ||
| Plum = <span style="color:purple"> | | S | Stella | ||
| Lemon = <span style="color:goldenrod"> | | Le | Lemon = <span style="color:goldenrod"> | ||
| Cherry = <span style="color:crimson"> | | C | Cherry = <span style="color:crimson"> | ||
| Lime = <span style="color: | | Li | Lime = <span style="color:forestgreen"> | ||
| #default = <span style="color:{{{color|}}}"> | | #default = <span style="color:{{{color|}}}"> | ||
}}<strong>{{{name|{{{1|Unknown User}}}}}}</strong></span></p> | }} | ||
<strong>{{#switch: {{{name|{{{1|}}}}}} | |||
| P | PD | Pd = Plum | |||
| Le = Lemon | |||
| C = Cherry | |||
| Li = Lime | |||
| S = Stella | |||
| #default = {{{name|{{{1|Unknown User}}}}}} | |||
}}</strong></span></p> | |||
</div> | </div> | ||
<div>{{{ | <div><span style="font-size: | ||
{{#switch: {{{size|{{{size1|}}}}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message|{{{message1|{{{2|<noinclude>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt consectetur dolor non sodales. Sed egestas varius posuere.</noinclude>}}}}}}}}}</span><!-- | |||
-->{{#if:{{{message2|{{{3|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size2|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message2|{{{3|}}}}}}</span> <!-- | |||
-->{{#if:{{{message3|{{{4|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size3|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message3|{{{4|}}}}}}</span> <!-- | |||
-->{{#if:{{{message4|{{{5|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size4|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message4|{{{5|}}}}}}</span> <!-- | |||
-->{{#if:{{{message5|{{{6|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size5|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message5|{{{6|}}}}}}</span> <!-- | |||
-->{{#if:{{{message6|{{{7|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size6|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message6|{{{7|}}}}}}</span> <!-- | |||
-->{{#if:{{{message7|{{{8|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size7|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message7|{{{8|}}}}}}</span> <!-- | |||
-->{{#if:{{{message8|{{{9|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size8|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message8|{{{9|}}}}}}</span> <!-- | |||
-->{{#if:{{{message9|{{{10|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size9|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message9|{{{10|}}}}}}</span> <!-- | |||
-->{{#if:{{{message10|{{{11|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size10|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message10|{{{11|}}}}}}</span> <!-- | |||
-->{{#if:{{{message11|{{{12|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size11|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message11|{{{12|}}}}}}</span><!-- | |||
-->{{#if:{{{message12|{{{13|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size12|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message12|{{{13|}}}}}}</span><!-- | |||
-->{{#if:{{{message13|{{{14|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size13|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message13|{{{14|}}}}}}</span><!-- | |||
-->{{#if:{{{message14|{{{15|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size14|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message14|{{{15|}}}}}}</span> <!-- | |||
-->{{#if:{{{message15|{{{16|}}}}}} | |||
|<br /><span style="font-size: | |||
{{#switch: {{{size15|}}} | |||
| l | L | large = 170%; | |||
| s | S | small = 80%; | |||
}}">{{{message15|{{{16|}}}}}}</span> | |||
|}}|}}|}}|}}|}}|}}|}}|}}|}}|}}|}}|}}|}}|}}</div> | |||
</div> | </div> | ||
</div><noinclude | </div><noinclude>{{documentation}}</noinclude> | ||
Latest revision as of 09:50, 19 December 2024
Unknown User
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt consectetur dolor non sodales. Sed egestas varius posuere.
This template emulates the appearance of a Discord chat message. It is heavily used in List of DevTalk daily message skits.
Basic Usage
{{chat
| name = <!-- A string, or a shortcut (see below); the name of the user sending the message -->
| message = <!-- A string; message content. -->
| image = <!-- Profile picture. Enter as File:x.png without [[ ]]. -->
| color = <!-- Optional: Color to apply to the name. Default black -->
| size = <!-- Optional: Adjust the size of the message text. Use l, L, large, s, S, or small -->
}}
If name and/or message are unspecified, the first and second unlabeled parameters (respectively) will be used instead. This allows quicker use, especially if combined with shortcuts. For example:
{{chat|P|This is a message!}}
will produce:
Plum
This is a message!
Shortcuts
Shortcuts are supported for the DevTalk mascots. When name is one of these values, image and color will be automatically populated. Shortened versions of the mascots' names entered for the name field will also be replaced by the full name (ex. P becomes Plum).
PlumorPfor Plum.LemonorLefor Lemon.CherryorCfor Cherry.LimeorLifor Lime.PDfor the dogboy version of Plum.StellaorSfor Stella
Multi-line messages
The template also has support for messages with several lines. (In Discord, these are actually multiple message sent by the same user in succession.) The size of each line can be specified individually.
{{chat
| <!-- Unlabeled name parameter -->
| message1 =
| message2 =
| message3 =
...
| message15 =
| size1 =
| size2 =
| size3 =
...
| size15 =
}}
For messagex parameters, the parameter name can be omitted. If this is done, unnamed parameters will be used in order (allowing for the name as the first unlabeled parameter).
message1 and size1 can be replaced with message and size if desired.
Skipping message numbers (e.g. specifying message3 but not message2) is not supported.
Emoji
When adding emoji, image files may be inserted directly within the message field.
For example: [[File:PainLemon.png|25px|alt="Pain Lemon emoji"]]
The following sizes are recommended to emulate Discord behavior:
- 50px for one to three emoji with no text in the same line
- 25px for emoji with text on one or both sides, or for a series of four or more emoji
- 18px for emoji in a message with
size = smallor equivalent
| The above documentation is transcluded from Template:Chat/doc. (edit | history) Editors can experiment in this template's sandbox (edit | diff) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |
