Skip to main content

Adding Emoji icons to Rails application

Its very easy to add emoji icons/images to your rails application.


















It seems complex but its all easy using javascript.The steps can be simplified as shown below:-
  1. add the javascript(download jemotion)
  2. include it in your view file(where you want :) to be shown as this ----------------------->
  3. thats it....done
first you need to add this wonderful js which works really great and nice from home page.
We are interested in only the js and emotions folder(containing the smileys/GIF images).
once you download just include it in your view file and copy/dump the emotions folder(containing images) to app/assets/images for RAILS 3+. as i did where i want the users to view their comments after they submit their comment.

You also need to give a unique id to make  the js understand where it needs to convert your symbols to icons.see below code and hope you will understand how to use it.
Keep in mind two thing:-
  1. dont forget to give an id to your div/p tag where user enter their comments
  2. include it in your view and not your layout file.

Here comes the js and the code:-

===============javascript===============================
<%= javascript_include_tag "jemotion/jemotion"%>
//add this in your script tag
$(document).ready(function(){
  var opt = {
    handle: '#emotion',
    //i dumped the emotions folder to app/assets/images and changed this path
    dir: 'assets/emotions/',
    label_on: 'On Emotions',
    label_off: 'Off Emotions',
    style: 'background: #eee',
    css: 'class2'
  }
  $('.emotion').emotions(opt);
});
===============view=============================== 

  <% if !@video.comments.empty?%> 
   <% @video.comments.each do |comment|%> 
      ##my id emotion to show all :) as emotions mapped in jemotion.js
        ##snippet from js file: {syntax: ':D',title: 'big grin',icon: '6.gif'}
           <%= content_tag :div, id: "emotion" do -%>
            <%= comment.description%>
            <%end%>
    <%end%>
  <%end%> 

Comments

Unknown said…
Thanks for sharing this blog post,Nice written skill selenium Online Training Bangalore

Popular posts from this blog

Using Geocoder to get street name,state,city,country etc in Your Rails app

Recently i implemented Google map for one of the module where User will enter his location/address and other relevant geo-details should get autopopulated.Well,This was posible because of   Geocoder  and by using it you can get every small details such as postalcode,country code,zipcode,street name,state name,state code,latitude,longitude(and more) ready in your hands easily.Its really awesome. I have used to it get all relevant information about the location that the user enter using Geocomplete ,another awesome autocomplete library to get locations. Suppose you have a users table and also few columns such as longitude,latitude,state,postal code,street name,address,country  and want to autopopulate other fields just by using address entered by the user then you are reading the right blog,So its easy,let me show you how. User will enter address using Geocomplete and store that address in address column in users/locations table Then,use Geocoder to fetch other geo...

Loading Associations of associations using joins instead of includes

Imagine a Rails scenario where,User model has many associations.So it make look like:- Use includes for lazy loading of all associations Use joins to load all associations that exists For example:-                  A user has many orders.                  Order has many images,videos,comments,testimonials,feedbacks,address,contact_details and annoucements. So,to access a user having a request,with all orders having all associations,we will use the usual includes  like :- User.includes( { orders: [ { :address,:contact_details,:comments,annoucements,feedbacks: [:videos, :images] }] }) will load all users . But,to get all users having all associations present,we can use Joins  like: User.joins( { orders: [ { :address,:contact_details,:comments,annoucements,feedbacks: [:videos, :images] }] }) will load all users with associations present. Hope it he...