Help Appreciated: How to use a country's name to obtain their flag?

I've been asked to compile a list of all the members in a club, in order of numbers of each nationality or country. Easy enough using the available endpoint data for club members, member profile & country data.

But then I was asked if I could provide the country flag against each national group of members & that made me stop & think - how can you do that from endpoint data alone?

I can solve this by painstakingly collecting all the country flags image URL's but is there an easier way?

Every member has a two char country code in this endpoint.

https://api.chess.com/pub/player/{username}

They are all ISO country codes with a few extras for exceptions.

This a link to the ISO standards used

https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

These are the additonals

• XA : "Canary Islands"
• XB : "Basque Country"
• XC : "Catalonia"
• XE : "England"
• XG : "Galicia"
• XK : "Kosovo"
• XP : "Palestine"
• XS : "Scotland"
• XW : "Wales"
• XX : "International"

When I extract the club members and flag logins I extract the code and compare to the two char list.

I do this in Excel so I keep the two code list in a dedicated tab and do a search for the code.

Not sure how you do that in a browser but should be possible in an app by loading the complete list into an array.

I suppose you could than add a JPEG link into the list and then load the image,

But it sounds a pain.

I was trying to find out if there's a simple way to attach a country's flag (i.e. image url) with the country name? Something I can automate so it doesn't involve a lot of manual copying of image addresses.

T_D, I followed the link you give but I can't see any information on flags in the table of countries there?

https://github.com/hjnilsson/country-flags

Among many others.

Maybe search for a CDN (Content Delivery Network) hosting the files? Suggest not hot-linking directly to private domain resources. Otherwise, if it is for local use only, just pull the repo, parse the json and plug-in a path-relative link.

One minor note:

There might be some missing flags. Different sites do things a little differently. As cited, ISO-3166 is the way to go for all standard flags, and, it looks like Tricky Dicky has provided the codes specific to this website, which may or may not be available in standard libraries. You can usually go and grab the flags from open-source places like Wikipedia, modify accordingly with a graphical editor, and plug into the repo or do some exception handling for self-hosting the images opposed to hot-linking a CDN.

Most/all(*) of the flags are available as Unicode characters, although that's trusting the users' browsers a bit.

https://emojipedia.org/flags/

(*) "International" isn't there, but United Nations is. I put in a bug report about that when I was flying an international flag. Search for others; Basque Country is ES-PV not XB, for example.

Thanks for the responses guys but I think I have at least one viable solution now, although not quite what I wanted. I'm finding a few different sites with sets of flag images, referenced by country code - this is quite a useful one:

"https://www.dyclassroom.com/image/flags/gb.png" 

Once I've obtained the member's country code (gb for the UK), I can splice it into the URL & I have an image that I can include in the final HTML output. It's something like this that I'm aiming for:-

	Wales	stephen_33
	Australia	skelos
	Netherlands	Proximo

I'll need to find a work-around for those special cases such as Wales, which is why I was hoping to find a chess.com specific solution to this because then I can (presumably) use the site-specific codes for those countries.

Giles, nice idea but I don't think Windows supports that?

"List of country flag emojis. 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧 Emoji flags are supported on all major platforms except Windows, which displays two-letter country codes instead of emoji flag images."

So ideally, I'd still like to find a way of using the site's set of flag images but because flags are generated in CSS (styling of the page), as opposed to being given explicitly in an HTML img tag, that's not so easy to do - working on it though 

I take your point but the site I think I'll probably end up using looks reliable?

.."https://www.dyclassroom.com/image/flags/au.png"

And using actual images means I can re-size them as I want:

	United Kingdom	Pingpongpaul
	Australia	skelos
	Netherlands	Proximo

or,

	United Kingdom	Pingpongpaul
	Australia	skelos
	Netherlands	Proximo

But I'm going to dig around some more to see if I can find an equivalent set of images on this site. That might solve the problem of displaying the non-standard flag codes such as my own one of Wales.

