Documentation
Flags are provided in a range of sizes from 16 to 64 pixels. For 16 and 32 pixel flags, these are optimised into png sprite sheets. For other sizes, discrete png images are provided.
Tip: If you want a lot of flags on one page and the best possible rendering speed, display them using the 16 or 32 pixel sizes.
Flags can be inserted using the Flags block or by adding snippets of html to other blocks such as a Content block or html block, or even coded into your theme.
Generally, the best html element to use is something small and innocuous like a 'i', 'em' or 'span' element. 'i' is the element used by default for the css inserted by the Flags block. If this is incompatible with your theme, you can change it by defining a configuration constant in config/site.php: JL_FLAGS_ELEMENT_TO_STYLE.
define('JL_FLAGS_ELEMENT_TO_STYLE', 'i');
When Magic Data is also installed, a FLAG symbol can be used from Magic Data to insert a flag.
Tip: TinyMCE does not like 'i' tags, but will accept 'em' tags in html mode.
Most flags are accessible through their ISO country codes. For example, to insert a 48 pixel flag for the United Kingdom, add an empty 'em' tag with 'class="flag-48 GB"'.
By default, flags inserted this way are aligned text-top. This alignment can be adjusted by giving the tag further classes:
- .flag-top
- .flag-text-top
- .flag-middle
- .flag-baseline
- .flag-inherit
- .flag-text-bottom
- .flag-bottom
Note that the above alignment refers to the overall flag graphic which usually has clear pixels above a rectangular flag. Corrections are built into the css background position for text-top, but that adjustment will not be perfect using other alignments.
Links
Flags can optionally be linked to another page in your site or to an external URL.
CSS file inclusion
The full css file for the flags is a big file and is only needed where general content on pages actually uses the flags styles to insert styles inline. Where performance is important you can be more selective about how this css file is loaded, if at all. Go to the dashboard page Dashboard > World > Flags.
- Include full css file with all pages.
- Include the full css file for pages with the 'Load Flags CSS' attribute checked.
- Include the full css file as required by the Flags block.
When editing a page, the Flags block provides options to show a selected flag as:
- A css background
- An image tag
Tip: The image tag option requires no css at all, so can be used for occasional flags without any requirement to load the flags css file.
Magic Data Symbol
Flags includes a FLAG symbol for use with Magic Data. For example:
- [%SET US FLAG%] inserts the USA flag at the default size (32 pixels across)
- [%SET GB FLAG 64%] inserts the UK Union flag at 64 pixels.
If you also have the Magic Data addon, anywhere you can use Magic Data you can use the FLAG symbol to insert a flag.
Coverage
Flags are provided for nearly all countries supported by concrete5. The exceptions are a few out of the way places.
If you find a national flag you need is missing, please open a support request and pont me at a suitable graphic with a licence that allows commercial use (ie. not GPL).
Additional flags include the United Nations, NATO, the Olympics and countries within the British Isles.
A note on flag sizes
Flag sizes are approximate in that they fit into the box specified in pixels. Margins and shape of flags can lead to the actual rendered area being slightly larger than the flag image.
Sources
Flag graphics sourced from: