Jdj: Infobox: preceded_by / succeeded_by / series chronology panel

2026-10-15T19:05:27Z

Infobox: preceded_by / succeeded_by / series chronology panel

← Older revision		Revision as of 19:05, 15 October 2026
Line 63:		Line 63:
	-->{{#if:{{{data30\|}}}\|{{#if:{{{label30\|}}}\|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label30}}}</div><div class="dm-infobox-data">{{{data30}}}</div></div>\|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data30}}}</div></div>}}}}<!--		-->{{#if:{{{data30\|}}}\|{{#if:{{{label30\|}}}\|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label30}}}</div><div class="dm-infobox-data">{{{data30}}}</div></div>\|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data30}}}</div></div>}}}}<!--
	--></div><!--		--></div><!--
			-->{{#if:{{{preceded_by\|}}}{{{succeeded_by\|}}}\|<div class="dm-infobox-chrono">{{#if:{{{series\|}}}\|<div class="dm-chrono-series">{{{series}}}</div>}}<div class="dm-chrono-row">{{#if:{{{preceded_by\|}}}\|<div class="dm-chrono-prev"><div class="dm-chrono-label">← Preceded by</div>{{{preceded_by}}}</div>}}{{#if:{{{succeeded_by\|}}}\|<div class="dm-chrono-next"><div class="dm-chrono-label">Succeeded by →</div>{{{succeeded_by}}}</div>}}</div></div>}}<!--
	-->{{#if:{{{below\|}}}\|<div class="dm-infobox-below">{{{below}}}</div>}}</div></includeonly><noinclude>		-->{{#if:{{{below\|}}}\|<div class="dm-infobox-below">{{{below}}}</div>}}</div></includeonly><noinclude>
	{{Infobox		{{Infobox
Line 81:		Line 82:
	\| label5 = Repository		\| label5 = Repository
	\| data5 = [https://git.kunix.org git.kunix.org]		\| data5 = [https://git.kunix.org git.kunix.org]
			\| series = Example series
			\| preceded_by = Example 0.9
			\| succeeded_by = Example 2.0
	\| below = Part of the Digital Millennium		\| below = Part of the Digital Millennium
	}}		}}
Line 99:		Line 103:
	\| data2 =		\| data2 =
	<!-- ... up to label30 / data30, header1 - header30 -->		<!-- ... up to label30 / data30, header1 - header30 -->
			\| series = <!-- optional: name of the sequence, e.g. Boris models -->
			\| preceded_by = <!-- previous item, e.g. [[Boris-1]] -->
			\| succeeded_by = <!-- next item -->
	\| below = <!-- optional footer line -->		\| below = <!-- optional footer line -->
	}}		}}
Line 105:		Line 112:
	* <code>dataN</code> without <code>labelN</code> spans the full width.		* <code>dataN</code> without <code>labelN</code> spans the full width.
	* <code>headerN</code> puts a section heading before row N. Numbers don't need to be consecutive, so you can leave gaps for rows you'll add later.		* <code>headerN</code> puts a section heading before row N. Numbers don't need to be consecutive, so you can leave gaps for rows you'll add later.
			* <code>preceded_by</code> / <code>succeeded_by</code> add a chronology panel at the bottom; either one alone is fine. <code>series</code> labels it.
	* Images from the Gorilla icon theme are CC BY-SA 2.0 and need a credit, e.g. in <code>caption</code>.		* Images from the Gorilla icon theme are CC BY-SA 2.0 and need a credit, e.g. in <code>caption</code>.
	</noinclude>		</noinclude>

Jdj: Example: credit the Gorilla icon

2026-10-15T18:59:56Z

Example: credit the Gorilla icon

← Older revision		Revision as of 18:59, 15 October 2026
Line 68:		Line 68:
	\| image = Gorilla-Computer-Desktop.svg		\| image = Gorilla-Computer-Desktop.svg
	\| image_size = 96px		\| image_size = 96px
	\| caption = ~~Any image works here~~		\| caption = Icon by Jakub Steiner, [https://creativecommons.org/licenses/by-sa/2.0/ CC BY-SA 2.0]
	\| header1 = Overview		\| header1 = Overview
	\| label1 = Developer		\| label1 = Developer

Jdj: Unified general-purpose infobox

2026-10-15T18:59:34Z

Unified general-purpose infobox

New page

<includeonly><div class="dm-infobox" role="complementary"><div class="dm-infobox-title">{{{title|{{PAGENAME}}}}}</div>{{#if:{{{image|}}}|<div class="dm-infobox-image">[[File:{{{image}}}|{{{image_size|220px}}}|alt={{{alt|}}}]]{{#if:{{{caption|}}}|<div class="dm-infobox-caption">{{{caption}}}</div>}}</div>}}<div class="dm-infobox-rows">{{#if:{{{header1|}}}|<div class="dm-infobox-section">{{{header1}}}</div>}}{{#if:{{{data1|}}}|{{#if:{{{label1|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label1}}}</div><div class="dm-infobox-data">{{{data1}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data1}}}</div></div>}}}}{{#if:{{{header2|}}}|<div class="dm-infobox-section">{{{header2}}}</div>}}{{#if:{{{data2|}}}|{{#if:{{{label2|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label2}}}</div><div class="dm-infobox-data">{{{data2}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data2}}}</div></div>}}}}{{#if:{{{header3|}}}|<div class="dm-infobox-section">{{{header3}}}</div>}}{{#if:{{{data3|}}}|{{#if:{{{label3|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label3}}}</div><div class="dm-infobox-data">{{{data3}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data3}}}</div></div>}}}}{{#if:{{{header4|}}}|<div class="dm-infobox-section">{{{header4}}}</div>}}{{#if:{{{data4|}}}|{{#if:{{{label4|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label4}}}</div><div class="dm-infobox-data">{{{data4}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data4}}}</div></div>}}}}{{#if:{{{header5|}}}|<div class="dm-infobox-section">{{{header5}}}</div>}}{{#if:{{{data5|}}}|{{#if:{{{label5|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label5}}}</div><div class="dm-infobox-data">{{{data5}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data5}}}</div></div>}}}}{{#if:{{{header6|}}}|<div class="dm-infobox-section">{{{header6}}}</div>}}{{#if:{{{data6|}}}|{{#if:{{{label6|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label6}}}</div><div class="dm-infobox-data">{{{data6}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data6}}}</div></div>}}}}{{#if:{{{header7|}}}|<div class="dm-infobox-section">{{{header7}}}</div>}}{{#if:{{{data7|}}}|{{#if:{{{label7|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label7}}}</div><div class="dm-infobox-data">{{{data7}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data7}}}</div></div>}}}}{{#if:{{{header8|}}}|<div class="dm-infobox-section">{{{header8}}}</div>}}{{#if:{{{data8|}}}|{{#if:{{{label8|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label8}}}</div><div class="dm-infobox-data">{{{data8}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data8}}}</div></div>}}}}{{#if:{{{header9|}}}|<div class="dm-infobox-section">{{{header9}}}</div>}}{{#if:{{{data9|}}}|{{#if:{{{label9|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label9}}}</div><div class="dm-infobox-data">{{{data9}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data9}}}</div></div>}}}}{{#if:{{{header10|}}}|<div class="dm-infobox-section">{{{header10}}}</div>}}{{#if:{{{data10|}}}|{{#if:{{{label10|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label10}}}</div><div class="dm-infobox-data">{{{data10}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data10}}}</div></div>}}}}{{#if:{{{header11|}}}|<div class="dm-infobox-section">{{{header11}}}</div>}}{{#if:{{{data11|}}}|{{#if:{{{label11|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label11}}}</div><div class="dm-infobox-data">{{{data11}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data11}}}</div></div>}}}}{{#if:{{{header12|}}}|<div class="dm-infobox-section">{{{header12}}}</div>}}{{#if:{{{data12|}}}|{{#if:{{{label12|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label12}}}</div><div class="dm-infobox-data">{{{data12}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data12}}}</div></div>}}}}{{#if:{{{header13|}}}|<div class="dm-infobox-section">{{{header13}}}</div>}}{{#if:{{{data13|}}}|{{#if:{{{label13|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label13}}}</div><div class="dm-infobox-data">{{{data13}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data13}}}</div></div>}}}}{{#if:{{{header14|}}}|<div class="dm-infobox-section">{{{header14}}}</div>}}{{#if:{{{data14|}}}|{{#if:{{{label14|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label14}}}</div><div class="dm-infobox-data">{{{data14}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data14}}}</div></div>}}}}{{#if:{{{header15|}}}|<div class="dm-infobox-section">{{{header15}}}</div>}}{{#if:{{{data15|}}}|{{#if:{{{label15|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label15}}}</div><div class="dm-infobox-data">{{{data15}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data15}}}</div></div>}}}}{{#if:{{{header16|}}}|<div class="dm-infobox-section">{{{header16}}}</div>}}{{#if:{{{data16|}}}|{{#if:{{{label16|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label16}}}</div><div class="dm-infobox-data">{{{data16}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data16}}}</div></div>}}}}{{#if:{{{header17|}}}|<div class="dm-infobox-section">{{{header17}}}</div>}}{{#if:{{{data17|}}}|{{#if:{{{label17|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label17}}}</div><div class="dm-infobox-data">{{{data17}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data17}}}</div></div>}}}}{{#if:{{{header18|}}}|<div class="dm-infobox-section">{{{header18}}}</div>}}{{#if:{{{data18|}}}|{{#if:{{{label18|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label18}}}</div><div class="dm-infobox-data">{{{data18}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data18}}}</div></div>}}}}{{#if:{{{header19|}}}|<div class="dm-infobox-section">{{{header19}}}</div>}}{{#if:{{{data19|}}}|{{#if:{{{label19|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label19}}}</div><div class="dm-infobox-data">{{{data19}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data19}}}</div></div>}}}}{{#if:{{{header20|}}}|<div class="dm-infobox-section">{{{header20}}}</div>}}{{#if:{{{data20|}}}|{{#if:{{{label20|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label20}}}</div><div class="dm-infobox-data">{{{data20}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data20}}}</div></div>}}}}{{#if:{{{header21|}}}|<div class="dm-infobox-section">{{{header21}}}</div>}}{{#if:{{{data21|}}}|{{#if:{{{label21|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label21}}}</div><div class="dm-infobox-data">{{{data21}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data21}}}</div></div>}}}}{{#if:{{{header22|}}}|<div class="dm-infobox-section">{{{header22}}}</div>}}{{#if:{{{data22|}}}|{{#if:{{{label22|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label22}}}</div><div class="dm-infobox-data">{{{data22}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data22}}}</div></div>}}}}{{#if:{{{header23|}}}|<div class="dm-infobox-section">{{{header23}}}</div>}}{{#if:{{{data23|}}}|{{#if:{{{label23|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label23}}}</div><div class="dm-infobox-data">{{{data23}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data23}}}</div></div>}}}}{{#if:{{{header24|}}}|<div class="dm-infobox-section">{{{header24}}}</div>}}{{#if:{{{data24|}}}|{{#if:{{{label24|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label24}}}</div><div class="dm-infobox-data">{{{data24}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data24}}}</div></div>}}}}{{#if:{{{header25|}}}|<div class="dm-infobox-section">{{{header25}}}</div>}}{{#if:{{{data25|}}}|{{#if:{{{label25|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label25}}}</div><div class="dm-infobox-data">{{{data25}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data25}}}</div></div>}}}}{{#if:{{{header26|}}}|<div class="dm-infobox-section">{{{header26}}}</div>}}{{#if:{{{data26|}}}|{{#if:{{{label26|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label26}}}</div><div class="dm-infobox-data">{{{data26}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data26}}}</div></div>}}}}{{#if:{{{header27|}}}|<div class="dm-infobox-section">{{{header27}}}</div>}}{{#if:{{{data27|}}}|{{#if:{{{label27|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label27}}}</div><div class="dm-infobox-data">{{{data27}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data27}}}</div></div>}}}}{{#if:{{{header28|}}}|<div class="dm-infobox-section">{{{header28}}}</div>}}{{#if:{{{data28|}}}|{{#if:{{{label28|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label28}}}</div><div class="dm-infobox-data">{{{data28}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data28}}}</div></div>}}}}{{#if:{{{header29|}}}|<div class="dm-infobox-section">{{{header29}}}</div>}}{{#if:{{{data29|}}}|{{#if:{{{label29|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label29}}}</div><div class="dm-infobox-data">{{{data29}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data29}}}</div></div>}}}}{{#if:{{{header30|}}}|<div class="dm-infobox-section">{{{header30}}}</div>}}{{#if:{{{data30|}}}|{{#if:{{{label30|}}}|<div class="dm-infobox-row"><div class="dm-infobox-label">{{{label30}}}</div><div class="dm-infobox-data">{{{data30}}}</div></div>|<div class="dm-infobox-row dm-infobox-full"><div class="dm-infobox-data">{{{data30}}}</div></div>}}}}</div>{{#if:{{{below|}}}|<div class="dm-infobox-below">{{{below}}}</div>}}</div></includeonly><noinclude>
{{Infobox
| title = Example Project
| image = Gorilla-Computer-Desktop.svg
| image_size = 96px
| caption = Any image works here
| header1 = Overview
| label1 = Developer
| data1 = Klondike Software Project
| label2 = Status
| data2 = Active
| label3 = Written in
| data3 = C
| header4 = Links
| label4 = Website
| data4 = [https://kunix.org kunix.org]
| label5 = Repository
| data5 = [https://git.kunix.org git.kunix.org]
| below = Part of the Digital Millennium
}}
One infobox for everything: projects, people, hardware, models, concepts. Every field is optional and empty rows are hidden.

== Usage ==
<pre>
{{Infobox
| title = 
| image = 
| image_size = 
| caption =
| alt =
| header1 = 
| label1 =
| data1 =
| label2 =
| data2 =

| below = 
}}
</pre>
* A row shows only when its <code>dataN</code> is filled in.
* <code>dataN</code> without <code>labelN</code> spans the full width.
* <code>headerN</code> puts a section heading before row N. Numbers don't need to be consecutive, so you can leave gaps for rows you'll add later.
* Images from the Gorilla icon theme are CC BY-SA 2.0 and need a credit, e.g. in <code>caption</code>.
</noinclude>

Template:Infobox - Revision history

Jdj: Infobox: preceded_by / succeeded_by / series chronology panel

Jdj: Example: credit the Gorilla icon

Jdj: Unified general-purpose infobox