Images wanted

Introduction

I’ve often wondered where our statesmen choose to go once they have retired. Cecil John Rhodes, for example, died at 49 in a modest cottage at 246 Main road (Q20617285), on the way to Vishoek. Poor bloke. His Groote Schuur Mansion had burnt down about 10 years before. Today, Rhodes Cottage is a thatched building, but originally structure had an asbestos roof. The warrior / statemen Jan Smuts lived in wood-and-iron building. This pre-fabricated structure was made of wood and iron components and was once used as an officers’ mess. It was bought in Middelburg and re-erected on the farm Doornkloof. The house was also known as die GROOT HUIS*. (Q61930814) and is also known as the Smuts House Museum. Dr AB Xuma, medical doctor, leader, activist, president-general of the African National Congress (ANC) and signatory of the doctors pact, had a home on the corner of Toby and Thornton street. (Q20981521) in Sophia Town. Forced to leave in 1959, the house is known as Empilweni (the place of healing) is the Sophiatown Heritage Centre.

These are places worth visiting.

The cottage at Muizenberg where Mr Rhodes died "General Smuts’ Irene house in course of reerection"

When Nelson Mandela was released from prison he moved in to a house in 13th street in Houghton. After he and Winnie were divorced, he moved to a place in 12th street in Houghton in 1998. Madiba moved to 12th avenue when he married Graça Machel. Sanctuary Mandela is the name of the boutique hotel that now sits where Madiba’s house is. The hotel was amazing. I was a guest there of the Wikimedia Foundation and we had a superb lunch. The hotel has 9 rooms and each is centred around the decades he lived. I wish I’d taken more pics. This was also his last residence, any my kids left flowers outside.

I’d like to take pictures of these stateman’s places. For example, what about Thabo Mbeki’s house bordering on Riverlea and Houghton Estate. There is also Kgalema Motlanthe’s place in 8th Street, Houghton Estate. Each of these houses are an important part of our countries heritage. We can’t only have early colonists and nationalists on Wikipedia. This is part of the my (unpaid) work about communities that I am doing as a Wikipedian in Residence for Code for Africa (and my almost completed WIR).

Upload Images Features

Within the set of stylesheets I put together for Heritage Month, I’ve created place for something called “Images Wanted”, or “Upload images”. This is a function that allows the average Wikipedian to upload images when the template is called. Some have suggested that this function be placed on talk pages, while others put it right on the page that needs a picture. I’m going to suggest that this function can also be located in the Sandbox.

Screen shot of Template:画像募集中

I saw this function originally in Japanese (see Template:画像募集中) and Korean (see 틀:이미지업로드요청). It looks complicated, but there is a simple explanation.

You can initiate the function by writing familiar words in curly braces{{画像募集中}} . No, I don’t speak Japanese or write it. Neither do I speak vernacular languages. I can however code switch. For example, what does 利用者:Derek J Moore mean. Look at this in context.

On Japanese Wikipedia in my sandbox I added {{画像募集中}} and I call this function

After adding {{画像募集中}} and saving it, I can use the upload images function. You can upload images by pressing a hyperlink (or a blue button) or clicking the image of photographs and magnifying glass. This takes you to the upload wizard and you can there upload the desired pictures.

The template also permits you to place pictures into categories (Wikipedia:画像提供依頼/カテゴリ一覧). But I still need to figure this out.

Schema

We talked about blocks recently. Wikipedia allows you to create blocks too. If you write this on Wikipedia, then you’ll get a block.

{| class="infobox"
|This is an infobox
|}

Below is a more complicated block. The diagram shows how an infobox is combined with the function {{laisa setshwantsho}} and the associated parameters.

laisa setshwantsho

A Wikimedia Template.

{{laisa setshwantsho}}
Template Preview
laisa setshwantsho

laisa setshwantsho

Please provide an image related to these parameters.

Usage Example
{{Infobox
|name    = Derek J Moore
|title   = Laisa setshwantsho
|data1   = 
{{laisa setshwantsho
 |type=2
 |size=100px
 |cat=People
 |cat2=Cities
}}
|label2 = Instructions |data2 = {{{item_four|weblearning.co.za}}} }}
TemplateData Parameters
Parameter Type Default Description
type
Recommended
number 1 Placeholder image type.
1 = General
2 = People
3 = Buildings
size
Optional
string Image width. Example: 100px
cat string Image request category.
cat2 string Second category.
cat3 string Third category.
cat4 string Fourth category.
cat5 string Fifth category.
Template Structure
{{laisa setshwantsho}} Template
type Image type
size Image size
cat – cat5 Request categories
Prompted with Chat GPT

