Missing country flags

support
1

I am using a function to translate the two letters country code to an emoji, something like:

    {{ range $country := $.Scratch.Get "countries" }}
    {{ (printf ":%s:" $country) | lower | emojify }}
    {{ end }}

where countries is an array of country code. Some countries are rendered properly but others aren’t, such as :be:. Looking at the reference page, there is indeed only a handful country flags. Is there a way to add them all?

2

Could you explain rendered where?

FYI, windows system doesn’t have flags emoji where others will display them correctly.

3

Thanks for the quick reply. It’s rendered as part of a layout. I am collecting the countries in a slice that looks as follow:

[AT BE CH DE ES FR JP MA SE TN UK US]

The output of the script above, based on that slice is something like:

:at: :be: :ch: :de: :es: :fr: :jp: :ma: :se: :tn: :uk: :us:

I’ve noticed that only certain flags are available at 🎁 Emoji cheat sheet for GitHub, Basecamp, Slack & more (linked from the doc of emojify).

I don’t necessarily want to use emojis for this. I could use anything else like font awesome or whatever. I don’t know where to look though.

4

If emojify function is limited to webfx.com if emoji is not available there I doubt you will be able to do anything about it.

5

Thanks but that’s why I am asking here. Rather than circling around what I requested initially, I’d like to see if anyone here knows of an alternative.

6

free flags here

7

You will need to use the correct ISO country code for Great Britain: GB not UK.[1]

npm install flag-icons
config.toml 
[params.flags]
# Aspect ratio must be 4:3
width = 24
height = 18

[[module.mounts]]
source = 'assets'
target = 'assets'

[[module.mounts]]
source = 'node_modules/flag-icons/'
target = 'assets/flag-icons'

layouts/partials/render-flag.html 
{{- $country := . }}
{{- $path := printf "flag-icons/flags/4x3/%s.svg" (lower $country) }}
{{- with resources.Get $path }}
  <img
    src="{{ .RelPermalink }}"
    width="{{ string site.Params.flags.width }}"
    height="{{ string site.Params.flags.height }}"
    alt="{{ printf "country flag for %s" $country }}"
  >
{{- else }}
  {{- errorf "Unable to find %s" $path }}
{{- end -}}

Then, in your templates, do something like:

{{ $countries := slice "AT" "BE" "CH" "DE" "ES" "FR" "JP" "MA" "SE" "TN" "GB" "US" }}
{{ range $countries }}
  {{ partial "render-flag.html" . }}
{{ end }}

Or for a single flag:

{{ partial "render-flag.html" "BE" }}

The ISO country code is case-insensitive.

  1. Or replace GB with UK in the partial before the resource call. ↩︎

3 Likes
8

Awesome, that worked perfectly. Thanks!

1 Like
9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.