How To Add New Images To Damn.Dog

The rounds in damn.dog are identified by the wikiHow object inside of js/partials/_drawings.js.

Each entry is a separate round and for each entry, the slug identifies:

1. Where to look for the .jpg - the system looks for /img/pics/{{slug}}.jpg (where the filename is converted to lowercase).
2. The text for the answer, where the answer is defined as {{slug}} with the hyphens converted to spaces.
3. The URL to link to, defined as http://www.wikihow.com/{{slug}}, where the slug is left intact.

For this reason, if you have a page that's got nonstandard characters, make sure they're intact for legibility. For example, it should be Stop-Staring-at-a-Girl's-Boobs and not Stop-Staring-at-a-Girl%27s-Boobs

To format the image, copy the image itself into Photoshop (or whatever). If you need to crop out the title from the image, do so and then add in one of the watermarks in the /img directory. Save as a jpeg (700px wide, medium quality) in the img/pics folder, with the filename matching the wikiHow url (except in lowercase).

If, for some reason you want to point to an image hosted somewhere else, that's also an option. Underneath the slug attribute, you can also add a pic attribute, so like...

{
  slug: "Fix-Bad-Breath-on-the-Spot",
  pic: "http://some-tumblr-page.com/image.jpg"
},

This way, the slug will populate text and URL, but the pic will be pulled from the location you specify.

Please do not add any images to damn.dog which don't contain the wikihow logo somewhere or other. It's my wish to maintain their CC-BY-SA license.

Oh, finally, the javascript for damn.dog is compiled with Prepros. If you're having troubles getting the javascript to run, try installing that. Although that isn't a requirement, since I'd recompile myself on pull request anyway.

Hope that explains it.