Notable code

The function consists of two words that describe the action you want to perform. Here are these words in the various languages. Please feel free to correct me (and Aunty Google) if we have made mistakes.

  1. nr Umhlahlandlelasakhiwo:Layisha isithombe
  2. nso Template:Kenya setshwantsho
  3. ss iThempleti:Layisha sitfombe
  4. st Template:Kenya setšoantšo
  5. tn Tempolete:Laisa setshwantsho
  6. ts Template:Upload xifaniso
  7. ve Template:Dzhenisa
  8. xh iThemplethi:Layisha umfanekiso
  9. zu Template:Layisha isithombe

For illustration purposes, I'm just going to focus on one language - Setswana. The same principles apply in all languages

Detailed Specifications

Step 1: Create the shell

"Upload images" (according to Google translate) in Setswana is "laisa setshwantsho". Go to the vernacular Wikipedia (e.g. tn.wikipedia.org) and enter the URL https://tn.wikipedia.org/wiki/Tempolete: followed by "laisa setshwantsho"

Screenshot of the template:laisa setshwantsho being created

Some people (like me) cannot understand this message that I highlighted in blue, but aunty Google knows the answer: "No text on this page. You can search for the title of this page on other pages".

Go ahead and press Dira motswedi (Create source).

You might see another message. "O setse morago kgolagano ya tsebe e, ise e nne teng gompieno. Go dira tsebe ye, simolola ka go kwala mo lebokosong le le latelang (bona tsebe ya thuso go itse thata). Ga o lefa ka phoso tobetsa boelamorago". Aunty Google translates this and says "You are following the link to this page, it is not available today. To create this page, start by filling in the following box (see the help page to know more). If you pay by mistake click reverse".

This is a bit garbled and it probably means that the instance is not being maintained. When I find confusing code, I look for other examples to draw on. The function is called https://www.wikidata.org/wiki/Q26127718 on wikidata. When I click on the Japanese version, I see the following

This might look a bit unfamiliar to some, but you can see the code in the tab called " ソースを閲覧" Go ahead and view the code there. What I do is I copy and past this code into a text editor. Then I translated bits of it.

