DRUID infoboxes

From Support Wiki
Jump to navigation Jump to search

Please note, DRUID is early in its lifecycle. There may be some minor breaking changes still (although you can always choose not to pull future updates). If it does not support your use case please contact River!

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.

Why DRUID infoboxes?

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

Portable Infoboxes (PIs) are not very performant, and if the extension doesn't support something that you want to do, too bad, you can't do it. Also, PIs require you to learn some random XML structure that is not useful outside of PIs, so the time you spend learning PIs will not make you better at other kinds of template editing. Furthermore, PI syntax is not as simple as it claims to be, and any time you do something a little bit complicated with a PI, the syntax gets very complicated.

DRUID infoboxes are built in Lua (see Module:Infobox), which means that once you copy the dependencies to your wiki, you own the code. If DRUID infobox doesn't support something you want to do, you can edit the underlying Lua code yourself (or ask for help doing this on the wiki.gg Discord server), so DRUID infoboxes are extremely extensible.

Instead of relying on esoteric XML markup, 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.

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.

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-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:

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

Optional

It's recommended to request the Page Forms extension, so that you have access to {{#arraymap}} and {{#arraymaptemplate}}. Copyable code that uses {{#arraymap}} is provided further down this page.

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.

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

Careful! If you have set a non-default |sep= parameter, you will have to edit the final , in the following example to match your chosen delimiter!

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.

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

If you don't have Page Forms installed and don't want to install it, DRUID ships with a built-in alternative. Here's how you can use it: 

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

If you want, you can create a template called Template:Arraymap with the code {{#invoke:Infobox|arraymap}}. In this case, you could write: 

|images={{arraymap|{{{images|}}}|,|@@@@|[[File:{{#explode:@@@@|:|0}}{{!}}300px]]|,}} <!-- assumes you have created Template:Arraymap -->
|tabs={{arraymap|{{{images|}}}|,|@@@@|{{#explode:@@@@|:|1}}|,}}

"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.
Retrieved from "https://support.wiki.gg/index.php?title=DRUID_infoboxes&oldid=4176"