Meme-O-Rama

memeorama.md

Meme-O-Rama!

The Basics

Setup a new Rails app and start it

• rails new memeorama
• rails server

Create our first scaffold

• rails generate scaffold meme name:string description:text picture:string

Migrate the database to add the memes table

• rake db:migrate

Add to the first line of config/routes.rb

• root 'memes#index'

Look around :)

Add some validations

class Meme < ActiveRecord::Base
  validates :name, presence: true
  validates :description, presence: true
end

Add Foundation

Add the foundation gem

• gem 'foundation-rails'
• bundle install
• Ctrl+C in the rails server window

Add the foundation css

Open app/assets/stylesheets/application.css

• Add *= require foundation
• Remove *= require_tree .

Add the foundation topbar

Paste this in app/views/layouts/application.html.erb

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to "Meme-O-Rama", root_path %></h1>
    </li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li><%= link_to "All memes", memes_path %></li>
    </ul>
  </section>
</nav>

<div class="row">
  <div class="small-8 columns"><%= yield %></div>
</div>

Add image upload

Add the carrierwave gem

• gem "carrierwave"
• bundle install

Create our uploader

• rails generate uploader Picture
• add to app/models/meme.rb: mount_uploader :picture, PictureUploader
• Ctrl+C in the rails server window

Add pictures to our views

• edit form with: file_field
• edit show with: <%= image_tag(@meme.picture_url, width: 600) if @meme.picture.present? %>
• edit index with: <%= image_tag(meme.picture_url, width: 200) if meme.picture.present? %>

Add a static page

Add a controller, edit routes and

• rails generate controller pages about
• edit config/routes and add: get '/about' => 'pages#about', as: :about
• add to application.html.erb: <%= link_to "About", about_path %>

Meme Captions!

Create the scaffold and setup relationships

• rails generate scaffold caption sentence:string meme_id:integer picture:string
• add to meme model: has_many :captions
• add to caption model: belongs_to :meme

Edit views

• add to application.html.erb: <%= link_to "All captions", captions_path %>
• add to application.html.erb: <%= link_to "New caption", new_caption_path %>
• add to caption form: <%= f.select :meme_id, options_from_collection_for_select(Meme.all, "id", "name") %>

Add caption images

Generate uploader

• rails generate uploader CaptionImage
• add to caption model: mount_uploader :picture, CaptionImageUploader

Add rmagick

• gem 'rmagick'
• bundle install

Add carrierwave hook

Add to caption model

def load_picture_from_meme!
  self.picture = meme.picture
  self.save!
end

Add in captions_controller.rb in both create and update:

@caption.load_picture_from_meme!

Add to the index and show of caption:

• edit show with: <%= image_tag(@caption.picture_url, width: 600) if @caption.picture.present? %>
• edit index with: <%= image_tag(caption.picture_url, width: 200) if caption.picture.present? %>

Decomment from caption_image_uploader:

• include CarrierWave::RMagick

Add to caption_image_uploader:

process :sentencify

def sentencify
  manipulate! do |img|
    title = Magick::Draw.new

    title.annotate(img, 0,0,10,70, model.sentence) {
      self.font_family = 'Helvetica'
      self.fill = 'white'
      self.pointsize = 64
    }

    img
  end
end

BOOM, we're done!