voxmedia / meme

Meme generator

Meme v.2

Contributors: Yuri Victor, Joshua Benton, Matt Montgomery, Ivar Vong, Steve Peters, Flip Stewart, Greg MacWilliam.

Meme is a generator that Vox Media uses to create social sharing images. See working version at http://www.sbnation.com/a/meme.

What's new in version 2.0?

• Refactored into a formal MV* app.
• Fixed bugs with rendering state and repeat drag-n-drop images.
• Improved initial rendering with loaded web fonts.
• Improved cross-origin options: both for base64 images and CORS.
• Highly (and easily!) customizable editor and theme options.
• Watermark selector.

Install

• git clone https://github.com/voxmedia/meme.git
• bundle install
• bundle exec middleman

This will start a local web server running at: http://localhost:4567/

Customization

Configuration

Settings and controls are configured through source/javascripts/settings.js.erb. The settings file has ample comments to document configuration.

Fonts

Include your own fonts in stylesheets/_fonts.scss, then add your font options into the settings file.

Editor theme

Set the theme-color variable in source/stylesheets/_vars.scss. That one color will be tinted across all editor controls.

Cross-Origin Resources (CORS)

This is an HTML5 Canvas-based application, and thus comes with some security restrictions when loading graphics across domains (ex: a canvas element on http://tatooine.com cannot export with an image hosted on http://dagobah.com).

If you're hosting this application on the same domain that serves your images, then congratulations! You have no problems. However, if you're going through a CDN, then you'll probably encounter some cross-domain security issues; at which time you have two options:

1. Follow this excellent MDN article about configuring "Access-Control-Allow-Origin" headers. You'll need to enable these headers on your CDN, at which time the Meme app should be able to request images from it.

2. Embed all of your watermark images as base64 data URIs within the settings.js.erb file. The asset pipeline's asset_data_uri helper method makes this very easy, and effectively embeds all image data within your JavaScript. The downside here is that your JavaScript will become a very large payload as you include more images. In the long term, getting CORS headers configured will be a better option.

Examples

• http://www.sbnation.com/a/meme
• https://twitter.com/voxdotcom/status/481671889094340608
• https://twitter.com/voxdotcom/status/479228288221470721
• https://twitter.com/voxdotcom/status/481619042545844225

Contributing

1. Fork it ( https://github.com/voxmedia/meme/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

meme's Issues

Instaling in non-ruby server

There is a way to export the proyect to put it in an Apache web server?

Make Headline Text Uppercase

Hey there,

How do you change the headline text and source text to uppercase?

Thanks!

Maya

webcam button appears on android (HTC, samsung) but not iPhone

I added the "use webcam" option so that my meme generator would be mobile friendly. Seems like the webcam button does not appear on iPhone. I tested on both an iPhone 5S, iPhone 6 vs HTC and Samsung. In my stylesheets, I changed the min-width of the web-cam files from 700px to 300px to accommodate smaller screen sizes to see if that would fix it. Unfortunately it doesn't and I can't seem to figure out the issue here. Any ideas why?

$m: '.m-canvas';

#{$m} {
  @media screen and (min-width: 300px) {
    width: 55%;
  }

  #{$m}__canvas {
    background: #fcfcfc;

    canvas {
      max-width: 100% !important;
    }
  }

If you have an iPhone, feel free to test using @alishalisha's (awesome) example: alisharamos.com/ilooklikeanengineer

iPhone vs. Android screenshots:
vs.

"Download image" doesn't work in Safari

When trying to save an image in Safari, I (and other users in my office) get the following error:

SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent. saveCanvas

Any suggestions there? Is that just in my build? Things work just fine in Chrome.

Make latest version of Meme available on GitHub

The version of Meme used on SBNation includes a variety of cool new features that don't seem to be available on GitHub:

• Basic Markdown support
• "Design" panel with a variety of new background and color options
• Vertical Alignment and Letter Spacing
• Uppercase heading/source options

Is there any chance of this new version of Meme making it to GitHub? Thanks very much in advance!

.

Develop better system for creating one-off pages

Develop a system in which one-off pages (like partnerships page) can be created entirely from Contentful, rather than the page needing to be created in the code first.

If we want those pages to always live under a specific sub-url (like partnerships), we'd just need to create a partnerships/[slug] page and a way to link those [site content] data to the pages. Other approaches would be more complicated

Drag'n Drop misbehaves when the photo is lower than the frame

Drop the image below, and try to drag it. It will stick to the right border.

I've discovered that playing with zoom will eventually help you move it, but as soon as it get smaller than the frame, it gonna stick to the left border when dragged.

How to remove image files from sprockets cache?

ruby noob here. There's apparently some caching going on so that removing image files from source/images gets middleman/middleman-sprockets all upset. I can't find anyway to appease them/it other than returning the unneeded images to the directory.
Is there a way to turn this behavior off?

Middleman build results in wrong asset directories

Hi there,

When I run bundle exec middleman build using the default config.rb, it creates the wrong paths for my CSS/Javascript and images. Adding activate :relative_assets solves my CSS/JS folder issues, but it still thinks my images live in meme/images rather than meme/build/images.

What am I doing wrong here?

Here's what my config.rb file looks like:

# Reload the browser automatically whenever files change
activate :livereload

###
# Compass
###
compass_config do |config|
  config.output_style = :compressed
end

###
# Helpers
###
helpers do
  def get_url
    absolute_prefix + url_prefix
  end
end

###
# Config
###
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
set :url_prefix, '/'
set :absolute_prefix, 'http://localhost:4567'

# Build-specific configuration
configure :build do
  puts "local build"
  set :url_prefix, ""
  set :absolute_prefix, ""
  activate :asset_hash
  activate :minify_javascript
  activate :minify_css
end

Meme

.

Installing on Windows

Hey,

I'm trying to install the meme generator on Windows. A developer friend tried to install it, but he got stuck on the bundle install. I need the build tools and development kit for the ruby app. How do I do this?

Invalid link

http://www.sbnation.com/a/meme is an invalid link

"Unable to load the EventMachine C extension"

I ran into this problem on a Windows 8.1 machine while using Git bash. Not quite sure how to proceed.

Ruby Version

La versión actual de ruby no permite seguir la guia de instalación debido a la antigüedad del proyecto. Hay que forzar la maquina a usar una versión de los paquetes de RubyGem anterior

Disable download if meme template has not been created.

To begin with, Awesome product you guys. Handy to a lot of memers out there.

Not much of an issue, can categorize it as a bug. So when I hit the download button without creating a meme template a file will be downloaded. Have attached the snapshot below.

Please make a fix such that the button triggers download only when a meme has been generated.

Thank you 😄.

Dont know

What the heck I'm doing lol

Using the new line escape character

Hi,

In the demo we can use \n to go to the next line but here it's not there.
Is there any way we can add that here or is there anything I'm missing?

Thanks.