Template:Chat: Difference between revisions

From VNDev Wiki
← Older edit
Simplify code and add example
added more message lines (up to 15); nested if statements to improve load time
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div>
<div style="display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;">
<div style="display: inline-block; vertical-align: top;" class="circular"><p style="margin:2px;">
<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|60px|alt=""]]
| Plum|P = [[File:Plum PFP 2024.png|50px|alt=""]]
| Lemon = [[File:Lemon PFP 2024.png|60px|alt=""]]
| Lemon|Le = [[File:Lemon PFP 2024.png|50px|alt=""]]
| Cherry = [[File:Cherry PFP 2024.png|60px|alt=""]]
| Cherry|C = [[File:Cherry PFP 2024.png|50px|alt=""]]
| Lime = [[File:Lime PFP 2024.png|60px|alt=""]]
| Lime|Li = [[File:Lime PFP 2024.png|50px|alt=""]]
| #default = {{#if:{{{image|}}} | [[{{{image}}}|60px|alt=""]] | }}
| PD|Pd = [[File:Plum PFP Dogboy.png|50px|alt=""]]
}}<noinclude>[[File:Lime PFP 2024.png|60px|alt=""]]</noinclude></p>
| 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="display: inline-block; max-width: 80%; padding-left: 1ex;">
<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:lightgreen">
| 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>{{{message|{{{2|}}}}}}<noinclude>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt consectetur dolor non sodales. Sed egestas varius posuere. Aenean id accumsan risus, in aliquam odio. Praesent id nisl mi. Pellentesque eu tellus at diam suscipit accumsan.</noinclude></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>Example: <code><nowiki>{{Chat|name=Lemon|message=Is anyone here?}}</nowiki></code></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.
Documentation icon Template documentation [view] [edit] [purge]

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

  • Plum or P for Plum.
  • Lemon or Le for Lemon.
  • Cherry or C for Cherry.
  • Lime or Li for Lime.
  • PD for the dogboy version of Plum.
  • Stella or S for 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 = small or equivalent
Retrieved from "https://vndev.wiki/index.php?title=Template:Chat&oldid=3678"