PortableInfobox Inquiry (created OBO user) | Miraheze | Page 1

ancient sun Oct 11, 2022, 9:31 PM

#

Creating a thread to track investigation of unexpected PortableInfobox behaviors when using VisualEditor + TemplateData parameters

night hull Oct 11, 2022, 9:32 PM

#

i can post the video here too

ancient sun Oct 11, 2022, 9:32 PM

#

@night hull , would you mind providing a link to the template in question and the page you're testing the template on?
I think if I'm able to observe the code directly I can probably quickly spot what's going on.

night hull Oct 11, 2022, 9:32 PM

#

ok. but idk how you'll view it if the wiki is private

ancient sun Oct 11, 2022, 9:32 PM

#

Ah, nope then.

night hull Oct 11, 2022, 9:33 PM

#

I can try and make it public idk how

#

then switch it back

ancient sun Oct 11, 2022, 9:34 PM

#

~~Nah, that's tricky steward stuff we probably shouldn't mess with, as I recall.~~
Disregard, it's possible to make it public for Admins/Bureaucrats, but I don't want to risk getting your wiki stuck in a weird state.

Hrm... I think the template page's 'edit source' script would also suffice.

#

That should give enough for me to diffcheck between the template data setup and the infobox code.

night hull Oct 11, 2022, 9:35 PM

#

Ok how can I provide you the info you need

ancient sun Oct 11, 2022, 9:36 PM

#

If you go to the template page for the infobox then click edit source, you should see the source code that looks like this:

#

If you can click in there, ctrl-a, then ctrl-c, then paste it here, I should be able to debug.

night hull Oct 11, 2022, 9:38 PM

#

<infobox>
<data source="honorific_prefix">
<label>Honorific Prefix</label>
</data>
<title source="title">
<default>{{PAGENAME}}</default>
</title>
<image source="image"/>
<data source="caption">
<label>Caption</label>
</data>
<data source="other names">
<label>Other names</label>
</data>
<data source="born">
<label>Born</label>
</data>
<data source="Died">
<label>Died</label>
</data>
<data source="cause of death">
<label>Cause of death</label>
</data>
<data source="resting place">
<label>Resting Place</label>
</data>
<data source="nationality">
<label>Nationality</label>
</data>
<data source="aesthetic">
<label>Aesthetic</label>
</data>
<data source="religion">
<label>Religion</label>
</data>
<data source="culture">
<label>Culture</label>
</data>
<data source="allegiance">
<label>Allegiance</label>
</data>
<data source="drink">
<label>Drink</label>
</data>
<data source="perfume">
<label>Perfume</label>
</data>
<data source="book(s)">
<label>Book(s)</label>
</data>
<data source="height">
<label>Height</label>
</data>
<data source="partner(s)">
<label>Partner(s)</label>
</data>
<data source="mother(s)">
<label>Mother(s)</label>
</data>
<data source="father(s)">
<label>Father(s)</label>
</data>
<data source="brother(s)">
<label>Brother(s)</label>
</data>
<data source="sister(s)">
<label>Sister(s)</label>
</data>
<data source="other relative(s)">
<label>Other relatives</label>
</data>
<data source="family">
<label>Family</label>
</data>
<data source="children">
<label>Children</label>
</data>
<data source="predecessor">
<label>Predecessor</label>
</data>
<data source="successor">
<label>Successor</label>
</data>
</infobox>

📎 message.txt

#

