World Flags

This engine/gem can be used with Rails 3+. WorldFlags includes css files for flags of the following pixel sizes:

• 16
• 24
• 32
• 48
• 64

The sprites contains all the main country flags in the world.

You can use the sprite generator to generate sprites for other icons sets and follow the pattern for this gem.

You can also see the pictos-icons
or social_icons gems for other examples using this model.

Also check out the world-flag-packs repo, that contains multiple flag packs ready for use with `world-flags.

Resize images:

Use ImageMagick to resize, using 32px version as base

convert flags32.png -resize 75% flags24.png

convert flags32_semi.png -resize 75% flags24_semi.png

Generate adsjusted css files:

The CSS files must have positioning adjusted to fit the new sprites: Use the resizing tool in lib/world-flags/tools/resize_css.rb Edit the last part where ResizeCss is initialized

resizer = ResizeCss.new 32, 24

The last argument (here 24) is the flag size used for calculating new positioning in the css files generated.

The ResizeCSS initializer takes many additional options, including :auto-exec to auto convert the sprite using ImageMagick.

resizer = ResizeCss.new 32, 24, auto-exec: true

See the code for more details on how to adjust to fit your needs.

Run the resizer

$ ruby resize_css.rb

TODO: refactor resize css tool into rake task or similar that takes arguments!

In your asset application.css manifest file:

/*
 *= require_self
 *= require_tree .
 *= require flags/basic
 *= require flags/flags16
 *= require flags/flags32
*/

The flags/basic stylesheet sets up a basic css for use with borders around the flag images (to mark selected language). Use this css as inspiration and customize by overriding styles as needed.

There is also support for semi-transparent flags. This can be used to fade certain flags while having the selected flag (or hovered over flag) in full brightness.

Simply add or remove the "semi" class for the flag to adjust the brightness level (fx for selection/mouse over).

Flags will be rendered in HTML as:

<pre>
  <ul class="f32">
  	<li class="flag ar selected" data-cc="ar" data-country_name="Argentina" data-language_name="Spanish" data-locale="ar">&nbsp;</li>
...
</ul>
</pre>

The countries corresponding to the codes can be found at ISO 3166-1 alpha-2

WorldFlags supports flag sizes in 16, 24, 32, 48 and 64 pixels (size).

You can also use built in helper methods:

= flag_list 16 do
	= flags :ar, :gb, :selected => :gb

Alternatively

= flag_list 32 do
	= flag(:ar, 'Argentina')
	= flag(:gb, 'England', :selected => true)

Or using the locale mappings for the label...

= flag_list 32 do
  = flag(:ar)
  = flag(:gb, :selected => true)

Or using the #flag_code helper

	= flag(:ar, 'Argentina') + flag(:gb, 'England', :selected => flag_code(I18n.locale)

You can also include the :with_semi => true option in order to have flags not selected displayed with the 'semi' class (semi-bright image)

For use with tooltips or similar js plguins, it can be useful to set the

= flag_list 32 do
	= flags :ar, :br, :gb, :title => true

<li class="flag ar" lang="ar" title="Argentina">&nbsp;</li>

= flag :ar, 'Argentina', :title => 'Argentina country', :content => 'Argh!'

= flag :ar, :title => 'Argentina country'

	= flags :ar, :br, :gb, :content => true

WorldFlags.country_name_disable!
WorldFlags.language_name_disable!

WorldFlags.flag_list_tag = :div
WorldFlags.flag_tag = :span
WorldFlags.flag_text = ''

= flag_list 32 do
	= flags :ar, :br, :gb, :country => :da

= flag_list 32, :class => 'border' do
	= flags :ar, :br, :gb, :language => I18n.locale

def browser_ip
  request.remote_ip
end

when :ip
  country_code_from_ip browser_ip

.flags {
  list-style-type: none;
  padding: 0;
  margin-left: 0;  
}

.flags .l {
  float: left;
}

.border .flag {
  border: 1px solid;  
}

.border .selected {
  border: 1px solid black;
}

.f16.flag {
  width: 16px;
  height: 16px;
}

.f24.flag {
  width: 24px;
  height: 24px;
}

 /* and so on ... */