 Hi my name is James Gaughan and I am here with Sam Wilson. In this video recorded earlier this year we are going to talk to you about a media wiki skin called WMAU because it was developed for and is used by wikimedia Australia's website. The WMAU skin was developed by Sam Wilson and Caddy Brain and went live in 2021. Since then it has been tweaked here and there to meet our needs. Anyone can install it on their own wiki and we will show you how you can turn your wiki from something like this to this. I'll hand over to Sam now to talk a bit about his work on the skin and then I'll give you a bit of a tour around how I've been using it, adding events and blog posts to the WMAU website. Hello everyone I'm Sam Wilson. I've been looking after the wikimedia Australia website for the last five or six years. The website has been in existence since 2008 and of course it's built on media wiki software we use for all the wikis and in about 2018 I joined the wikimedia Australia committee and we decided to redesign the website to make it a bit more user friendly. What we can see here is the wikimedia Australia website in 2011 as it looked then using the mono book skin and it went through a few iterations after this but basically it retained the familiar sidebar and top tab structure that we know and love so well. So in about 2017-18 we started a redesign and we ended up with something that looks like this. There were a bunch of other things we went through before this in about 2015 we set up a WordPress site with the idea that there would be a separate blog and that news could be posted there and it was completely separate from the wiki and eventually after a year or two it wasn't really updated. There were only about seven blog posts in it and it really wasn't working. So part of the restructuring was to move the few blog posts from that blog into the wiki and then redesign the wiki. So I think the crucial part of that the real decision there was to not have to migrate all of the content to another platform. One of the reasons we wanted to not move to a different platform was that we had a large number of pages already on the wiki and we didn't want to have to go through and migrate them to a different platform to WordPress or to something else. Not all of them in fact at the time a minority were news type pages or posts that had like a publication date and would have fit neatly into a different system. So there's about a thousand pages now and at the time we wanted to just change how the site looked but not have to teach anyone other editing skills or other software and not only not have to set up anything else on our web server but we could actually uninstall WordPress around the same time we uninstall CVCRM as well to lighten the load on the CSS admins and just cleaned up a few other things and really focused on the public wiki that you can see here and we also have a separate committee only wiki which is pretty much the same thing. So yeah basically the redesign technically is just a new skin it's called the WMAU skin and it's of course open source and available to anyone to use and the basic design of it was to really put the content up you know front and center and make it easy to see and not get distracted by all of the navigation and editing tools. So James is going to go through more of the details of this but you can see here that I'm currently logged in and so we've moved all of the editing and administration links to this pop out side draw that appears and you can navigate to things and even in here this isn't all of the available links from the normal toolbox and top tabs and personal URLs and all of those different things. We've really only kept the necessary things and you know we have added a few extra things here and we've taken a few things away when they're not used. So it's really trying to simplify it and just slim it down a lot. So I think that's worked reasonably well. So we really wanted to slim down the interface and avoid extra clutter and extra complexity. So we really wanted to simplify the layout and focus on just what was necessary and nothing else. So the main structure is that there's this top bar with a menu and at the end there's the search box. Then the white area in the middle is the main content area and at the bottom we have the site logo, a blurb and a series of links. All of these menus are modified on the wiki itself via the wau-config.json file. So this is a custom page that's specific to this skin. So it's a little bit similar to the standard sidebar page that defines what appears in the sidebar and some other skins like the foreground skin and some others take the sidebar page and use it for effectively what we're doing here. And we did actually start doing that and then we quickly realized that we wanted more configurable options. So for instance the about link here is just a simple link. It's just a link to the page about. Whereas the next one, the wau-con link is a label with a link to a different page. So if we hover over that we can see that it goes to the events page rather than the wau-con page. In the footer menu there's even more customizability. So for instance this first item here it shows all of the five available options for any of these links. You can link to an external URL with a particular label and a tooltip. And if you give an icon then it won't display any of the others. If I scroll to the bottom you'll see that these are all showing just as icons and then the labels are shown as tooltips. Whereas the others are showing as normal links. So all of these links are customizable except the login log out link at the end. That's hard coded and always there because otherwise if in an initial install of the skin you have no way of actually logging in. And when you can't log in you can't access any of the other links. So it's a bit of a normal link. That's about it for the configurability although we do have all sorts of plans for the future of making it better. So the other big aspect of the skin is well it's not so much about the skin but the way we restructured the site is that we switched to using cargo a media wiki extension which is really useful for storing structured data about pages. So what cargo does is it creates a database table and allows you to store what is effectively information from an info box into the database table. And then you can query that anywhere else on the wiki. So if I jump into editing this you'll see that there is a blog post template with a bunch of attributes and each of these attributes is saved by cargo so that we can then call them query the all of the blog posts and display information about each blog post wherever we want to. So if we jump into editing that template. I won't go into the details of what's actually going on here. It's all available on media wiki.org but interestingly we can look at the table which is a separate database table from the rest of the wiki data and every time you save a blog post its metadata is saved into this table. So you can see we've got 107 blog posts and they've got a date and some authors and various other metadata. So if we go back to one of these you can also see the same metadata via the page values link in the side drawer. And so this is the same just in a slightly different layout. So that means that on the news page you can list all of the in fact in this case the the most recent 18 blog posts. And so this syntax here is querying the blog post table and it's not displaying posts that are either draft or hidden and in the future. So this works pretty well and is incredibly flexible. There are some slightly annoying aspects to it especially around caching of pages. So after you modify any metadata of a page it doesn't immediately update all pages that use that metadata in a query. So that can be slightly annoying but it does make for better performance. Okay so the other main component that we have on the redesigned website is an events listing for coming events. These are sort of similar to blog posts in a way in that they've got a date and a title and we show them in an ordered list. But the way we display them is fairly different. They're generally shorter things, they're calling people to be interested and to possibly signing up to something or to linking to an online workshop. Underneath they're pretty similar. They're still a cargo table with a bunch of event data saved. So if I jump to the page values of this one for example you can see there's a start and end time, a location which the location attribute we began back in the days of mainly offline meetings and nowadays with mainly online meetings I think we're going to have to do some more work to more easily and correctly categorize things according to region and location. Coordinate means that we can display a map of things so if we go to the event map page for instance yes so showing that in fact mostly these days we have online events it was that we would have more offline events and so that we would have nice maps and show things. If I jump back to an older event for example so each event gets a map with a pin in the location that is to be held. The other thing we can do is download an iCalendar file for these so that means that you can download it and add it to your calendar and you'll have all of the event details in your calendar. The more useful aspect to that is if I go back to the event map where there's a link the other aspect of having all of the events in a database like this is that we can have this URL here slash events.ics which people can then subscribe to in Google Calendar or wherever else they use events and that way all of the events will be kept in their calendar and always up to date and this URL shows all coming events and all events from the last two months. It's limited to the last two months because otherwise the event calendar just gets bigger and bigger and bigger and slower to load and most people don't care about particularly old things so that's a really useful way to to get event data out of the website. iCalendar is another feature of the cargo extension. So another part of both blog posts and events is the metadata also gets exposed in open graph format so that gets used when you share a link from the website on social media it can specify things like which image to use what description text to use and other things like that so by default it would use the site logo but you can override that and use a particular logo for the event or for the blog post. So that's sort of the the the current state of of the Wikimedia Australia wiki and it's certainly a big jump ahead of where it used to be but we've got a whole bunch of plans about how to make it better. So a few things that i've been working on lately are rss feeds so that you can subscribe to feeds for recent news and various other things and better ways to enter the data. So at the moment we can edit a page and we can edit the the template and all of its metadata. We also have the page forms extension installed which means you can edit the same page via a custom form so that's what we're looking at here. So there's the first three fields and a bunch of the help text above it are about handling time zones so there's a bit of complexity there that hopefully we're gonna we're gonna get into and we're gonna figure out better ways of recording times and talking about times and making that a lot simpler. The other things like the coordinates I was mentioning earlier you can click on a map or you can look up an address and it will jump the map to the to that spot and you can you can put a pin in it. The other part of the event's template and the form is that after an event has happened we can put in information about what happened, how many people came, the cost and whatever else we want to. So for like editathons we put in specific editing metrics and and other info like that and it just means that everything gets stored together in one place and then can be queried and aggregated later on if need be. To go back to the time zone issue the reason we have a number of different ways of dealing with this is that we often have events well this doesn't really apply to online events so much because people can join from wherever but when you have an event in person you want the time that's displayed to be the local time for that event but that's not true of all events so we have to have a system that can work with events that happen in particular places at particular times also events that are available to anyone but we want to advertise them at in particular times but we also have things like Wikimania and other international things, ECAP events that we don't necessarily want to say that they are happening at a specific time we want to show it in the user's local time so we're doing some work about how to make that easier and hopefully that'll be done pretty soon. So another aspect that we want to improve is on blog posts and news articles we're thinking of better ways of engaging readers and making it easier for them to leave comments so at the moment we've got to discuss this page link and that's just a link to the talk page which isn't used very much and if it is used it doesn't indicate anything here to make it obvious that there is a discussion going on so one possibility is that we'll list the contents of the talk page at the bottom here and have a box for entering new comments and I think probably some better systems of trying to get people to log in or make it easier to create accounts or log in via external accounts the details of that I think we're we're still figuring out. Hi I'm James and I'm going to give you a bit of a tour of the Wikimedia Australia website so as Sam has kind of gone over it's pretty basic standard nice website you've got your logos you've got your links search bar content on the front page and yeah social media links and other links down the bottom so this is how it looks if someone is logged out so there's no like menu for editing the page anywhere we go to this page here there's no little editing links anywhere but if we log in now we've got the editing toolbar for logged in users and we've now got the option to edit the page or edit in source and so this is kind of nice because it means that if you're one of the managers of the page if you're one of the contributors then you can kind of jump in and fix things really quickly but if you're just a viewer of the page if you're just a visitor then it just looks like a normal website but yeah so what's really cool I think about the front page is how we've customized it so it's got some standard text but I'll just go into edit source and where are we we've kind of got this card here that was like a green logo which is on the left hand side and then we've got these upcoming events which are pulled from our events page our events calendar which is on the right hand side and so they're pretty customizable like we've made it so you only see three upcoming events but yeah with that card with the Craig Franklin award which is currently there we've made that so we will manually update it and down the bottom of that we've got the latest news section and that's pulling out blog posts or news posts that we've put on the news section and we've also set that to show the three most current ones if we go back to front page you can kind of see that yeah they're pulled out the three events it's got this article or this this link and some links here that you can just leave it they will update themselves as we post new news articles and the events will update themselves but we can customize what's in this area we used to do it a little bit different we used to actually have lots of these cards spread out down the page at different sizes but because we're actually really using our blog news area a lot more recently it just kind of makes sense for it to automatically update itself so that's the front page as I mentioned all the other pages are just like a normal web page lots of links just like a wiki you've got blue links if it was going to a page that didn't exist to be a red link but we don't have any of those the what's on page is where all of our events are so recently I went and added a whole bunch of events for the rest of the year so that's why it's so long and that's kind of pulling out everything from our events calendar that's upcoming you can see where it says past events that's where it collects all of the previous events that have been held it's also showing any event really but yeah as we go down the list is quite long with our wikimedia Australia has had a lot of events in the past well since 2009 I guess but yeah another cool thing I guess about the events section is that you do have a calendar view so you can see wikimania ran for a week or almost a week recently and we've got some upcoming events here and clicking on any of these will take us to their individual event pages where there's links tells you about what time it is what time zone it's in the image all that but yeah as Sam kind of mentioned as well you can subscribe to the calendar by clicking on this link and adding it to your personal calendar every time there's an event added to our calendar it'll push it to to your calendar so you can see it which is really handy so to add an event you just click the create a new event button and it takes you to this page so we want to create an event called superstars of stem Sydney so we create new event and that takes us to this form and because Australia has so many time zones we kind of have got this little table here to make sure we get it all right so I want to make an event for the 6th of October 2023 we're going to end on the 6th of October as well and it starts at 10 a.m and now we need to make sure we've got the right time zone I think it is still EAST that day let's paste that in there and it will finish at 3 p.m and then for the time zone for display so this is when the event will happen but we maybe we'd want it to display in a different time zone if it was an event in Singapore we might put the event time in for Singapore but then we wanted to display in the time for Sydney or whatever it is and normally we're just dealing with different Australian time zones but we're going for number 10 this is why we've got this here pretty handy as Sam mentioned there is work to improve this because it can be a bit confusing but we've tried a couple of different ways and that's even more confusing so this is kind of the best way to do it at the moment so then we check our region so if it's national international event but we want New South Wales it's going to be at the University of Sydney and we could put in the coordinates let's see if that can get it from there yeah there we go so let's put in the coordinates for University of Sydney I'd probably double check this later to make sure I actually have got the exact address and then we'd put it in normally we put an event bright link or somewhere where people could register if it's online we'd put a zoom link in there currently there isn't actually a event bright link to go up so we'll come back and edit that later and I'm just going to chuck a description but I'm going to copy and paste it from somewhere else and I'm going to put in a quick description but I'm going to build it up later on so we can select a keyword as you can see here it says that'll add a category to the bottom of the event we can add an image so what's cool about the Comedia Australia website is that it'll actually pull images from commons if we've got one so just as an example I am going to pull one without the file prefix I'm just going to chuck in an image of the University of Sydney and yeah this area will be completed at a later date number of attendees and that's really good for metrics summary created page you know there's so few people using this website I don't know if we really need that but anyway and then yeah just click on save page and there we go so it's got the image it's got the name the short description is here just slightly larger text it's got the larger description and as I mentioned we've got the the region here is New South Wales and you can see when the previous most recent event was in New South Wales and you can also see the categories down here so it's automatically added events in 2023 and events in New South Wales and we had also put in ourselves that it was an editor song so there you go but yeah I did mention that you know this is a pretty bare bones description we do want to update it at some point with more details and probably a way for you to book in so we can do that by either editing the form that'll take us back to the previous screen but I normally would just jump into edit source so editing with source editor yeah that's kind of pretty easy breezy you can kind of get a better idea of how the page is laid out too and once you're done you just click save and yeah so if we go to what's on which takes us to the event page let's see when was it the 6th of October so it's not there yet that's okay we can just purge the cache and there we go it's added it here and if it was one of the next events coming up it would also add itself to the front page because we do have that little template that's pulling the most recent events here but that is the events section I mentioned that we have these cards on the front page you can kind of see a few here so we just kind of use them to cleanly display different links sometimes if we just want information on a page our projects and partners page has a few different ways to display this so you've got the the two cards then we've got the three cards we've got the one big card this is all pretty customizable I will say that editing it in visual editor is a nightmare that's what it looks like so I would normally just edit it in source and it is quite easy just link cards link one title one body one image one and again pulling images from commons or from our website if we've uploaded them there so I'll just show you the news page now as Sam has already shown to this has shows our most recent blog posts or news updates that we've done all using the blog post template you can see August has been pretty busy we've been posting a lot and if we go down to the news archive we can see a list of every single blog post we've made so there's been quite a lot in the last couple of years but in 2015 there was quite a few and then there was a bit of a gap for a while so they're all collected there and those can be backdated as well you can create a blog post with a date in the future or a date in the past and it will put it in the correct order putting a date in the future will schedule it so it won't actually appear here even if you were to purge the page a few times it won't appear up until that date and for me I'm in Melbourne and I find that it normally will appear about after midday and as mentioned as well before the front page is kind of using the same template and just displaying the three most recent news posts whereas on our news page it's showing the most recent 18 and also it's not showing any that are tagged with a draft or as hidden in the mode section and I'll just very quickly show you a bit about that so if I go to this blog post that I posted recently and I'm going to go to edit source and you can see it's got the mode here and you have the option to put in draft featured or hidden and putting in draft would mean that well I'll just show you so now there's this little message here to say that the posters are draft and if we go back to the news page it probably probably will have disappeared yep and so you can see that that blog post is actually now disappeared from here because it has been marked as draft so I will go back and undo that and you can see you've got the standard blog post things the other date the image which is taking from commons I've chosen to hide the banner so the the banner image is this one here and that's what's displayed in the card on the in the news section so sometimes I like to leave it at the top but it tends to kind of crop weirdly especially if you're using different size screens there is a way to kind of make it so that it is kind of centered but for some images it will just never look good so I tend to hide it you've got the author name which I will talk about a bit more in a moment keywords which are just like categories I tend to kind of add them in later and but it would be a good idea to get in the habit of using them description is that kind of short description at the top of the page and then we've got the article itself so in source editor it just really just looks like a normal Wikipedia page but we've also got a video editor of course and there we go that actually looks quite nice lovely blue links of course I got some images in this gallery and if we wanted to edit the blog post template here we can again date author's name description image and yet we have mode and you could just type in draft or whatever if you wanted to so I will just save that okay so yeah another really interesting thing that I like about this is the author link so clicking on that will take you to the user page okay so as you can see my username is slightly different to the my actual name so the name that I was using as an author on the blog post but we did a little redirect that sorted that out so on my user page I've got a bit about me we added a little authority control thing just for a bit of fun and it's also listing all of my blog posts actually because I've written so many we limited it so it's not actually displaying them all but there you go to create a new blog page we used to have at the bottom a link where you could just like how you can create an event you click create a new blog page but because it was really just me making these pages we kind of removed it so that people who worked logged in wouldn't get confused and think that they could add new pages so the easiest way to do it is actually just to change the URL and create something that doesn't exist so yeah talking in a title it doesn't exist we'll take you to this page asking you to create the page just like Wikipedia and here we are it does default to source editor but you can switch to visual editor you know we'll just do that but at the moment this is just like a normal wiki page there's nothing to make it appear on the news section so we need to go to insert template and then insert the blog post template and then yeah first thing we want to do is add the date and then a quick description and I'll leave keywords blank but I do want to add an image so I'm just going to go to commons and get one I'll tell it not to hide the banner so that's okay let's leave that and I'm not going to make it a draft normally I'll do that in mode anyway okay so that's all I need oh author and yeah myself as the author all right so yeah otherwise it's just like creating a page any page on a WordPress or even visual editor wiki add in some links to cool stuff what else we want to do add some links to other pages and let's add an image as well cool and then we can drag that around it's just like doing any anything in visual editor on on wikipedia we can jump into the source editor if you prefer so I normally like to add no table of contents to stop a table of contents appearing if there's lots of headings but yeah do what you want and once you're ready to publish click save page and there we go it's got the heading image it's you know as I said it's a bit cropped weirdly it's a incredibly large image looks at it but it's also probably because the the size of my screen and when we go to the news section we might have to purge there we go it appears there and if whatever reason we've made a mistake we can just go in and re-edit it so in visual editor or in source editor I'm just gonna make a hidden page and that should remove it from the news section there we go it's gone yeah so that's those are kind of my two favorite things about this skin I mean it looks beautiful and adding articles is really easy adding events is really easy and there's great customization to make you at the front page just display exactly what you want I also like how we're able to add icons to all of our social media as well as just a few more links as well to other things so the skin that we've developed for wikimedia australia is open source and available for anyone to use you can download it from media wiki.org and it is currently being used on a few different websites around the world and it's available on some wiki farms like mirror haze and if anyone does try it and or even wants to get involved on the wikimedia australia wiki if you find any bugs you can jump over to fabricator and we would love to hear about anything that can be improved just create a bug on the wikimedia australia project on fabricator and we'll we'll try and see to it you can see we're currently working on the time zone issue thanks for watching if you'd like to find out more about using the wmau skin take a look at the links in the video description or go to media wiki dot org and search wmau where you'll find the wmau skin page and contact details for sam wilson alternatively head to the wikimedia australia website at wikimedia.org.au and you can contact the wmau team directly