Showing flag instead of language name in navbar

[eudoxos]

I was able to show flags without modifying templates using the following one-liner in BODY_END. Perhaps someone has something shorter/nicer or more elegant? The images need to be placed in files/img/lang/en.svg for all languages used.

<script>
document.querySelectorAll('.nav-link[rel="alternate"][hreflang]').forEach( function (val,ix,lst) { val.innerHTML=`<img src=\"/img/lang/${val.getAttribute("hreflang")}.svg\" alt=\"${val.innerHTML}\" height="20px">`; });
</script>

[sukiletxe]

I'd add alt=${messages("LANGUAGE", langname)} to the img tag.

[eudoxos]

I'd add alt=${messages("LANGUAGE", langname)} to the img tag.

Great (and important) comment. I edited the original post adding the alt; the human language name is conveniently in original the innerHTML text.

[Kwpolska]

Doing it via JS is bad for the aesthetics, since the flags will flash when someone reloads the page or follows a link. If you want to avoid modifying templates (which is IMO the best way to achieve this), a good alternative might be CSS. Assuming your images are 20x20 PNGs:

.nav-link[hreflang="en"] {
  background-image: url(/img/lang/en.png);
  font-size: 0;
  width: 20px;
  height: 20px;
}

For SVGs, this might just work, or you might need to do some adjustments to the background positioning/repeating/scaling CSS properties (those are best figured out interactively with the web inspector, since it depends on how your images are set up). Same goes for raster images larger than the size specified in your CSS.

Alternatively, if you want to have both the flag and the language name, you can also figure out something with background-* and padding-left.

If you want only the flags, you’d need to add title text to the <a> element for accessibility. That might require JS (but in this case, the change wouldn’t be visible to the user).

[eudoxos]

Wow, this is much better than JS. Would that warrant a mention in the manual? I could use SVG knowing their aspect ratio (4:3), then specifying font-size:0; height: 21px; width: 28px; (otherwise they would be tiled in one or another direction).

[Kwpolska]

The manual can't mention every single CSS trick possible :)

[eudoxos]

That's right, I just meant flag instead of language name. Thanks for all your work, anyway :)