Ruby on Rails 5, Country Flags

Question

Just to begin with, I want to apologize for my inexpertise. I'm still in the process of learning RoR.

I'm currently attempting to practice building a semi-advanced website, which is one big step, but I've made a lot of progress.

I'm currently sitting with a problem, that I've spent days on trying to solve. I'm sure it's a little thing I'm overlooking, but I'm banging my head against the wall trying to figure it out.

I can't seem to find any video, google search, or SO thread talking well about it.

-- Country Flags --

I'm using the country_select and countries gem. According to the countries gems' page, https://github.com/hexorx/countries, it can indeed display country flag emojis. It doesn't have a wiki, but on the 'frontpage', the only info is:

c = Country['MY']
c.emoji_flag # => ""

I found a very few SO articles about displaying country flag emojis. Rails 5 - Countries gem - flags I've read this one multiple times and tried to make my own adjusements, basically running into the exact same issues that the guy has. I get the same errors.

One minor thing that does not work when I test run it, is the:

irb(main):001:0> require "countries/global"
=> true

My test, does comes back as:

irb(main):001:0> require "countries/global"
=> false

Even though my gemfile has the:

gem 'countries', :require => 'countries/global'

This article, Rails 5 - Flag Icons with dynamic country input, is not for the countries gem, but for yet another gem. There was no answer there either.

After sort of giving up on displaying my countries flag emojis through the countries gem and the limited information/guidance, I found this article: What are my options for incorporating country flags into a Rails 4 app?. There was only 1 answer.

Which led me to downloading the zipfile on https://www.flag-sprites.com/, unzip it and moved the image into my asset pipeline/images and the css files into the asset pipeline/stylesheets.

I've of course linked them, precompiled them etc.

I then attemped to test run the code to display one of the images through the sprite, using:

<span class="flag flag-us"></span>

Which shows the selected image(US flag) perfectly... But! What I really need these country flags for, are for a users profile, once they're signed in.

My users already have to choose a country, for example United States of America (US) through the signup. It also gets saved in the database, no issue there.

I simply want to add the users countrys' flag to their profile page, based on the country they've chosen when they signed up.

I currently use:

            <ul>
                <li><span><p>Username:</p></span> <%= current_user.username %></li>
                <li><span><p>Country:</p></span> <span><%= current_user.country_name %></span></li>
                <br>
                <li><p>Bio:</p><p class="bio"><%= current_user.bio %></p></li>
            </ul>

to display user-based information. The username tag works, it displays the users username, that they chose during signup. The country works, with full name fx: United States of America, instead of US. The bio also works. The user can go edit it through the edit page and it'll change perfectly.

But now I need to know, how to make my syntax fetch the appropiate flag, based on the country the user have selected during the signup.

I really hope I can get some help here on SO. Any help will be much appriciated. Thanks in advance.

Also apologizing for the long text of wall, just wanted to try and show some of the research I've done. I'm sure I'm missing something here, but there's very little information about this out there.

OBS! Using Windows 8.1, Ruby on Rails 5.

Answer 1

I would maybe do something like this:

<ul>
  <li><span><p>Username:</p></span> <%= current_user.username %></li>
  <li>
    <span><p>Country:</p></span>
    <span class="flag flag-<%= current_user.country_code %>"></span>
    <span><%= current_user.country_name %></span>
  </li>
  <br>
  <li><p>Bio:</p><p class="bio"><%= current_user.bio %></p></li>
</ul>

You'll need to add a method to your User class that maps country_name to one of the country_code values that flag-sprites supports. Example:

class User < ApplicationRecord
  def country_code
    {
      "Czech Republic" => 'cz',
      "United States of America" => 'us'
      ...
    }[self.country_name]
  end
end

Answer 2

--New attempt--

Thanks for a quick reply, @SeanHuber. I've been attempting a few things with your suggestion but I still run into some issues. It doesn't seem like it accepts it as a link:

<span class="flag flag-<%= current_user.country_code %>"></span>

It appears yellow, I'm not sure if that matters. You can see it here

After adding this to my view file:

<span><p>Country:</p></span> 
<span><%= current_user.country_name %></span> 
<span class="flag flag-<%= current_user.country_code %>"></span>

And this to my user model:

def country_code
    {
      "Andorra" => 'ad',
      "Czech Republic" => 'cz',
      "Denmark" => 'dk',
      "United States of America" => 'us'
    }[self.country_name]
  end

I get the funny error on my page that displays the Andorra Flag. Andorra Flag example To my suspision, Andorra is indeed at the top of the country code list, starting with 'ad', that can be seen at: modemsite.com It seems like it's registering towards the sprite image, but it doesn't accept/choose a country code, simply takes the one at the top.

Also adding that I've this, in my user model:

def country_name
    country = self.country
    ISO3166::Country[country]
  end

By default country_select only show the country code(like 'US') on the users profile, adding the method country_name, allowed it to display 'United States of America', instead of just the code 'US'. I thought this might be important information.

I had to write this reply as an "answer", as the comment section only allows 300 characters and I can't add more links to my original post because of my reputation.

Answer 3

Let's use with_data_attrs option and i use flag icons from https://github.com/lipis/flag-icon-css

in config/initializers/country_select.rb

CountrySelect::FORMATS[:with_data_attrs] = lambda do |country|
  [
    country.name,
    country.alpha2,
    {
      'data-country-code' => country.country_code,
      'data-alpha3' => country.alpha3,
      'data-icon' => "flag-icon flag-icon-#{country.alpha2.downcase}"
    }
  ]
end

I use simple_form gem for form and this is how i setup

= f.country_select :full_name, { format: :with_data_attrs }, { class: 'form-control select2 selectpicker', 'data-live-search': 'true' }

And it is done! :)