uuc5lg
Last Updated: February 25, 2016
·
975
· icflorescu
Icflorescu

Better looking images in your Coderwall protips

There's an excellent markdown cheatsheet for writing Coderwall protips here; as most of you know, the markdown syntax for inlining pictures in the HTML output is this:

![alt text](http://example.com/image.png)

You've probably noticed that when you drag & drop a picture on your protip editbox, it gets uploaded to Amazon S3 and the corresponding markdown code is generated automatically.

However, there's a problem with the default Markdown syntax: there's no way for specifying the dimensions of an image.

But if you're striving for perfection and want your protips to look really good, you'll prepare your images to have the same width as the parent content div tag (616px on a desktop screen at the time of writing).

Well, there's an easy way of doing this - since you can simply use regular img HTML tags in your markdown content, you can simply replace the default snippet with something like this:

<img src="http://example.com/image.png" width="616" height="200" alt="Image title" title="Image title" />

Just make sure to scale your pictures to 616px x YYYpx (and optimise it for fast downloading) before uploading:

Făgăraș Mountains, Romania

Say Thanks
Respond