Looking at the source for this page, the flag URLs aren't simple. Maybe with enough CSS decoding ... or maybe find suitably licensed images and provide them yourself.

The information about Windows seems browser dependent. On a Windows 7 Pro installation, Firefox shows flags, but Chrome shows letters. I'll show an image for that. IE ... chess.com suggests anther browser.

Windows. Yeah.

I also want to be able to re-size the flags & I can do that easily with an image file but not as easily with an emoji.

"Looking at the source for this page, the flag URLs aren't simple. Maybe with enough CSS decoding ... or maybe find suitably licensed images and provide them yourself."

In fact I managed to use the section of code used by the site, much to my surprise, to generate a flag image in a test page but it also requires a numerical country code to work, so then I have the problem of obtaining those codes (possibly arbitrary codes used by this site only?) - it starts to feel like going around in circles.

But my default of using that external site seems to work perfectly well for the majority of codes & I can always check for the exceptions in my code - not a big deal.

A little more digging revealed this: The images of country flags used to be available on the site in this folder:

"https://images.chesscomfiles.com/images/flags/gb.gif" .... that would once have generated the union flag for the UK

But the entire folder seems to have been deleted now. That's consistent I suppose with the apparent switch to generating flag images within the styling/CSS of the page. Those images still have to be held somewhere though, although possibly in compressed form which would mean they were practically unusable anyway.

The World League national teams links page shows what can happen when the site shuts down this or that folder ...

https://www.chess.com/clubs/forum/view/wl2019-teams-and-representatives

for those that can't view that page , the majority of flags are now replaced with a generic place-mat icon instead. The only flags that still display are those separately stored by the person who created the posts.

It's a shame that none of the developers have chipped in because they might know exactly how to access those flag images.

First, on the display issue (Unicode and HTML vs. image):

If you were to incorporate a font in your HTML HEAD section, such as from https://fonts.google.com/, then that font would display correctly, unless the browser lacks an appropriate rendering engine.

It's that simple: Where you see a box or a code instead of a flag, it is typically a font problem, not a browser problem. Typically you specify your font-set in your HTML and/or CSS code. If a font is unavailable on a local computer, you can specify where the web page should get that font-set for proper rendering of the page. (There's some overhead, but, the compression makes it trivial compared to hot-linking images.)

Second:

Again, you should probably try to avoid hot-linking. However, "images.chesscomfiles" would be more appropriate than "www.dyclassroom" since you're working with this website's API.

Again, go for a CDN.

Third, check-out the following:

https://fontawesome.com/

They have a link at the bottom where you can request an icon. (Instead of grabbing a PNG or SVG from Wikipedia and trying to modify and incorporate it into your work, FontAwesome may be able to do this simpler, faster, easier.)

You can use the Bootstrap CDN for FontAwesome resources:

https://www.bootstrapcdn.com/

Once you learn to use resources like FontAwesome, you'll be off and running with some pretty nifty stuff pretty fast. It's worth the investment of time to learn how to use resources like this.

Finally:

You should probably be doing what Chess.com does behind the scenes. The "path-relative" remark I made before. Instead of hot-linking, pull-down a repository, or automate the process of locally caching an open-source resource for inclusion in your work. Such that, there is likely a DIV element to render the flags, and that DIV element has an assigned class, and the JavaScript behind the scenes parses that class information to render the appropriate flag. Then you can dig into things like using dynamic languages, either locally, or more formal web hosting, or just automating the rendering of manually updated HTML pages.

Figured out how to quote.

The "re-sizing" issue can be done in-browser, with HTML, CSS and JavaScript. There's no need to resize the actual image locally. The browser itself can do all of the sizing if you have things in a standard size from a standard library and use standard conversion for each page.

There are font-sets (i.e. FontAwesome) with emoji's, too ... such that setting a larger size is trivial and doesn't change display unless you displace your page elements.

You'll save yourself a lot of time if you just learn the basic 3-tier HTML/CSS/JavaScript.

