Please check the support questions ‘How do I place images in my content?‘ and ‘How do I link an image?‘ to familiarize yourself with the concept and syntax surrounding placing images within your content.
The Markdown syntax
Note that the Markdown syntax for an embedded image (or an inline image) is . This syntax is used when you place an image in between text inside a Markdown text field:
Title and alt tags
The title tag - title-of-image - is optional and it becomes the value of the title="" attribute if it is filled in. The title is what appears when you mouseover an image. In the past we sometimes used the alt text as the title if the title wasn’t filled in, but that was inconsistent and bad practice. (We also sometimes fell back to the title of the page/post’s related image, but I’m getting ahead if myself.)
Unique internal links
In most cases link-to-image would be pre-filled by a unique internal identifier, e.g. #file_d35dc891c5# and you don’t have to worry about it unless you want to replace it with something else.
Aligning images to the left or right
We adapted Markdown to enable you to align images to the left or the right as follows:  and that would add class="left" or class="right" to the image tag. Each skin ships with the necessary CSS to float those images to the left or right and add a margin to the left or right (depending on which side the image is relative to the text) and below it (so that text wouldn’t touch it when it gets wrapped around). The implementation was inconsistent, and it got ignored when images got resized, but we’ll get to that later.
Template magic
After Markdown processing, we also do some “post-processing” of the HTML when it gets used inside a template. This can be custom for every Markdown field in every template in each skin. The different skins mostly did the same things, but not always.
The way it works is if you uploaded an image to a page, post or pod in Tank and you paste the  style link inside Markdown, Tank finds that tag and figures out which image it was for, then passes it along to another template.
This part is unchanged, but the next step changed a bit:
How it used to work
If the image was too wide for the area you were using it in, it would size it down to just fit and add class="block" to it which meant that text would continue below the image.
If the image width was smaller than half the width of the content area it would add class="wrap" to it which meant that text would flow around it. Typically it would always place the image on the left.
If the image width was wider than half the width of the content area, but narrower than the full width it would typically also add class="block" under the assumption that the space next to it would be too narrow for text. Whether images were left aligned or center aligned was up to the skin.
The biggest problems were:
It got skipped entirely if you specified “left” or “right” and therefore you could end up in a situation where someone aligned a massive image that was larger than the screen and tried to fit it into a 480px wide column which completely broke the design in unpredictable ways.
It sometimes fell back to the title of the image that you uploaded and sometimes not and this could override the Markdown title leading to lots of confusion.
It was completely unmaintainable because every field on every template on every skin had a block of template code and the skin had a corresponding block of CSS. This was quickly becoming a mess.
How it works now
If the image is too wide, it still sizes it down to fit and adds class="block". It will also link the image to open the full size version in a new window.
If the image is narrower than half the width of the content area, it will use class="left" or class="right" if you specified it and if you didn’t it will use class="wrap" which is just an alias for the default which is currently always left.
If the image is wider than half the width and narrower than the full width, it will use class="left" or class="right" if you specified it, otherwise it will add class="block" assuming again that there is not enough space next to it.
The resizing now all gets done in one place, so the templates just specify the width of the content field (the maximum width for images used inside it).
Frames
We’ve used this opportunity to add a new feature we call ‘frames’: if you give the image a title and/or description (by editing the image itself in the list of related files at the bottom of the screen) it will wrap the entire image tag inside a div tag with class="frame" and include the title and description below the image tag in a div tag with class="info".
Currently skins style this very conservatively, but the idea is to be able create properly captioned images usually found inside certain news sites.
Well done guys - this is a revelation - I did not know that you could add left or right - will work out how all this works in the real world very soon.
Thanks for all the work & a great explanation ...
Thanks Andrew - let me know how it plays out.
Apologies if it threw out some of the work you have already done on your sites - it was a necessary upgrade to an area that really needed it.
Are you going to, or have you, released your modified Markdown syntax? I'd love to get my hands on the image alignment stuff.
Hi Sam
At this stage we have no plans to release the modified syntax - most of it is in fact simply compatibility with the CSS of our sites and probably not suitable for anything else 'out there'.
Thanks Alan. Just to confirm - when say that the Markdown syntax includes alignment, you're referring to your own custom Markdown syntax, right? Because as far as I can tell none of the standard Markdown libraries include alignment as an option.
Sam: yes, that's correct. In fact we've extended Markdown so much that in fact it's hardly recognisable as Markdown.
See our support section for what I mean:
http://withtank.com/support/manag... - the syntax started out as Markdown but it ended up being something entirely different.