Infoboxes are an extremely important part of the wiki experience, adding visual interest on the right side of the screen, and increasing the information density on the page in a non-overwhelming format.
Pictured below is the infobox on the Calgary page on Wikipedia
Discourse’s editor allows inline HTML, but it’s not as simple as pasting in the infobox HTML from Wikipedia. It has to align to the right side of the screen, with CSS that makes it look good, and scripts that align the photo content within it.
Click to reveal what the HTML from Calgary's infobox looks like when directly imported into Discourse
Calgary | |
|---|---|
| City of Calgary | |
| .mw-parser-output .tmulti .multiimageinner{display:flex;flex-direction:column}.mw-parser-output .tmulti .trow{display:flex;flex-direction:row;clear:left;flex-wrap:wrap;width:100%;box-sizing:border-box}.mw-parser-output .tmulti .tsingle{margin:1px;float:left}.mw-parser-output .tmulti .theader{clear:both;font-weight:bold;text-align:center;align-self:center;background-color:transparent;width:100%}.mw-parser-output .tmulti .thumbcaption{background-color:transparent}.mw-parser-output .tmulti .text-align-left{text-align:left}.mw-parser-output .tmulti .text-align-right{text-align:right}.mw-parser-output .tmulti .text-align-center{text-align:center}@media all and (max-width:720px){.mw-parser-output .tmulti .thumbinner{width:100%!important;box-sizing:border-box;max-width:none!important;align-items:center}.mw-parser-output .tmulti .trow{justify-content:center}.mw-parser-output .tmulti .tsingle{float:none!important;max-width:100%!important;box-sizing:border-box;text-align:center}.mw-parser-output .tmulti .tsingle .thumbcaption{text-align:left}.mw-parser-output .tmulti .trow>.thumbcaption{text-align:center}} | |
.mw-parser-output .ib-settlement-cols{text-align:center;display:table;width:100%}.mw-parser-output .ib-settlement-cols-row{display:table-row}.mw-parser-output .ib-settlement-cols-cell{display:table-cell;vertical-align:middle}.mw-parser-output .ib-settlement-cols-cellt{display:table-cell;vertical-align:top}
 Logo | |
| Nicknames: | |
| Motto: Onward | |
 Interactive map of Calgary | |
.mw-parser-output .locmap .od{position:absolute}.mw-parser-output .locmap .id{position:absolute;line-height:0}.mw-parser-output .locmap .l0{font-size:0;position:absolute}.mw-parser-output .locmap .pv{line-height:110%;position:absolute;text-align:center}.mw-parser-output .locmap .pl{line-height:110%;position:absolute;top:-0.75em;text-align:right}.mw-parser-output .locmap .pr{line-height:110%;position:absolute;top:-0.75em;text-align:left}.mw-parser-output .locmap .pv>div{display:inline;padding:1px}.mw-parser-output .locmap .pl>div{display:inline;padding:1px;float:right}.mw-parser-output .locmap .pr>div{display:inline;padding:1px;float:left}html.skin-theme-clientpref-night .mw-parser-output .od,html.skin-theme-clientpref-night .mw-parser-output .od .pv>div,html.skin-theme-clientpref-night .mw-parser-output .od .pl>div,html.skin-theme-clientpref-night .mw-parser-output .od .pr>div{background:#fff!important;color:#000!important}html.skin-theme-clientpref-night .mw-parser-output .locmap{filter:grayscale(0.6)}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .locmap{filter:grayscale(0.6)}html.skin-theme-clientpref-os .mw-parser-output .od,html.skin-theme-clientpref-os .mw-parser-output .od .pv>div,html.skin-theme-clientpref-os .mw-parser-output .od .pl>div,html.skin-theme-clientpref-os .mw-parser-output .od .pr>div{background:white!important;color:#000!important}}html.skin-theme-clientpref-night .mw-parser-output .infobox-full-data .locmap div{background:transparent!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .infobox-full-data .locmap div{background:transparent!important}}   Calgary Location within Canada  Calgary Location within Alberta | |
Coordinates: .mw-parser-output .geo-default,.mw-parser-output .geo-dms,.mw-parser-output .geo-dec{display:inline}.mw-parser-output .geo-nondefault,.mw-parser-output .geo-multi-punct,.mw-parser-output .geo-inline-hidden{display:none}.mw-parser-output .longitude,.mw-parser-output .latitude{white-space:nowrap} 51°3′N 114°4′W / 51.050°N 114.067°W / 51.050; -114.067 | |
| Country | Canada |
| Province | Alberta |
| Region | Calgary Metropolitan Region |
| Census division | 6 |
| Municipal districts | Rocky View County and Foothills County |
| Founded | 1875 |
| Incorporated[3] | |
| • Town | November 7, 1884 |
| • City | January 1, 1894 |
| Named for | Calgary, Mull |
| Government | |
| • Body | Calgary City Council |
| • Mayor | Jyoti Gondek |
| • Manager | David Duckworth[4] |
| Area (2021)[5] | |
| • Land | 820.62 km2 (316.84 sq mi) |
| • Urban | 621.72 km2 (240.05 sq mi) |
| • Metro | 5,098.68 km2 (1,968.61 sq mi) |
| Elevation | 1,045 m (3,428 ft) |
| Population | |
| • City | 1,306,784 (3rd) |
| • Density | 1,592.4/km2 (4,124/sq mi) |
| • Urban | 1,305,550 (4th) |
| • Urban density | 2,099.9/km2 (5,439/sq mi) |
| • Metro | 1,481,806 (5th) |
| • Metro density | 290.6/km2 (753/sq mi) |
| Demonym | Calgarian |
| Time zone | UTC−07:00 (MST) |
| • Summer (DST) | UTC−06:00 (MDT) |
| FSAs | |
| Area code(s) | 403, 587, 825, 368 |
| NTS Map | 082O01 |
| GNBC Code | IAKID |
| GDP (Calgary CMA) | CA$102.66 billion (2020)[9] |
| GDP per capita (Calgary CMA) | CA$79,885 (2022)[10] |
| Website | calgary.ca  |
.jpg)
.svg)
Not horrible actually. It handles the table parts quite well. But the sizing is all wrong, the images are totally broken, and I’m not sure how we can make all of this align to the right in a simple template.