The old-school way of adding content to the side of the donation form is just to put it in a wikitext page and send its name as the 'appeal' parameter instead of 'JimmyQuote'. The wikitext page can include CSS and JS. This would be the least amount of work for FR-tech, but there might be some styling jumps after page load, due to late-rendering CSS and tokens like the donation amount in the side text being rendered as a placeholder then replaced in JS. I think Ramón could test in payments staging, or if that's not feasable one of us could leave our dev machine connected to the proxy for Ramón to test this out. We'd have to do it all in wikitext for donatewiki anyway.

The alternative would be to use the 'variant' mechanism, which lets us render stuff more flexibly but would preclude us using variant to test things like the monthly/annual convert variants.

Hey all! I've completed the donate.wiki part of this WP25 design, you can see it here: https://donate.wikimedia.org/?appeal=WP25

@Ejegg As you mentioned, I've also coded this all in one place by creating a wikitext page and then using the appeal parameters: https://donate.wikimedia.org/wiki/Template:Appeal/WP25/en?action=edit

Not sure if applying this on payments.wiki would work right out of the box but perhaps the HTML markup is close enough that a few edits would get it there!

Change #1197285 had a related patch set uploaded (by Ejegg; author: Ejegg):

[mediawiki/core@fundraising/REL1_43] Add files for WP25 appeal

https://gerrit.wikimedia.org/r/1197285

Hmm, trying this locally I get an error that raw HTML tags are not allowed in the template. The way we're parsing the template to include in the mustache file, it's not currently possible to override this with $wgRawHtml=true. I'm exploring other ways to parse it.

Change #1197302 had a related patch set uploaded (by Ejegg; author: Ejegg):

[wikimedia/fundraising/dev@master] Add WP25 appeal template

https://gerrit.wikimedia.org/r/1197302

Hey @Ejegg, just had a conversation with our team on this. We agreed that if it ends up being too difficult to recreate this 1:1 in payments.wiki, we'd be fine with adopting simpler design elements. Such as

• Turning the background orange #FFEDDD
• Adding a heading that reads Celebrating 25 years of knowledge at its best

It would be great if we could get the Wikipedia 25 logo in there though!

On the flipside, if you do manage to get all the content in but some elements turn out wonky due to different HTML markup, I can assist with edits and pass them along here.

Change #1198391 had a related patch set uploaded (by Ejegg; author: Ejegg):

[mediawiki/extensions/DonationInterface@master] Allow raw HTML in appeal

https://gerrit.wikimedia.org/r/1198391

Hi @ppenloglou , so it turned out not to be too complicated to render our appeal templates with raw HTML (it did mess up the && in JS, so I had to alter one conditional). However, the HTML around where it's inserted on payments-wiki is a bit different from where it's inserted on donatewiki (payments-wiki doesn't have those div.mw-parser-output tags), so I had to adjust a bit of JS and CSS. I haven't quite got everything right, but I've copied a static version of it up to https://ejegg.com/WP25paymentswiki.html.

Would you like to try to fix the CSS on that static copy and let me know what you had to change? Then I can get the template onto payments-wiki for some more testing.

@ppenloglou Hmm, I see that the 'static' version I saved via Firefox has got the header already moved in the HTML. This is what the wikitext template looks like locally: https://phabricator.wikimedia.org/P84295

Another attempt at a static mirror, with the HTML as delivered by the server. Seems not to load some payments-wiki scripts but mostly looks the same:

https://ejegg.com/WP25paymentswiki/index.html

Hey @Ejegg , sharing with you some CSS tweaks to make the appeal render better on payment.wiki

I've been working off of https://ejegg.com/WP25paymentswiki/index.html

https://phabricator.wikimedia.org/P84370

Thanks @ppenloglou ! Should those styles completely replace the 300+ line <style> block from the appeal, or are they additive?

I've gone for additive, should have mentioned! Use all existing inline styles that were initially provided and then append my latest tweaks.

(I know it's not the cleanest way of doing things but we're doing this slightly unconventionally anyway!)

Awesome @ppenloglou , I've applied them locally and it looks a lot better! I'll try to get some review on the code change that let us use raw HTML tags so we can get this up in production.

Much appreciated, @Ejegg! Could you share the value we'd be passing to pym_variant to land on this WP25 payments.wiki page?

Change #1197285 abandoned by Ejegg:

[mediawiki/core@fundraising/REL1_43] Add files for WP25 appeal

Reason:

Adding them to DI extension instead

https://gerrit.wikimedia.org/r/1197285

@Ejegg Thanks for the beautiful work on the payments wiki page which I'm viewing here: https://ejegg.com/WP25paymentswiki/index.html
Q: This preview page looks great on mobile, but when I shrink my desktop browser, the page doesn't seem responsive. (See screenshot - Chrome on Mac OS 15.5)

In T407241#11328697, @IAsplund-WMF wrote:

@Ejegg Thanks for the beautiful work on the payments wiki page which I'm viewing here: https://ejegg.com/WP25paymentswiki/index.html
Q: This preview page looks great on mobile, but when I shrink my desktop browser, the page doesn't seem responsive. (See screenshot - Chrome on Mac OS 15.5)

Note: Comms team wants to us to change the photo image. @PanosTr and @RLopez-WMF are aware -- we will let you know as soon as there is more info!

Hi @IAsplund-WMF. that static page was the first try at adding the donatewiki code to payments-wiki. I've since incorporated @ppenloglou 's CSS fixes and will be deploying it to the dynamic payments-wiki site as soon as I can get someone to review a necessary code change. I'll link the payments-wiki site here once that's up.

Change #1198391 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Allow raw HTML in appeal

https://gerrit.wikimedia.org/r/1198391

OK, the code change and the template are up on payments-wiki:

https://payments.wikimedia.org/index.php?title=Special:AdyenCheckoutGateway&appeal=WP25&payment_method=cc&recurring=&uselang=en&language=en&currency=USD&amount=1&country=US&utm_source=internal_test&utm_campaign=internal_test

this looks great and is responsive @Ejegg however it appears to be a different color/design than the current donate wiki page. @ppenloglou can probably help?

The different color is deliberate, see the Figma file.

The only other difference I see is the lack of puzzle pieces around the form. That may have been a bit tricky.

Yes the light blue background is intentional from @RLopez-WMF . We also agreed with @RLopez-WMF that the puzzle border got a bit too tricky for payments.wiki and we're happy with how it looks by default.

Sharing a no tracking, minimal link here that displays WP25 for donate.wiki and payments.wiki:

https://donate.wikimedia.org/?appeal=WP25&pym_appeal=WP25

Ok great, thanks all!

Change #1197302 merged by Ejegg:

[wikimedia/fundraising/dev@master] Add WP25 appeal template

https://gerrit.wikimedia.org/r/1197302

I'm so impressed! Thank you @Ejegg for your work on this, and @RLopez-WMF and @ppenloglou too; if I start naming names, I can't stop :) Thank you @IAsplund-WMF for the management this week and @Pcoombe for all the pointers and help getting these pieces configured.