One other thought on my mind is: You're asking some questions that delve into some technical stuff. If you have a repo, just post the code you have and you're working on, link to it, and ask for help. I don't have a lot of time, but I spend enough time playing chess that I could spare a few minutes to glance and then throw some suggestions (or even code) your way. GitHub is a great place to start, and you should learn Git to track changes to what you're working on over time. In some cases or instances, it may be simpler to render an MD file or run things using an resource such as Git. People won't do the work for you, but, you're at that point where it wouldn't hurt to ask for some help and put your work on display. (Your repo, your code, you manage it, but others can contribute, or you can reject changes if you don't like or understand them.)

A little busy just now & I'll reply at greater length later but I'd like to address a few of those points:

• I think I'm grasping what you say about using a specialised font type (of flags, I assume?). But what will happen if a viewer doesn't have that font available?
• Re-sizing images: Most of the flag images I've seen are very small & I don't think zooming by itself solves that problem. I've produced good results where I've used re-sized images & I still think I'd rather go that way.
• My HTML/CSS skills are usually adequate for the things I set out to do but please remember that I'm pasting HTML content into this site's pages. The site's post editor doesn't accept all content & some of it gets scrambled! My more ambitious attempts have generally failed & I'm not certain that content containing Javascript would even be acceptable.

Okay. Cool.

You're right on the last point: If you're designing for posting content to Chess.com, then, you're at the mercy of what they allow. Safe to assume no JS content, limited subset of supported HTML tags, and, forget my remarks on hot-linking. Don't go with a specialized font -- just use the same flags that Chess.com uses (same URL or URI).

Opposed to re-sizing images, I'd suggest simply going with what is available here.

Resizing down is easy if static images are large enough. Resizing up usually leads to pixelation. Unless you have SVG. Scabale Vector Graphics scale nicely, and can then be rendered to larger, static files like PNG. So, unless the flag icons are SVG, not possible. Uploading a bunch of individual flag icons is one way to go, but a bit of a management nightmare.

On quick glance, it looks like the flag icons are parsed via a versioned PNG.

Trying this out ...

<div class="v-tooltip country-flags-component country-166"></div>

If you see a flag above, then the basic editor interpreted the same code used to check the flag next to your username.

If you see code, then, I'm not sure how you're doing this. (You better handle on it than I do.)

Edit: I don't see a flag, so, copy/pasting the code Chess.com uses to try and render the flags in forum posts doesn't work.

What I had in mind was a 'minimal effort' method for converting the two-character country code (GB for the UK for example) of any member, into a corresponding URL for the image of the flag, from an online resource of such images.

I've mostly achieved that by using the "https://www.dyclassroom.com/image/flags/" set of flag images. They're indexed by the standard country codes & where I encounter one of the few exceptional cases such as Wales, my own flag (the code is XW), I use a simple look up table to replace the image.

It's working very nicely so far  

I looked into the method that the site uses but the snag I hit is that while the issue of the country code is resolved, the additional complication of a numerical code number creeps in. I don't have a clue how the codes are derived - for example, 166 for the UK(?)

Does anyone know how to obtain a list of those numerical codes?

As for generating flag images by that means, remember that copying & pasting web content from another page is very different from copying & pasting the actual HTML used to generate it! To make it work, you have to first create some form of test page & then copy/paste the element or section of content you want.

Do you use this resource?

https://htmledit.squarefree.com/

It's very handy for quickly creating some web output which you can then paste into the c.c editor. My preferred method these days is to generate the necessary HTML/CSS from within my Python scripts & output this to a test HTML document on my hard-drive. Then I can view this in my browser & copy & paste across to the editor as convenient. Works very well!

I hesitated to say anything about it before (too complex), but, I believe the numeric codes relate back to the following:

https://www.chess.com/bundles/web/images/sprites/flags-small-v3.df1a5eb9.png