<noinclude>
<templatedata>
{
"params": {
"Born": {
"label": "Born",
"description": "Birthdate and place",
"example": "15 April 2978 Muulu, Okkihaio"
},
"Died": {
"label": "Died",
"description": "Death date and place",
"example": "30 November 3020"
},
"Cause of death": {
"label": "Cause of death",
"description": "Cause of death",
"example": "Muulu, Okkihaio"
},
"Nationality ": {
"label": "Nationality",
"description": "Nationality",
"example": "Okkihaian"
},
"Aesthetic": {
"label": "Aesthetic",
"description": "Aesthetic ",
"example": "Neon Ornamentalism "
},
"Religion": {
"label": "Religion",
"description": "Religion",
"example": "Religion"
},
"Culture": {
"label": "Culture",
"description": "Culture",
"example": "Staryan"
},
"Allegiance": {
"label": "Allegiance",
"description": "Allegiance",
"example": "House Konstantino "
},
"Drink": {
"label": "Drink",
"description": "Drink",
"example": "Jack Frost with Vodka"
},
"Perfume": {
"label": "Perfume",
"description": "Perfume",
"example": "Lemon Vanilla Jasmine"
},
"Book(s)": {
"label": "Book(s)",
"description": "Which books the character appears in",
"example": "Will of an Architect"
},
"Height": {
"label": "Height",
"description": "Height",
"example": "5'1""
},
"Mother(s)": {
"label": "Mother(s)",
"description": "List of mothers",
"example": "Lynn Ryuko"
},
"Father(s)": {
"label": "Father(s)",
"description": "List of fathers",
"example": "Jack Weyr"
},
"Brother(s)": {
"label": "Brother(s)",
"description": "List of brothers",
"example": "Selwin Konstantino "
},
"Sister(s)": {
"label": "Sister(s)",
"description": "List of sisters",
"example": "Troy"
},
"Other names": {},
"Title": {},
"Family": {
"label": "Family",
"description": "Family or House",
"example": "Konstantino",
"type": "unknown"
},
"Signature": {
"label": "Signature",
"description": "Signature",
"example": "signature.png",
"type": "wiki-file-name"
},
"Predecessor": {
"label": "Predecessor",
"description": "Predecessor",
"example": "Fenrir Konstantino"
},
"Successor": {
"label": "Successor",
"description": "Successor ",
"example": "Iris Konstantino"
}
},
"description": "Enhanced infobox for characters ",
"paramOrder": [
"Title",
"Born",
"Died",
"Cause of death",
"Other names",
"Nationality ",
"Aesthetic",
"Religion",
"Culture",
"Allegiance",
"Drink",
"Perfume",
"Book(s)",
"Height",
"Mother(s)",
"Father(s)",
"Brother(s)",
"Sister(s)",
"Family",
"Predecessor",
"Successor",
"Signature"
]
}
</templatedata>
</noinclude>

ancient sun Oct 11, 2022, 9:38 PM

#

Ah, yep, there we are

night hull Oct 11, 2022, 9:38 PM

#

lol

ancient sun Oct 11, 2022, 9:39 PM

#

So, issue here is the most annoying thing about wikis generally -- attributes/parameters are case sensitive

#

So templatedata parameter Religion can't find infobox attribute religion, for example

night hull Oct 11, 2022, 9:39 PM

#

So why does it all work when I am using source and not visual

ancient sun Oct 11, 2022, 9:41 PM

#

A couple ways to fix this.

Probably the easiest: Change casing of the parameter in Template Data to match what you've got in the infobox <data source = ""> code

night hull Oct 11, 2022, 9:41 PM

#

hm ok i did that, let's see if it works

ancient sun Oct 11, 2022, 9:42 PM

#

Might need to purge page cache to see the update. Hopefully this does it.

night hull Oct 11, 2022, 9:42 PM

#

Ok, it seems to work. What's the code to add an image?

ancient sun Oct 11, 2022, 9:45 PM

#

Looks like you've got the option to add an image attached to the attribute by the same name.
If you want to add images as an option in the VisualEditor builder interface, you'd just need to add a new parameter to the TemplateData for your template and name it image.

#

If you just want to edit the source on the page where you're using the infobox directly, it'd look something like this in source code:

#

replacing the File:Building_Graveyard_T1.png name with whatever file you want to use that's hosted on your wiki

#

full example text:
|image=[[File:Building_Graveyard_T1.png|200px]]

night hull Oct 11, 2022, 9:49 PM

#

Ok i've added the parameter but it wont update with the image

ancient sun Oct 11, 2022, 9:49 PM

#

Hmm, can you show me what that looks like on the page where you're trying to use the template?

night hull Oct 11, 2022, 9:50 PM

#

Screen_Shot_2022-10-11_at_5.50.01_PM.png

ancient sun Oct 11, 2022, 9:50 PM

#

Ah, if that's a file you've already uploaded, you'll need to change that to [[File:cho10.jpg]]

odd lichenBOT Oct 11, 2022, 9:50 PM

#

https://meta.miraheze.org/wiki/File:Cho10.jpg?action=edit&redlink=1

ancient sun Oct 11, 2022, 9:51 PM

#

Shush, bot. Not helpful. 🙂

night hull Oct 11, 2022, 9:51 PM

#

still nothing

ancient sun Oct 11, 2022, 9:51 PM

#

Is that a file that already exists on your wiki?

night hull Oct 11, 2022, 9:51 PM

#

yes

Screen_Shot_2022-10-11_at_5.51.28_PM.png

#

for example with the old infobox

Screen_Shot_2022-10-11_at_5.51.55_PM.png

#

that i cant adjust or add new parameters for it works perfect

night hull Oct 11, 2022, 9:52 PM

#

night hull yes

also whenever i edit the page the infobox collapses like this instead of remaining open like the old infobox

ancient sun Oct 11, 2022, 9:53 PM

#

Yeah, it doesn't really render right in the VisualEditor preview, it re-expands correctly once the changes are saved. 😦

