DRUID infoboxes

DRUID (Data Representation Ultra Infobox Design) infoboxes are an alternative to Portable Infoboxes designed by River, with CSS by Mr Pie 5 & alex4401.

Examples

These examples can all be copied to your wiki and then modified. Each piece of functionality is documented separately, but you can combine anything you like.

Example code	Example use	What it does
Example code 1	Example use 1	minimal Example code
Example code 2	Example use 2	demonstrates adding multiple tabbed images
Example code 3	Example use 3	display data in a grid instead of in consecutive rows
Example code 4	Example use 4	edit multiple items to have the same label
Example code 5	Example use 5	hiding item and/or section labels
Example code 6	Example use 6	collapsible sections
Example code 7	Example use 7	how to use the `_isdata` as a syntax sugar for a section with 1 total field

How to use DRUID infoboxes

Create a template for your infobox, for example {{Example DRUID infobox 1}}.
Populate this code at your template:
```
<includeonly>{{#invoke:Infobox|main
|kind=
|sep=,
|image={{#if:{{{image|}}}|[[File:{{{image}}}{{!}}300px]]}}
|sections=

}}</includeonly><noinclude>{{documentation}}</noinclude>
```
- Note, the |kind= parameter is optional. If you specify it, DRUID will apply a CSS class to the parent table so you can distinguish types of infoboxes visually.
Will any of your data labels have a , in them? If so, change the sep character to something else, for example ;. Your separator can be multiple characters, for example ;; is fine.
Fill in the list of sections your infobox will have. These are the actual display names of the sections, so use correct spelling, capitalization, and spacing/punctuation. Use your sep value as the separator in this (and every) list that you make for this template.
For each section that you specified, create a new parameter whose name is that section and whose value is a sep-separated list of fields that go in this section. For example, if you want the General Info section to contain Region and Element, then write General Info=Region, Element.
Optional: Customize any section or data field labels that you need to. For example, you can write |Item 1_label=Item|Item 2_label=Item if you want two fields to have the same display name, or you can write |Attack_label=[[File:Attack sprite.png|20px]] Attack if you want to add some markup to your labels.
Optional: For any fields where you will need custom markup, specify that as well, for example you might want to write Crit Chance={{#if:{{{Crit Chance|}}}|{{{Crit Chance}}}%}}.
Save your new template!
Create copyable code. You will want to prompt the user for the following parameters:
- |title=
- |image=
- All of the fields that you specified in step 5
You should now be done, enjoy your new infobox!

Formatting

DRUID will overwrite any user-supplied parameter with a template-supplied parameter. For example, if your code at Template:Weapon Infobox is |Attack={{{Attack|}}} (+{{{AttackPerLevel}}}/Lv), and the user writes |Attack=5 |AttackPerLevel=.5 at Sword, then the infobox will display 5 (+.5/Lv). You should take advantage of this formatting whenever possible, so that users are entering raw numbers which you "assemble" by grouping together, adding a + symbol before it or a % symbol after it, etc.

The cleaner your users' entered data is, the easier it will be to add Cargo to your wiki should you choose to.

Adding custom classes

DRUID supports adding your own classes to the entire infobox or parts of the infobox via these parameters:

|class= to add a class to the infobox container
|sectionName_class= to add a class to the container of section sectionName (note: div mode only)
|sectionName_class= to add a class to a grid section container (|sectionName_columns=N) (both table and div mode)
|fieldName_class= to add a class to the container of a single item (key-value pair) of data

The following classes are built in:

druid-stacked, to display labels above data instead of to the left (use: |class=druid-stacked)

For your own classes, please do NOT prefix them with druid-, as this namespace is reserved for code that ships with DRUID. You can use any other prefix you like, for example druid-local-

Tabs & image galleries

DRUID supports |tabs=, which can be used to:

Create multiple tabs of data (e.g. show the stats when an item is Common vs when it is Rare vs when it is Legendary)
Display tabbed images (e.g. show the base evolution, middle evolution, and maximum evolution of a character; or both a level icon and minimap)

These can be done at the same time. To change the display label of a tab, specify |tabName_label=, for example for a tab called Dragon specify |Dragon_label=Cool Dragon.

Example image tabs:

|images=
  [[File:Cargo-sample-dragon.png{{!}}300px]],
  [[File:Cargo-sample-vlad.png{{!}}300px]],
  [[File:Cargo-sample-invisible.png{{!}}300px]],
  [[File:Cargo-sample-bear.png{{!}}300px]]
|tabs=
  Dragon,
  Vampire,
  Invisible Boy,
  Bear

Example tabbed data:

|tabs=
  Dragon,
  Vampire,
  Invisible Boy,
  Bear
|Dragon_attack=5
|Vampire_attack=7
|Invisible Boy_attack=9
|Bear_attack=11

Using arraymap for image galleries

If you have access to {{#arraymap}}, you can transform the data to give your users an easier syntax (and improve your ability to store structured data in Cargo). Here is example code you might put in your template:

|images={{#arraymap:{{{images|}}}|,|@@@@|[[File:{{#explode:@@@@|:|0}}{{!}}300px]]|,}}
|tabs={{#arraymap:{{{images|}}}|,|@@@@|{{#explode:@@@@|:|1}}|,}}

In this case, you would expect your users to write something like this (remember the separator is determined by the parameter |sep= in the infobox template):

|images=
  Cargo-sample-dragon.png:Dragon,
  Cargo-sample-vlad.png:Vampire,
  Cargo-sample-invisible.png:Invisible Boy,
  Cargo-sample-bear.png:Bear

See {{Example DRUID infobox 2}} for an example of an infobox using a gallery for its images.

Layout

If you want to make the field |Description= be a full-width cell with no label, then you can add |Description_nolabel=yes in your template.
If you want to make a section (call it Info) without a label (e.g. a caption under your image), you can add |Info_nolabel=yes in your template.
To create a horizontal array of elements in a section (call it Items) you can add |Items_columns=3 in your template. Change 3 to the number of columns of data you want to display.

See {{Example DRUID infobox 3}} for an example of an infobox using all three of these layout options.

Using a section label as a data label

Sometimes wikis want a section consisting of a single item, and to use the section's title/label/name as the label for the data field. This can be done in DRUID as follows, where we'll demonstrate using the Motto section/field:

|sections=<!-- other sections -->, MottoSection <!-- give this section a different name from your standard convention, because you'll need to apply that standard-convention name to the field where it's user-facing -->

|MottoSection=Motto <!-- add one field to the MottoSection section -->
|MottoSection_label=Motto <!-- change the MottoSection label to display `Motto` instead of `MottoSection` -->
|Motto_nolabel=Yes <!-- remove the label from the `Motto` field / make it wide -->

Styling

DRUID infoboxes assign classes that start with druid-. The following classes are used:

druid-container
druid-title
druid-main-image
druid-main-images, druid-main-images-labels, druid-main-images-files, druid-main-images-label, druid-main-images-file (in the event you are using a gallery)
druid-grid-section, druid-grid, druid-grid-item (if you specify horizontal data with a number of columns)
druid-section
druid-label
druid-data
druid-tabs
druid-tab

Additionally, every element should be given with a unique class name based on its name (or will be a uniquely-determined child of such a labeled element), with some special characters replaced. You can use these to customize particular fields.

A note on arraymap

On wiki.gg, #arraymap and #arraymaptemplate are default on all wikis (via ParserPower). If you are editing a non-wiki.gg wiki, you may need to install either ParserPower or Page Forms to have access to these parser functions.

Navigation menu

Namespaces

Views

Navigation

wiki.gg

Policies & help

Tools