Follow Along as I Stumble on the Path to Learning RoR

Latest

Twitter Bootstrap Growls for Rails Flash Messages

I’m using Bootstrap with Rails, but I wanted to replace their alerts with growl messages.  Luckily, I found this JS made by Robert McIntosh.  Bootstrap-notify makes it so easy to turn your flash messages into growl messages.

  1. Download the JS https://github.com/mouse0270/bootstrap-notify
  2. Unzip the JS and place bootstrap-notify.min.js in your assets/javascripts folder
  3. Add this line to application.js: //= require bootstrap-notify.min
  4. Download Animate.css and put in your assets/stylesheets folder (add it to application.css, if you aren’t adding the CSS tree)
  5. Create a flash partial (layouts/_flash.html.erb) – change the options to customize:

<% flash.each do |type, message| %>

$.notify({
// options
message: ”
},{
// settings
type: ”,
placement: {
align: “center”
},
animate: {
enter: ‘animated bounce’,
exit: ‘animated bounce’
}
});

<% end %>

6. Put this in application_helper.rb:

def bootstrap_class_for(flash_type)
case flash_type
when “success”
“success” # Green
when “error”
“danger” # Red
when “alert”
“warning” # Yellow
when “notice”
“info” # Blue
else
flash_type.to_s
end
end

7.  Render the partial by adding this to “layouts/application.html.erb”:

<%= render “layouts/flash” %>

You should be all set!

Sendgrid Settings

I tried following Sendgrid’s instructions, but they didn’t work.  I was getting this error:

Errno::ECONNREFUSED – Connection refused – connect(2) for “localhost” port 25

I fixed it by adding these settings:

config/environments/production.rb

config.action_mailer.raise_delivery_errors = true config.action_mailer.default_url_options = { :host => ‘sitename.com’ } config.action_mailer.perform_deliveries = true ActionMailer::Base.smtp_settings = { :address => ‘smtp.sendgrid.net’, :port => ‘587’, :authentication => :plain, :user_name => ENV[‘SENDGRID_USERNAME’], :password => ENV[‘SENDGRID_PASSWORD’], :domain => ‘heroku.com’ } ActionMailer::Base.delivery_method = :smtp

NoMethodError undefined method `[]’ for “image”:Sass::Script::Value::String

When upgrading my Rails app to 4 (from 3), I was getting the error:

NoMethodError undefined method `[]’ for “image”:Sass::Script::Value::String

Eventually I found out that the asset-path / asset-url methods changed to only accept one argument.

For example,

asset-url(‘profile.png’, image)

now should be:

asset-url(‘profile.png’)

In my particular case, this code was in some of my css files.

Make YouTube Embeds Responsive

I have a YouTube video that I embed on my website which I wanted to make responsive.  I found different ways to do it, but by far the easiest was Embed Responsively.  With this, you just paste in the video URL and it creates the code (including CSS) to make the video responsive.

Adding a Sitemap to Google for Sites on Heroku

I’m using the awesome Sitemap Generator gem for Rails  and also hosting my app on Heroku.  Since I’m updating my sitemap daily, and Heroku forces me to write to somewhere else, I need to create the sitemap nightly on Amazon Web Services (S3), instead.

The problem I ran into is that when I went to Google Webmaster Tools, it only allowed me to specify a url for the sitemap beginning with the name of my domain.  However, since the sitemap is hosted on AWS, it has an address that starts with an Amazon URL.

I found an answer here.

Basically what you need to do is to add a second property in Google Webmaster Tools for your S3 bucket.  I added a property to my directory with the sitemap (i.e. http://s3.amazonaws.com/mybucket/sitemaps/) and then verified that I owned the property by placing the Google supplied HTML file in the sitemaps folder on S3.

The last step is adding the URL to the sitemap in settings for the new [S3] property that was added to Google Webmaster Tools.

Facebook not Showing Open Graph Images

My image tags were right for Open Graph, but my images weren’t showing when when people tried to share on Facebook.

I found my answer on Stack Overflow here.

Apparently, if Facebook doesn’t already know of a page, it will not know about the image until after it is shared once (at which time it becomes aware of the page).

However, there’s a work around.  You have to specify additional attributes about the image – the height and the width (where the content value is the number of pixels for width and height, respectively):

<meta property=”og:image:width” content=”450″/>
<meta property=”og:image:height” content=”298″/>

 

Setting Paperclip Image URL

I had to find the URL of Paperclip images in order to use them in meta tags.  This is what I ended up doing (where User is the model and image the attachment name):

user.image.url(:thumbnail)