flag_image: a bundled SVG flag image

{%flag_image%} returns a prepared <img> element for the locale's bundled SVG flag.

Generated markup

The image uses:

  • the class pom-translate-language-switcher__flag-image;
  • a width of 22;
  • an alt value based on the English language name, or the local name when needed;
  • a URL inside POM Translate's local flag assets.

The value is empty when the locale definition has no flag data. POM Translate prepares the image only when the current template actually requests flag_image.

Pair the image with text

{%flag_image%} {%local_label%}

A flag should remain supplementary. A language may span countries, a country may have several languages, and a custom locale may have no matching asset. The adjacent text keeps the choice understandable and prevents a missing image from removing the whole label.

Verify assets and spacing

Inspect every enabled locale after saving. Confirm each requested image loads, its alternative text is appropriate, and a locale without flag data does not leave awkward spacing. Also test the selector at its narrowest supported width.

For an emoji supplied with an accessibility wrapper, use flag_html.

Change public author URLs
Previous
Language selector merge tags
Next