The version number at the end of that URL may change when things are updated. For example, it's a 16x16 array of tiny flag images in a single PNG. There are two slots open at the end. Maybe everything gets re-arranged if they add a new flag, maybe things stay the same and there's a specific numeric order to things. Who knows?

When I was initially investigating how Chess.com did things behind the scenes, I right-click on a user's flag icon. That gives the "div" tag (HTML element) in a console. Then I click on the sources tab, and, I get to it in the tree...

Chess.com > bundles > web/images > sprites > flags-small-v3.VERSION.png

Point of all of this being: I believe that the flags are extracted from some javascript processed on each page load, and the numeric encoding point where each one is in that single-image array. You'd have to go through the JavaScript to figure out how it all works. And that's more time than I'm willing to invest.

You'll notice in that "sprites" folder, there's also "membership" and "nav" elements with similar organization. Ultimately, this helps deliver fewer, smaller files (less code, fewer individual files) to the client, and off-load processing and arrangement to the client browser (via local JavaScript processing).

I think your original idea was best, but I disagree with hot-linking to other domains. (Try to find a CDN host, or beg Chess.com to support your effort by providing a static image, un-versioned, for each flag.)

If any solution involves the use of JS, we're back to the limitation of the c.c editor because it won't accept anything that looks like it might be malware! The editor even scrambles some combinations of perfectly standard HTML, without any obvious reason.

You also have to be careful with certain types of styling - I wanted to make a section of text 'blink' on & off, that's all, nothing fancy. The HTML 'blink' tag has long gone, so now it has to be done using the CSS animated elements property. Had it working perfectly in a test page but the editor strips it out (or ignores it) when I copy it in. 

Having to remember what the site's editor will & won't accept, adds an additional layer of complexity that I could do without.

On the subject of using an external domain, I agree with your broad point but this site did used to have a folder dedicated to individual (flag) image files but seems to have deleted the entire thing. At least that's the only conclusion I've come to regarding the flag images used in the World League group - the individual files each flag used have vanished & the flags have been replaced with generic place-holders.

So having deleted exactly the files that would be useful to me, do you think they're going to replace them at my request? I should say, NO.

If you make a good argument, I don't think it is an unreasonable request. (I'll support a well-formed argument.)

In this case, one of the following would work:

• Support for using div classes leveraging things like country flags (in the editor, not stripped).
  • See 3rd bullet point below. Instead of using their code which may change, not stripping a custom flag from the editor, and having it interpreted by the page when it renders forum posts.
• Chess.com supports its own CDN for things like country flags, icons, etc. (You get the flags images directory back.)
• Ask Chess.com to support a <flag country='ISO-3166_ID" id='proprietary_numeric_ID'>
  • The nice thing about HTML5 is that, in combination with CSS and JS, it supports doing custom flags like this. The (broader) term for it is DSL, or "Domain Specific Language." No need for a specific <div class='whatever' id='whichever'>, you can define your own static tag or flags for an HTML(5) element. Historically: Follows the SGML spec like XML (initially) tried to do, but for web. (XML's DTD allows creation of custom tags using a base-set of SGML markup. HTML5 makes this simple for developers. Behind the scenes, it would ultimately link back to whatever drives the main site display via the same mechanisms, but for more general consumption purposes.)

The worst you can do is try to request such a feature to support your efforts. Since you would already say "no," then if Chess.com declines, there's no let-down. But, what if a (reasonable) request succeeds?

Opposed to a CDN or paying for hosting somehow, you could use something like Google Sites. And, if something doesn't render correctly, you could provide a URL at the bottom of a block, such that it points to Google Sites where you have more control over what you're doing. (Or, instead of Google Sites, a WordPress site where you can use and display JS, maybe even import an iframe-type block, maybe.) It splits things a little: (Basic HTML) code posted here, and then managing a separate site (more advanced, allowing you what you would like to do).

There are any number of possible solutions. The limitation is what Chess.com allows, and the amount of time they have to work on things, and whether or not features fit with whatever development or critical paths.