@ehughes implemented the final piece in this donor flow puzzle, the Thank You page: https://thankyou.wikipedia.org/wiki/WP25/en

Could someone advise how we hook that in; is it specified in the payments wiki form code, or just called through URL parameters?

@spatton we need to write one more bit of code in DonationInterface in order to connect up with the correct TY page. It would be easiest if we could just set another parameter on the same TY page URL, but we can come up with something else if that's impractical.

Hi @Ejegg sorry for the wrinkle; I just checked with @ehughes and it is not feasible to configure this custom WP25 thank you page variant as a restyle of the regular TY page URL.

We considered that at the start of the project but it seemed too complex; sorry to just be catching the code requirement now! Do you think your "one more bit of code" would be feasible to implement early next week?

Change #1200426 had a related patch set uploaded (by Ejegg; author: Ejegg):

[mediawiki/extensions/DonationInterface@master] Allow array in ThankYouPage indexed by appeal

https://gerrit.wikimedia.org/r/1200426

Change #1201799 had a related patch set uploaded (by Ejegg; author: Ejegg):

[wikimedia/fundraising/dev@master] TY array settings for WP25

https://gerrit.wikimedia.org/r/1201799

Change #1200426 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Allow array in ThankYouPage indexed by appeal

https://gerrit.wikimedia.org/r/1200426

Change #1202728 had a related patch set uploaded (by Ejegg; author: Ejegg):

[mediawiki/extensions/DonationInterface@master] Swap out WP25 main image

https://gerrit.wikimedia.org/r/1202728

@ppenloglou I found some strange CSS behavior yesterday, but it may only apply to a niche setup.

When I had a second screen plugged in to my laptop, the page when maximized on my main 1920x1200 laptop display would show in mobile mode, that is, loading the @media (max-width: 1069px) {...} block. It would display in desktop mode when maximized on the second monitor, whose resolution was around the same but not exactly equal. This was in Firefox, and today I'm working out of the house so I don't have a second monitor to test more and in different browsers. With no second monitor is plugged in, the content adjusts as as expected when resizing the window around the 1069px breakpoint.

Have you every seen this kind of CSS quirk? Do you think it's worth looking into?

Change #1202728 merged by jenkins-bot:

[mediawiki/extensions/DonationInterface@master] Swap out WP25 main image

https://gerrit.wikimedia.org/r/1202728

Oh that sounds odd, thanks for detailing Elliott. I've also noticed some mobile quirks that have to do with colors as well. My aim is to send you some fixes here by tomorrow the latest. I'll try and replicate what you mentioned see if I can fix that too.

Change #1201799 merged by Ejegg:

[wikimedia/fundraising/dev@master] TY array settings for WP25

https://gerrit.wikimedia.org/r/1201799

Hey @Ejegg! I tried replicating your issue but with no luck unfortunately. Hopefully others won't experience this but if it indeed becomes an issue, we'll sort it out.

I got around to fixing the mobile quirks I was seeing however. Could you append this CSS right after the existing styles? The last style I'm seeing when trying this out is:

@media (max-width: 1069px) {
...
...
...
#wp25-mb h2, #wp25-mb p {
        margin: 0;
      }
}

Thanks in advance for your help here, I really appreciate it!
Attaching two images of quirk vs corrected versions

Change #1204901 had a related patch set uploaded (by Ejegg; author: Ejegg):

[wikimedia/fundraising/dev@master] More updates for WP25 appeal

https://gerrit.wikimedia.org/r/1204901

Change #1204901 merged by Ejegg:

[wikimedia/fundraising/dev@master] More updates for WP25 appeal

https://gerrit.wikimedia.org/r/1204901

OK, I've applied the new styles as well.

And I think the quirk I'm seeing in my own browser on the dual monitor setup is not specific to this variant or even payments-wiki. I just noticed it's showing the mobile CSS for e.g. phabricator as well in the configuration I mentioned. Perhaps a bug in some recent update of Firefox or the Linux window manager I'm using.

Appreciate it @Ejegg ! Glad to hear the quirk is not from our side 👍 bummer though for users with your setup, hope it doesn't affect many people.