##Adapted for use at the Kyiv Post
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.
- 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.
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/
Settings and controls are configured through source/javascripts/settings.js.erb
. The settings file has ample comments to document configuration.
Include your own fonts in stylesheets/_fonts.scss
, then add your font options into the settings file.
Set the theme-color variable in source/stylesheets/_vars.scss
. That one color will be tinted across all editor controls.
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:
-
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.
-
Embed all of your watermark images as base64 data URIs within the
settings.js.erb
file. The asset pipeline'sasset_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.
- http://www.sbnation.com/a/meme
- https://twitter.com/voxdotcom/status/481671889094340608
- https://twitter.com/voxdotcom/status/479228288221470721
- https://twitter.com/voxdotcom/status/481619042545844225
- Fork it ( https://github.com/voxmedia/meme/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request