DRUID infoboxes

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

Last-update dates (versions on the support wiki may not be stable releases, see the version on the Default Loadout Wiki):

• {{Infobox}}m: 13 Jul 2024
• Gadget - druidInfoboxes.css: 26 Jun 2024
• Gadget - druidInfoboxes.js: 26 May 2024

Why DRUID infoboxes?

“	And the tab-img infoboxes work wonderfully, this is f***ing great!	”
	~ macinsight

Instead of relying on esoteric XML markup the way Portable Infoboxes do, DRUID infoboxes have you specify the structure inside of the tag {{#invoke:Infobox|main}} call in your infobox template. The syntax here works no differently from any other template call, so the skills you learn when configuring DRUID infoboxes will 100% transfer to other work with templates.

Also, it has hooks in case you want to extend functionality (which works well as a gentle Lua introduction)!

Example DRUID infoboxes

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 DRUID infobox 1}} - minimal example
• {{Example DRUID infobox 2}} - demonstrates adding multiple tabbed images
• {{Example DRUID infobox 3}} - display data in a grid instead of in consecutive rows
• {{Example DRUID infobox 4}} - edit multiple items to have the same label
• {{Example DRUID infobox 5}} - hiding item and/or section labels
• {{Example DRUID infobox 6}} - collapsible sections
• {{Extension infobox}}
• {{Boss infobox}}

Patch notes

If the last time your DRUID code was edited is before the most recent date, you may need to re-import the indicated files. If your DRUID code hasn't been updated since 2024-04-04 or earlier, you must update all files ({{Infobox}}m, Gadget - druidInfoboxes.css, Gadget - druidInfoboxes.js) or significant functionality may be missing.

• 2024-06-16: No change, but druid-stable (default loadout wiki version) is synced to druid-latest (support wiki version). Please update now if you have not already done so.
• 2024-06-08: Edited {{Infobox}}m to support custom classes. Edited Gadget - druidInfoboxes.css to support the custom class druid-stacked.
• 2024-06-05: Edited Gadget - druidInfoboxes.css to fix hiding sections in the div-based display.
• 2024-05-26: Edited {{Infobox}}m and Gadget - druidInfoboxes.js to support per-section tabs. They can be created for a section called MySection by writing MySection_tabs=Tab 1, Tab 2, Tab 3 and then writing Tab 1_param 1=value 1, etc. for each of the tabs & params in the section (the same as for infobox-wide tabs). Section tabs & infobox-wide tabs are incompatible. Additionally, updated {{Infobox}}m to display the final row of a grid spaced evenly, no matter how the number of columns divides the number of items.
• 2024-05-19: Edited {{Infobox}}m to add support for hooks being present at {{Infobox/Hooks}}m. This file is not required to exist on the target wiki. Two hooks are currently supported, onCastArgsStart and onCastArgsEnd.
• 2024-05-14: Edited {{Infobox}}m and Gadget - druidInfoboxes.css to default the display to divs instead of tables. |useDivs=no can be specified to revert to table display.
• 2024-04-24: Edited {{Infobox}}m so that grid sections with n columns that are given fewer than n nonempty parameters will space their cells evenly.
• 2024-04-16: Edited {{Infobox}}m to support tabs independently of image labels.
• 2024-04-15: Edited {{Infobox}}m to support image labels with different display text from their keys via the syntax |imageLabelKey_label=Display text.
• 2024-04-04: Edited {{Infobox}}m to support _nolabel for grid items and to support _label for section headings. Fixed an issue where two consecutive fields both containing bulleted lists did not render properly.

Add DRUID infoboxes to your wiki

There are 3 files you will need:

• {{Infobox}}m (you can rename this if you like, just make sure to edit the documentation examples if you do)
• MediaWiki:Gadget-druidInfoboxes.css (it's recommended that you copy this to MediaWiki:Common.css or MediaWiki:Vector.css on your wiki instead of installing it as a gadget)
  • Depending on how your theme was styled, you may need to edit this CSS, if so, edit only the variable definitions and replace them with the Hex/RGB values of the colors you want.
• MediaWiki:Gadget-druidInfoboxes.js (it's recommended that you copy this to MediaWiki:Common.js on your wiki instead of installing it as a gadget)

If you added the latter two files above as gadgets, you will also need to add the following code to Mediawiki:Gadgets-definition. If you copied those files to Mediawiki:Common.css/js as recommended, you can skip this part.

* druidInfoboxesScripts[ResourceLoader|default|hidden]|druidInfoboxes.js
* druidInfoboxesStyles[ResourceLoader|default|hidden|type=styles]|druidInfoboxes.css

How to use DRUID infoboxes

1. Create a template for your infobox, for example {{Example DRUID infobox 1}}.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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}}}%}}.
8. Save your new template!
9. 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
10. 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.

Planned development

AKA River's ticket management

• Figure out a good name for sectionName_as_label or aslabel or as_data or something along these lines
• Implement that as a syntax sugar for |sectionKey=SectionName |sectionKey_label=SectionName |SectionName_nolabel=Yes

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.

"Archived" patch notes

• 2024-03-29: Edited {{Infobox}}m to add the druid-infobox class in addition to druid-container, making it easier for external tools to identify the infobox in the HTML.
• 2024-03-19: Edited {{Infobox}}m, Gadget - druidInfoboxes.css, and Gadget - druidInfoboxes.js to add collapsible section support.
• 2024-03-17: Edited {{Infobox}}m and Gadget - druidInfoboxes.css to better support toggling content.
• 2024-03-16: Edited {{Infobox}}m to fix an issue where bulleted lists using markup notation weren't working in field values and an issue where unique IDs weren't incrementing properly.
• 2024-03-08: Edited Gadget - druidInfoboxes.css to better support infoboxes at narrow screen resolutions.
• 2024-03-07: Edited {{Infobox}}m so to support |item1_label=Item instead of |item1_display=Item, so that there are fewer words to remember (nolabel/label). Set the infobox's image as the main image of the page.
• 2024-02-22: DRUID is released for initial testing.