Facebook Responsive Embed

This isn’t a Rails post, not is it even a development post.

I wanted to embed a Facebook post, but I was having trouble making it responsive.  I could have made it responsive using CSS, but I didn’t really want to do that.

I looked at this Stack Overflow question, but I couldn’t get the solution work where you change the embed code to be width:100% and width:auto.  That worked for the width, but the height wasn’t adjusting for me.

What I figured out was if I click to embed and then I go to the advanced settings, I could get it to work by removing the ‘500’ for width (in the settings), and then getting the Javascript code (could not get the iFrame to work).

Advertisements

A Free and Easy Way to Create Responsive Emails

I’ve found a quick and easy way to create responsive emails using Bee Free.  Bee Free offers some templates (or you can build from scratch) that you can use along with their drag and drop editor to create responsive emails.

In their tool you can:

  • use a drag and drop interface
  • export everything to HTML (free)
  • preview in desktop and mobile views
  • send an email to yourself to preview it

I’d highly recommend it if you want to add style to your emails without buying templates.

Make YouTube Videos Responsive

It’s kind of hard for me to believe given Google’s emphasis on making sites responsive, that they haven’t supplied people with an easier way of embedding YouTube videos on responsive sites. Fail.

Nonetheless, there’s workarounds to make the videos responsive by editing your CSS.

OS Training has a simple solution.  They create a wrapper in CSS that makes the embedded video responsive.  All you need to to is add the div class and copy and paste the CSS.

CSS Only Image Overlay

While this isn’t a Rails solution, it was one that was so helpful to me that I wanted to post about it.  I needed a tinted/filtered image overlay with text.  After Binging the internet, I found the solution courtesy of Koren Leslie Cohen.

You can read her post here to see a demo, but you wrap your image, like this:

  <div id=“outer-box”>
    <img src=“cartagena.jpg”>
    <div id=“inner-box”>
      <p>This is the overlay!</p>
    </div>
  </div>
and then add this CSS,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#outer-box {
  width: 300px;
  height: 194px;
  display: block;
  position: relative;
}
#outer-box img {
  width: 300px;
  height: auto;
}
#outer-box #inner-box {
  background: #FD8698;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}
#outer-box #inner-box p {
  color: #fff;
  lineheight: 150px;
  fontfamily: ‘arial’;
  textalign: center;
}
#outer-box:hover #inner-box {
  opacity: .9;
  transition: opacity .5s;
}

This will show the overlay when the image is hovered over.  For me, I wanted to show the overlay without the hover, so I changed line 33 to be:

#outer-box #inner-box {

Photoshop Alternatives

While it’s not related to programming, editing images is an activity that I encounter when creating my front end.

Photoshop is great, but sometimes I find other software easier.

Lunapic’s Color Change is awesome if you have a color that you want to replace in an image.  All you have to do it select the color you want to use in the image and then click on the color (in the image) you want replaced.  Voila!

Pic Monkey makes it super easy to convert an image into another shape.  My typical use case is changing an image into a circle shape (cropping the corners).  To do this, you just click: Frames > Shape Cutouts > [circle icon].

If you’re looking for additional functionality, similar to Photoshop, I recommend Pixlr (use on the internet) or Fire Alpaca (download and use locally).

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!