[[File:{{#switch: {{{1|{{{type|}}}}}} | 1 = Gthumb.svg | 2 = Replace this image JA.svg | 3 = Requestpicture.JPG | #default = Gthumb.svg }}|{{#if: {{{2|{{{size|}}}}}} | {{{2|{{{size}}}}}} | {{#switch: {{{1|{{{type|}}}}}} | 2 = 150px | 3 = 230px | #default = {{{size}}} }} }}|link=commons:Special:UploadWizard]]
{{Clickable button|c:Special:UploadWizard|Upload Image|class=mw-ui-progressive}}

{{#switch: {{NAMESPACE}} | {{ns:0}} | {{ns:1}} = {{#if:{{{cat|}}} | [[Category:{{{cat}}} Image Request]] }} | #default= }}{{#if: {{{cat1|}}} | [[Category:{{{cat1}}} Image Request]] }}{{#if: {{{cat2|}}} | [[Category:{{{cat2}}} Image Request]] }}{{#if: {{{cat3|}}} | [[Image Request for Category:{{{cat3}}}]] }}{{#if: {{{cat4|}}} | [[Image Request for Category:{{{cat4}}}]] }}{{#if: {{{cat5|}}} | [[Image Request for Category:{{{cat5}}}]] }} {{Documentation}}

Step 2 | Copy and paste code for templates and modules

After pasting the code into the code frame, you can see a clickable picture in the view frame. This takes you to the Upload Wizard.

We want to also have a clickable button below (see the red link). So we create a Module:Clickable button and enter this code

-- This module implements {{clickable button 2}}.

local yesno = require('Module:Yesno')
local delink = require('Module:Delink')._delink

local p = {}

function p.main(frame)
local getArgs = require('Module:Arguments').getArgs
local args = getArgs(frame)
return p._main(args)
end

function p._main(args)
-- If first arg or a url is not provided,
-- but we have a second arg, make a button.
-- Otherwise, return nothing.
args.originalInput = args[1]
args[1] = delink({args[1]})
if args[1] == "" then
args[1] = nil
end

if not args[1] and not args.url then
    if args[2] then
        p.nolink = true
    else
        return ''
    end
end

local data = p.makeLinkData(args)
local link = p.renderLink(args.originalInput, data)
local trackingCategories = p.renderTrackingCategories(args)
return link .. trackingCategories

end

function p.makeLinkData(args)
local data = {}

-- Get the link and display values,
-- and find whether we are outputting
-- a wikilink or a URL.
if args.url then
    data.isUrl = true
    data.link = args.url
    if args[1] then
        data.display = args[1]
    elseif args[2] then
        data.display = args[2]
    else
        data.display = args.url
        p.urlisdisplay = true
    end
else
    data.isUrl = false
    p.urlisdisplay = false
    data.link = args[1]
    if args[2] then
        data.display = args[2]
    else
        data.display = args[1]
    end
    if args[1] and args[1]:find('http') then
        data.isUrl = true
    end
end

if yesno(args.link) == false then
    p.nolink = true
end

-- Colours
-- For the merge with {{clickable button}}
local colour = args.color and args.color:lower()

-- Classes
local class = args.class and args.class:lower()
data.classes = {}
if class == 'ui-button-green'
    or class == 'ui-button-blue'
    or class == 'ui-button-red'
then
    table.insert(
        data.classes,
        'submit ui-button ui-widget ui-state-default ui-corner-all'
            .. ' ui-button-text-only ui-button-text'
    )
else
    table.insert(data.classes, 'mw-ui-button')
end

--If class is unset,
--then let color determine class
if not class then
    if colour == 'blue' then
        class = 'mw-ui-progressive'
    elseif colour == 'red' then
        class = 'mw-ui-destructive'
    elseif colour == 'green' then
        class = 'mw-ui-constructive'
    end
end

if class then
    table.insert(data.classes, class)
end

-- Styles
do
    --[[
    -- Check whether we are on the same page as we have specified in
    -- args[1], but not if we are using a URL link, as then args[1] is only
    -- a display value. If we are currently on the page specified in
    -- args[1] make the button colour darker so that it stands out from
    -- other buttons on the page.
    --]]
    local success, linkTitle, currentTitle
    if not data.isUrl then
        currentTitle = mw.title.getCurrentTitle()
        success, linkTitle = pcall(mw.title.new, args[1])
    elseif p.urlisdisplay then
        currentTitle = mw.title.getCurrentTitle()
    end
    if success
        and linkTitle
        and mw.title.equals(currentTitle, linkTitle)
        and not p.urlisdisplay
    then
        if class == 'ui-button-blue'
            or class == 'mw-ui-progressive'
            or class == 'mw-ui-constructive'
        then
            data.backgroundColor = '#2962CB'
            data.color = '#fff'
        elseif class == 'ui-button-green' then
            data.backgroundColor = '#008B6D'
        elseif class == 'ui-button-red' or class == 'mw-ui-destructive' then
            data.backgroundColor = '#A6170F'
        else
            data.backgroundColor = '#CCC'
            data.color = '#666'
        end
    elseif p.urlisdisplay then
        data.dummyLink = tostring(currentTitle)
    end
    -- Add user-specified styles.
    data.style = args.style
end
return data

end

function p.renderLink(originalInput, data)
-- Render the display span tag.
local display
do
local displaySpan = mw.html.create('span')
for i, class in ipairs(data.classes or {}) do
displaySpan:addClass(class)
end

 displaySpan
        :css{
            ['background-color'] = data.backgroundColor,
            color = data.color
        }
    if data.style then
        displaySpan:cssText(data.style)
    end
    displaySpan:wikitext(data.display)
    display = tostring(displaySpan)
end

-- Render the link
local link
if originalInput and originalInput:find('|') then
    link = string.format('[[%s|%s]]', delink({originalInput, wikilinks = 'target'}), display)
elseif p.nolink then
    if p.urlisdisplay then
        link = string.format('[[%s|%s]]', data.dummyLink, display)
    else
        link = string.format('%s', display)
    end
else
    if data.isUrl then
        link = string.format('[%s %s]', data.link, display)
    else
        link = string.format('[[%s |%s]]', data.link, display)
    end
end

return string.format('<span class="plainlinks clickbutton">%s</span>', link)

end

function p.renderTrackingCategories(args)
if yesno(args.category) == false then
return ''
end
local class = args.class and args.class:lower()
if class == 'ui-button-green'
or class == 'ui-button-blue'
or class == 'ui-button-red'
then
return '[[Category:Pages using old style ui-button-color]]'
else
return ''
end
end

return p


Step 3 | Where are we ?

  • Done | We have written the template shell called Laisa setshwantsho
  • Done | We have added the code to go into the template shell called Laisa setshwantsho which calls on many pre-installed modules. It works but...
  • Oops | The red line suggests tha there is a missing module called Clickable button
  • Done |We have added the code to go into the Clickable button module.
  • Todo | We now need a template with instructions to also call (or invoke) the Clickable button module

If you go back to https://tn.wikipedia.org/wiki/Tempolete:Laisa_setshwantsho you will still see two big gaps. A red link and no documentation.

We need to create a Template called Clickable button. Click on the red links and then add this code. Check to see if everything works

{{#invoke:Clickable button|main}}
{{documentation}}

Step 4 | Register the template on Wikidata

Now go to Wikidata and register this template:

Step 5 | Lets use {{Laisa setshwantsho}}

A template by the name Laisa setshwantsho has been created. You call a template with curly braces {{}}.

Step 6 | Application, testing and documentation

You can include and upload images function by referring to {{Laisa setshwantsho}}. The Template documentation (as you can see) is blank and it needs to be created, preferably in vernacular. I'll leave that for a person who writes in Setswana (aunty Google gets things wrong often) .

I'm going to demonstrate how I included this function in my sandbox. First I go to Derek J Moore in Setswana.

I turn on code view, look for the {{Infobox}} and insert the function {{Laisa setshwantsho}}.

There, the upload image function now sits in my pretty sandbox. Would appreciate it if you can improve the documentation.

*Thanks to Mario for the spell checking

References

Statesmen and their websites: Rhodes, https://rhodescottage.co.za/, Smuts, https://www.smutshouse.co.za/ , Xaba, https://www.trevorhuddleston.net/ Mandela https://www.nelsonmandela.org/news/entry/a-tale-of-two-houghton-houses, Mbeki https://mbeki.org/ and Motlante https://motlanthe.org/

To find out more about translation and the work of South African Wikipedians in vernacular, do visit https://translatewiki.net

A post about lamp posts

🌞

Introduction:

Streetlights – it seems like there are far more pressing things to be irked about. But poorly maintained public lighting is a very visible instance of failing infrastructure and the opportunity to show that city management responds to reports and addresses them. An app to the rescue? That is magical thinking. Devices don’t bring about change. Systemic thinking does. Let’s avoid the pothole app solution. Perhaps there is someone in the municipality who can think wholistically about public safety and lighting and design an internal reporting system that encourages all municipal employees (and citizens) to do a streetlight watch (and doe not require the closure of a walk-in centre)? The specifications below are only for the application.

Features

Geolocation so that the latitude and longitude of the faulty street lamp can be mapped on a mapping service like leaflet. A photograph can be taken of the faulty light and shared for identification purposes. Textfield is available to report the nature of the problem in greater detail, but this should not be essential. User account so that reporters are acknowledged and appreciated. Data is submitted to an open database. The information then is available to all to inspect and it can can appear on an open street map (see the Daily Maverick example). Data can also be exported.

Schema for data flow

     Municipal Employees & Citizens
                │
                ▼
         Streetlight Watch 
                │
    ┌───────────┼───────────┐
    ▼           ▼           ▼
  GPS         PHOTO       REPORT
    │           │           │
    └───────────┼───────────┘
                ▼
       Insert to OPEN Database
                │
      ┌─────────┼─────────┐
      ▼         ▼         ▼
    MAP       ADMIN     EMAIL
              DASHBOARD  ALERT
                │
                ▼
         Maintenance Team
                │
                ▼
              FIXED

Noteworthy code

View the (incomplete) example on codepen.

Detailed Specs

  • Analysis: Current system and the desired state. Data flow diagram. Performance indicators and standard user
  • User Interface & Design: Choice of software, proposed new design, detailed design, template
  • Testing: App documentation, Problem reporting and resolution flow, Functionality (GPS Location, Photo Upload, map functionality)
  • Evaluation: Status Management, Report Numbers, Streetlights fixed

Credit to Pat Heathcote and her series of textbooks about ICT projects. Her work is far more comprehensive than this brief example.

Open Education Week

Wikipedia is 25!
by Visual Thinkery is licensed under CC-BY-ND

This post is over a year late. Sorry peeps. It took a visit to Wikipedia 25 to pep me up. It was GREAT!

A few minutes before going live!

3 – 7 March 2025 was Open Education Week 2025 and I took part in one of the OEWeek Live conversational webcasts . Clockwise (from at top left), Bryan, Gracie from Visual Thinkery, Alan at OE Global playing the ever gracious host, Werner (Library of Congress), myself (I like giving a backstage view), and Connie (Athabasca University) who is not pictured.

This was an informal and spontaneous regular cross continental conversation. Two topics stood out for me.

I’m a bit of a compulsive remixer. I mash up media components. I’ve played with PowerPoint and saved the layout of my slides as images in a PNG format. At one time, I spent lots of time on Adobe Express (the free version), arranging icons into patterns on a consistent colour palette (#002e67). Can’t license those images openly though.

.

Icons from the Ready for Work package at Pretoria University

Now Bryan’s Fabulous Remixer has a special flair. He makes use of well known patterns which become “cognitive templates”. Another piece of jargon? Let me explain.

In my mind, when you say “lampost”, I have a stored representation in my noggin that responds to this stimulus. I think about a tall pole standing straight up with a working light fixture on top. This is used for illuminating public spaces. Yes, check out my streetlight. Sadly you cannot save electricity and turn off the light. But you can toggle the switch from night time to day time. Which is very convenient.

So when you say postcard, I think of a postage stamp, address and short message. Bryan plays with this further with this idea with Field Notes and combines a taped photograph, a small note and a location. Now here in South Africa working streetlights are rare, and I can’t tell you when I last received a postcard. But these cognitive template still remain.

Now Bryan and Gracie have used creative and openly licensed layouts and applied a few cognitive templates to these visual arrangements. You feel creative because you can change and contextualize the information therein and what is generated feels like it comes from you.

I took the top trumps layout (the card game silly), inserted a logo, screenshot and book cover, selected own particular colours and added text. I now have a standard format and they can act as thumbnails or an image in a CSS card. If I was very able, I’d be able to use JSON and CSS to switch the images, colours and information. But without extra assistance, I’m struggling.

isiXhosa.click, Mthuli Buthulezi’s YouTube Channel and Digital & Visual Inter-Media Scholarship are three DH-OER Projects that I remixed using the Remixer Machine

Confession

I’ve succumbed to chatgpt’s JIT assistance with javascript and CSS. Been having fun with cognitive templates, like slideshows, maps, badges, certificates and palettes. Below is another cognitive template:

When palette is mentioned, you might think of the kidney or rectangular boards with thumbholes, that artists use when painting with oil paints. That’s if you you know an artist or did art at school. Now not everyone went to a school with an art class, or have friends who are artists. And so there is no cognitive template there (like with me and SPARQL).

I did do art and have a number of friends and family who paint, sculpt and potter. Clearly this is true for the LLM. I took a shortcut and prompted chat gpt to draw a classic wooden artists palette. It refused parroting “Image generation requires you to log in. Once you’re logged in, I can create a classic wooden artist’s palette suitable for your CodePen project.” I refined my prompt “draw a classic wooden artists palette in HTMLS, CSS and JS for Codepen”. And of course it obliged.

Now again, this is way beyond my CSS or JS capabilities. But I can go to the brand colours of Wikimedia and learn how to switch between different palettes. Or to Online Higher Education Sites and see how they morph from one brand to another.

Yes, the second topic was Humans and Ai? And in a way I suspect that AI has a range of cognitive templates (or ontologies) that have been engineered. I’m able to draw and combine on these patterns. I’ve got another template developing in my head, and it has to do with the root folder, and look and feel can be quickly changed, depending who is visiting. More about that later.

References

Jenny Y Sung, Olivia K Harris, Nicholai M Hensley, Anthony P Chemero, Nathan I Morehouse, Beyond Cognitive Templates: Re-Examining Template Metaphors Used for Animal Recognition and Navigation, Integrative and Comparative Biology, Volume 61, Issue 3, September 2021, Pages 825–841, https://doi.org/10.1093/icb/icab040

WIR Final Month

Screenshot of the booklet front page.

I’m back from Paris where I attended WikiMania 2026 and I picked up this Wikifying a Conference booklet. It has been put together by Tamsin Braisher and Mike Dickison. They have been “thinking openly” about how to Wikify a Conference. Their book is licensed CC BY SA.

I thought that I’d try to digitalize (not digitize) this booklet and take a different approach to capacity building. As part of my Wikipedia Work, I’m planning to run master classes. This Wikifyying Concept (if it works) might be turned into a Github repository, where we could Wikify other entities. These are the rough steps that I plan to take as I work to transmogrify (Finn, 1999 quoting Watterston, B) the booklet.

  • Planning the page
  • Choosing a palette
  • Creating a root folder
  • Building on what I developed previosly

Plan your page

If you check out the following simple diagram (chat GPT started this off) you will see that this proposed site has four page types.

├── index.html
├── style.css
├── script.js
└── API

1|Index – a clear structure.

The Wikifying a conference booklet TOC has three sections to it – Before, During and After. Each of these sections has a number of subsections. Although the index page in a paper based book usually contains all those options, on the web, I’d prefer not to show all the subsections (listed below) right away. People are overwhelmed with too much information.

Before the eventDuring the eventAfter the event
To Wikify…
The “W” Pitch
Plan to Wikify
Sharing your Credentials
Wikidata for the event
Wikidata for people
Commons before the event
Setting up
Identifying yourself
Photos and SSP
Name badges
Swag and Handouts
Wikidata clinic
Managing your time
Say your name
Uploading images
Tidy-up checklist
OpenRefine
Conference video
Scholia
Bulk uploading of images
Plan your reporting
Acknowledgements
Resources
Notes

On the index page, I will have make three visible sections (before., during and after) with links. Then once a person clicks on a section, they will then see a grid of posts that relate to the topics mentioned in the three columns (see above). The content of the posts will be served in different ways. This is not final, but “Before” might have a HTML page, “During” will pull its content using Javascript and a JSON file. And the “After” section could pull content from a my wordpress blog. This would allow me to have a guide that has both static and live information.

2| Style – Choose you palette

I have used CSS and HTML to create a palette in the root folder.

:root {
--primary: #E0552D;
--secondary: #DF7B61;
--tertiary: #224A6E
}

.palette {
  width: 300px;
  height: 200px;
  border: solid 1px black;
  background: linear-gradient(
    to bottom,
    var(--primary) 0%,
    var(--primary) 33.33%,
    var(--secondary) 33.33%,
    var(--secondary) 66.66%,
    var(--tertiary) 66.66%,
    var(--tertiary) 100%
  );
}

Change is good

Here is a screenshot of the index page intended. You’ll notice a similar layout that I used in my previous post. I am still using the primary and secondary colours but this time my banner does not have a gradient. I have still got the three buttons, a shadow, a globe and a plain (but slightly different coloured) background.

Look and Feel 1: Screenshot of a the front page but with a different root folder.

I am not the greatest fan of the “White label” practice, as I think that diminishes an organisations internal capacity. But as you can see, a simple switch of the root folder can quickly create a new look and feel. There is a chance that I might improve this page.

Mobile Friendly Page

The colours that Mike and Tamsin used on their pamphlet have been inserted them into my root file. I have also added a mobile stylesheet, with a media query. The screen layout changes with the hamburger menu and we get a pattywhen the screen is small.

Making it mobile friendly with a “hamburger menu”

Small screens are pressed for space and so we need to create a condensed interface. Sometimes the navigation is called a hamburger. I have created a patty. A media query on the style sheet determines when the screen is wide or narrow. When the screen is narrow, then the patty becomes visible. I’ve been experimenting with another option. When the menu is small and the links are only visible on a mobile screen, then the shape of the horizontal navigation changes.

/* =========================
Very small screens
========================= */
@media (max-width: 480px) {
  horizontalnav {
    min-height: 70px;
    padding: 0.85rem 1rem;
  }

  horizontalnav h1 {
    font-size: 1.25rem;
  }

  horizontalnav label {
    font-size: 1.5rem;
  }

  .patty {
    top: 15px;
    right: 15px;
    width: 64px;
    height: 64px;
    font-size: 9px;
  }
}

You can see this in action when you go to codepen and widen or narrow the browser window

Look and Feel 3: Screenshot of the solid background on a mobile device

Now lets say I want to have a collection of conference images and I want to combine it with an orange coloured gradient overlay. In the code, I’d switch to back ground image (instead of a background colour). Then add the variable called bgimage to my root folder.

:root {
  --bg: #E0552D;
  --primary: #BD3417;
  --secondary:#224A6E;
  --dark: #BD3417; 
  --cream: #DF7B61;
  --white: #ffffff;
  --shadow: 0 4px 15px rgba(83, 97, 116, 0.5);
  --globe: #ccc;
  --bgimage: linear-gradient(
          110deg,
          rgba(224, 85, 45, 0.1) 5%,
          rgba(224, 85, 45, 0.4) 20%,
          rgba(224, 85, 45, 0.9) 90%
        ),      
url("https://upload.wikimedia.org/wikipedia/commons/0/03/Wikify_Conference_Cover.jpg");
}
Look and Feel 4: Screenshot of code and a background image that has a gradual gradient

A background image that now appears on the front cover and there is a colour gradient. The one side of the hero image is relatively transparent while the other side is strongly orange in colour. heading and turned it into a gradient.

.presentation {
width: 100vw;
height: 100vh;
background: var(--bgimage);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

Replace var(–bgimage) with var(–bg) and you will have a solid color again.

Now after all this work, I’m still wondering if my index page should have three columns. And so I throw in three columns below the white background and text (or the image, depending which one you selected)

3 | Script JS

Confession: I cannot really do javascript from scratch and although I’ve been playing and programming with Javascript components and I know enough about variables, DOM manipulation and dynamically modifying pages. Chat GPT has made me feel far more cleverer than I am. I have used it to create a number of functions that talk to the Wikimedia API. These functions include a

  • Username checker
  • Contribution checker
  • Wiki list tool
  • People List Builder

These scripts are in still production and will appear on Github and licensed openly

4| The API

The text and media that I have drawn on is not contained within the page. Some of the text sits on Wikimedia and servers. And other content is being pulled in from my blog or an individual JSON file by means of a call back function.

Broad strokes

“To transform is to execute change that can be reconciled with what pre-existed. To transmogrify is to change in a way that cannot be so squared (Finn, 1999). You can check out the idea at Codepen.io/ Please note that all of these plans are open to change and interpretation.

Credit to: Braisher, Tamsin and Mike Dickison (2026). Wikifying a Conference: a guide for Wikipedians. Christchurch (N.Z.): Rove. Wikidata Q138850793

References

Finn, J.E. Transformation or Transmogrification? Ackerman, Hobbes (as in Calvin and Hobbes), and the Puzzle of Changing Constitutional Identity. Constitutional Political Economy 10, 355–365 (1999). https://doi.org/10.1023/A:1009023000354

4 Months into WIR

AWA Website (work in progress)

This banner has a gradient background

To create a branded identity for an organization, start with their current colours. I usually generate a colour palette by visiting the organisations website or checking out their logo (the African Wikipedia Alliance has the latter, not the former). I thought I’d help out (hate them to feel excluded).

Wikipedia:Lets_Go

I use a colour picker to assist with the selection of the two hexadecimal colour codes (blue and red) from https://codeforafrica.org/. I then apply CSS to create a gradient effect on the web banner (or hero image). The gradient runs at 45 degrees. The effect is this multi coloured banner (see above) made from two colour codes

Lets start building

This <block> </block> combined with “background-color” gives us a red brick (good for building)

Red brick

This large heading below <h1>blue heading</h1> combined with “colour:#0818E0;” can give us a blue text colour. H1 also has smaller siblings (all the way to h6)

This is a blue heading

You could also use the word red and blue to determine the brick and heading colours. I prefer hex codes as they are more precise about the colour. So lets go to CodePen and build a bit with headings, blocks and gradients.

  • <H4 style=”color:white;”> changes the text colour of a heading
  • .block{background: linear-gradient( 45deg, #0818E0 0%, #E81020 100%);} changes the background colour of a block into a gradient which runs at 45%

#0818E0 <—Blue gradient all the way into red —>#E81020

<style>.block{
  background:
    linear-gradient(
      45deg,
      #0818E0,
      #E81020 
    );
h4{color:white;}</style>
<br><div class="block"><h4>#0818E0 &lt;---Blue gradient all the way into red ---&gt;#E81020</h4></div>

It could be a bit difficult to understand this explanation without practice. So I suggest you look at my Codepen example, and then try constructing your own banner on your own Codepen account

Wikipedian ALLIANCE

Thus far I have made use of three colours. As an old forgetful man who tends to forget where he puts his iPad, a central root for all colours is very helpful.

:root {
--primary: #0818E0;
--secondary: #E81020;
--white: #FFF
}

….Now where was I? Oh yes, these three hex codes are a part of my root folder (see above). My primary colour is a colour I drew on frequently. In the block example above, I have chosen to use #0818E0 (blue) as my primary colour. Red (#E81020) was a secondary colour which I can use as an accent, for buttons and lines. I want to change this block into a horizontal navigation bar that has three different buttons. Before, During and After.

Why a root folder? Apart from my forgetfulness, I can place these defined hex codes in the root folder and then call these colour variables in my stylesheet. This allows me to experiment with a different look and feel and if I change a few variable values there is a global change to the page. Here’s an example. Below are the colours from the root folder, that have been placed in two flags from countries I visited recently.

CSS to make flags

<style> .french-flag {
  width: 300px;
  height: 200px;
  border: solid 1px black;
  background: linear-gradient(
    to right,
    #0818e0 0%,
    #0818e0 33.33%,
    #ffffff 33.33%,
    #ffffff 66.66%,
    #e81020 66.66%,
    #e81020 100%
  );
}</style>

<div class="french-flag"></div>

When I was in France at Wikimania 2026, I picked up a lovely booklet about Wikifying a Conference. CSS could allow me to customize the look and feel an existing work and I could put those colours in a root folder..

Bullets,to Buttons, bricks to clicks

Wikipedian ALLIANCE

Within the block with a title and a gradient colour background, I have placed hyperlinked bullets, entitled.

  • Before,
  • During and
  • After
<ul>
  <li><a href="before.html">Before</a></li>
  <li><a href="during.html">During </a></li>
  <li><a href="after.html">After</a></li>
</ul>

CSS can be used to modify these bullets. First we remove the list-style and we then centre the text. With a bit more code, they become buttons. With a blue background and red text.

The CSS to make these buttons is fairly simple. You know all about the root folder by now. We can use the CSS to change the bullets to clickable buttons that change color when pressed.

<style>:root {
--primary: #0818E0;
--secondary: #E81020;

}

horizontalnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  min-height: 80px;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
}

horizontalnav h1 {
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--secondary);
}

horizontalnav h1 span {
  color: white;
  font-family: Georgia, serif;
  font-style: italic;
}

ul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

a:is(:hover, :focus-visible) {
  background: var(--primary);
  color: var(--secondary);
  transform: translateY(-2px);
  outline: none;
}
  </style>
<horizontalnav>
      <!-- Always visible items in the nav bar -->
      <h1>
        Wikipedian
        <span>ALLIANCE</span>
      </h1>
<ul>
  <li><a href="before.html">Before</a></li>
  <li><a href="during.html">During </a></li>
  <li><a href="after.html">After</a></li>
</ul>
    </horizontalnav>

Wikipedian ALLIANCE

There we are, a banner with a gradient background a title and three buttons.

Review

I’m hoping that you have seen what I have put together and started building with blocks, banners, colours, gradients, buttons and hyperlinks on an HTML editor out there.

Below you will see that I’ve used the initial color palette in the root folder and added two more colours. The round globe is grey (#CCC) and there is a subtle shadow below the banner (drop-shadow(rgba(83, 97, 116, 0.5) 4px 5px 4px);) You will then see that I have repeated the gradient pattern below the banner. There is a watermark called “W”, an eyebrow “Scholars • Curators • Archivists • Musicians”, the same title (its clickable) and a subtitleand then my name”: “Derek Moore” .

Look and Feel 1: Screenshot of a the front page of a Wikipedian Alliance front page that I created.
P.S. If you go to the codepen, you will discover that there is a hidden hamburger menu with a patty. It only appears on the narrow screen. I hope that it works on Github. Some of the content from this page should also be pulled in from a separate JSON file. But that’s the subject for another day.

Codepen: CodePen code is MIT licensed. See their terms of Service https://blog.codepen.io/legal/terms-of-service/

Two months into my WIR with Code for Africa

This Wikipedia world can be brutal. But that is to be expected. The last of the five pillars of the movement makes it very clear. “Wikipedia does not have firm rules.”

https://en.wikipedia.org/wiki/Template:Five_pillars

Weirdly enough this approach works for me (perhaps my anarchic self enjoys it the frission and debate). But this community space also is organised and safe.

Q: Would I use online English Wikipedia for children to participate in?
A: Nope. This is not a place for nurture.

Q: Would I teach a class of teens how to contribute to an off line vernacular version?
A: Most definitely yes. There are so many examples to learn from. Some will take this further, which is awesome (see https://en.wikipedia.org/wiki/Scots_Wikipedia). Warning: English Wikipedia is a rabbit hole. But the media server is pretty good.

Q: What do you like about Wikimedia?
A:I’ve been teaching myself GeoJSON (combining open street maps and templates). Wikidata Queries is fascinating for those who want to see the semantic web. The translation options are well designed. Those who get “transclusions”, modules and templates, will enjoy the opportunity to practice computational thinking with a Wikimedian in Residence

Q: What about University students?
A: Most definitely yes. Get off the LMS and practice your thinking in public. Do it together (edit-athon), its safer. And then “scholars” who wish to push themselves onto the knowledge graph or who have some desire and need to game this system. I’ve been quite surprised at what Wikimedia can do.

I’m off to Paris for Wikimania at the end of July and I am SO excited. Looking forward to seeing you there.