Website user profile form lacks libre social media

[strk]

And has too many references to proprietary platforms.... I'm talking about this page: ​https://www.osgeo.org/wp-admin/profile.php

You have to be logged to see it, but the "Contact Info" section has input fields for:

• email (required) OK
• website OK
• .. a long list of proprietary platforms .. BAD
• wikipedia page about yourself OK

Then lower, in a "Social Media" section you can enter arbitrary URLs and associate them with icons, but only icons from a selected list can be choosen and that list is formed by 10 items only 3 of which represent general concepts/formats/protocols (blog,RSS Feed,website); the other 7 name proprietary services.

I think we should do better, as an Open Source Foundation.

[strk]

Related: ​https://wordpress.com/blog/2023/10/11/activitypub/

[jive]

The twitter icons should change to X now also.

[jive]

Can we update this ticket to cover the addition of social media links for project pages and other things also? Or does it need to be specifically about the user profile page...

[rouault]

Hi, regarding removal of references to x.com, the OSGeo board has decided "to update the web site to point to Mastodon and keep X account credentials to avoid losing the account name."

If someone can give me rights and pointers to the repositories where the links to social media links at bottom of ​https://www.osgeo.org/ are, I can give a try to that (disclaimer: I might totally break the website, being a total WordPress noob !)

[jive]

Hi @rouault not sure how it works, I joined the SAC committee to get commit access.

The private repository is osgeo/www_osgeo on git.osgeo.org/gitea.

I can see a template "molecule-social-media.php" that goes through a $socialMedia array. I expect what you really need is access to the staging environment.

I will also caution that we have hard time with volunteer access, and I am at the stage where I wish to find someone with experience to clean up problems that have been introduced to the project pages.

[rouault]

I wish to find someone with experience to clean up problems that have been introduced to the project pages

ok, I see. A bit of a pity that the website isn't set up for small drive-by contributions, like we have in software projects with Sphinx & ReadTheDocs setups where you can immediately see the effect of a change done in a pull request on the HTML rendering. But I understand this isn't the case here. Maybe the OSGeo budget should have a provision for some X hours/month of a WordPress capable web developer ?

[rouault]

Thanks to @cvvergara for removing the link to the ex-bird site in the osgeo.org footer

We could now use the freed room for a link to our fosstodon account: ​https://fosstodon.org/@osgeo Icon perhaps from ​https://icons.getbootstrap.com/icons/mastodon/ ?

[jive]

Okay I see the configuration option in the wp-admin screens:

• Facebook
• Google plus
• Twitter
• LinkedIn
• Youtube - we could use this one?
• Pinterest
• RSS Feed
• Blog
• Irc
• Stack exchange

[jive]

Not sure how to add additional social media options.

Okay I found the ACP setting, and can add more choices:

icon-facebook : Facebook
icon-google-plus : Google plus
icon-twitter : Twitter
icon-linkedin : LinkedIn
icon-youtube : Youtube
icon-pinterest : Pinterest
icon-rss : RSS Feed
icon-blog : Blog
icon-irc : Irc
icon-stack-exchange : Stack exchange

It is unclear where the icon-mastodon would come from.

Checking css:

[class^="icon-"], [class * =" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing:grayscale
}

[jive]

@rouault do you think you can figure out a mastodon logo that goes with our look?

If you volunteer on SAC www_osgeo has the themes/roots/assets/fonts/icomoon/style.css

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?taqauz');
  src:  url('fonts/icomoon.eot?taqauz#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?taqauz') format('truetype'),
    url('fonts/icomoon.woff?taqauz') format('woff'),
    url('fonts/icomoon.svg?taqauz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[jive]

icomoon

[jive]

I have attached iconmoon.png sheet.

My understand is an app was used to produce a cutdown set of icons from the free iconmoon set.

​https://icomoon.io/app/#/select

This set does not include modern social media things like mastodon, blsky, and threads.

So to solve this we will need to source new icons.

[jive]

I am used to using ​https://fontawesome.com/icons/mastodon?f=brands&s=solid

But if we do so we should likely change all the social media icons for visual consistency.

[jsonsingh]

Hey @jive The icon is available as svg here: ​https://icons.getbootstrap.com/icons/mastodon/

Is that not good enough for wordpress? I don't have enough access on wordpress to change anything (not that I know how to anyway)

If it's css maybe we can just directly encode it in like this

.mastodon-icon {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-mastodon%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M11.19%2012.195c2.016-.24%203.77-1.475%203.99-2.603.348-1.778.32-4.339.32-4.339%200-3.47-2.286-4.488-2.286-4.488C12.062.238%2010.083.017%208.027%200h-.05C5.92.017%203.942.238%202.79.765c0%200-2.285%201.017-2.285%204.488l-.002.662c-.004.64-.007%201.35.011%202.091.083%203.394.626%206.74%203.78%207.57%201.454.383%202.703.463%203.709.408%201.823-.1%202.847-.647%202.847");
}

Won't that be good enough?

[jsonsingh]

And while we are at it. Probably should include Bluesky logo as well.

[jive]

It is just CSS, but they have the font several different ways for compatibility.

• icomoon.eot
• icomoon.svg
• icomoon.ttf
• icomoon.woff

This is where I want to follow what has been done before in order not to make the site harder to maintain.

If you know of anyone with web design experience to provide a decision on icons we could use the help.

[lnicola]

We removed Twitter from the footer, but it's still present on ​https://www.osgeo.org/community/communications/. We should either remove it, or update it to say X.

[robe]

I think we should remove it. I don't see the benefit of having a social media link that says "inactive"