#

Let's try this, can you go back to the TemplateData window on the template page and click on the image parameter?

#

It should look something like this:

#

night hull Oct 11, 2022, 9:54 PM

#

Screen_Shot_2022-10-11_at_5.54.28_PM.png

ancient sun Oct 11, 2022, 9:54 PM

#

Same thing again about capitalization is at play here. In the name field, change it from Image to image

#

This is the part of your original code that told me this might be the problem: <image source="image"/>

night hull Oct 11, 2022, 9:55 PM

#

ok i changed everything in that form to lowercase and still nothing

ancient sun Oct 11, 2022, 9:56 PM

#

Let's also change the Type in that interface from Unknown to File

night hull Oct 11, 2022, 9:56 PM

#

ok it works but only in source

#

i just checked

#

so now how to get everything working in visual

ancient sun Oct 11, 2022, 9:57 PM

#

A good question -- I just started experimenting w/ TemplateData this morning and have had good success getting it working once all changes are saved, but it still shows the bizarre collapsed infobox in VisualEditor preview.

night hull Oct 11, 2022, 9:58 PM

#

Another thing. How can I get the name to center itself on the infobox instead of skew to the left

#

Ideally, I would also like the title/prefix of the person above it, in a smaller font

#

Screen_Shot_2022-10-11_at_5.59.01_PM.png

ancient sun Oct 11, 2022, 9:59 PM

#

So that's going to be a CSS change, let me see if I can dig out what I did for that

night hull Oct 11, 2022, 10:03 PM

#

its weird, i added honorific prefix in to be above image and for some reason it wont show up as a parameter or in source

ancient sun Oct 11, 2022, 10:05 PM

#

I think it's because data entries won't render above the image/initial title you might need to change from data to title on that one

#

So the honorific prefix today changes to
<title source="honorific_prefix">
<label>Honorific Prefix</label>
</title>

night hull Oct 11, 2022, 10:06 PM

#

ugh

Screen_Shot_2022-10-11_at_6.06.46_PM.png

#

now its got this

#

and it doesnt work

#

And now it says it cant parse the infobox

ancient sun Oct 11, 2022, 10:08 PM

#

Alright, time to revert changes, then. 😦

#

Hard to do this without being able to directly examine it, but so it goes.

#

Anyway, I found the code you need to fix alignment:

.portable-infobox .pi-title {
text-align:center;
}

#

If you place that in your MediaWiki:Common.css page, it should update all portableinfobox titles across all wiki skins

#

Changes on the common CSS page take a bit longer to go through, though.

If you want to test the CSS change faster you can put that code on your personal preferences > appearance > custom CSS page for the skin you're using instead.

night hull Oct 11, 2022, 10:11 PM

#

Awesome. Now I just have to find a way to add the prefix above the name

ancient sun Oct 11, 2022, 10:15 PM

#

Actually... this looks like it should all work. Can you go back to the TemplateData window on the template page and click on the Honorific prefix parameter?

night hull Oct 11, 2022, 10:15 PM

#

Ok

ancient sun Oct 11, 2022, 10:15 PM

#

I'd like to see how that's set up, I bet it's another one of those weird mismatches

night hull Oct 11, 2022, 10:16 PM

#

Screen_Shot_2022-10-11_at_6.15.58_PM.png

ancient sun Oct 11, 2022, 10:17 PM

#

Yep, that's it. In your infobox source code you have it referenced as <data source="honorific_prefix">

What you'll need to do is move what's in the Name field at the moment down to Label

Then, put honorific_prefix in the name field, click done, then save changes to the template page.

night hull Oct 11, 2022, 10:20 PM

#

didnt work 😦

ancient sun Oct 11, 2022, 10:20 PM

#

darn, otherwise the code looks fine...

night hull Oct 11, 2022, 10:20 PM

#

Screen_Shot_2022-10-11_at_6.20.25_PM.png

#

Screen_Shot_2022-10-11_at_6.20.37_PM.png

#

got it

#

how can i change the size

#

lmao

#

so many things

#

its a bit too big

Screen_Shot_2022-10-11_at_6.22.28_PM.png

#

also the prefix needs to be above the title

#

oh i cant just edit that right

ancient sun Oct 11, 2022, 10:26 PM

#

Darn. I'm out of time for today, gotta get started on dinner but that's gonna be a CSS thing a bit outside my skillset.

I'm guessing you'd want to create a custom type specifically for font size and attach it to that to the honorific_prefix data or title

Hopefully someone w/ better CSS skills can pick this up from here, you might have luck getting attention on this in the #general chat

night hull Oct 11, 2022, 10:26 PM

#

ok thank you so much for your help

#PortableInfobox Inquiry (created OBO user)