Image placement/alignment?

[nelsonic]

What imaging placement/positioning should we support? I'm thinking of matching the WordPress image alignment:

[iteles]

:+1: The key for images is: a) Being able to either make text flow around them (as is the case for left and right in WP) or not (center) b) Being able to resize them

[nelsonic]

I expect the images component to take a few weeks to build... Just putting this issue up to remind us that its a priority after #WebSummit :wink:

[iteles]

Of course!

[des-des]

There question here is, if we use markdown to build our pages, how will we get this positioning data into a markdown file .. lots of options ..

[nelsonic]

Markdown does allow <img> tags with style property ... :sunrise: worth researching to see if anyone has an elegant solution, e.g: how does Medium, Squarespace or Tumblr do it? else thinking cap on... :thought_balloon:

[des-des]

I think if we were building the html ourselves amp would allow us enough styling power to do what we want. The problem is that the data for each file is in a .md file.

If we want to create pages nicely with out of the box markdown files (ie dwyl repos) then if we want to do anything cleverer than add nice semantic style to the output html (like we have here) then we can do clever things by looking at the structure of the output html. ie if there is a list of links at the start of the file put them in a nicely styled header.

Obviously going forward we would want more control then this. the simple/ugly way of doing this would be to add further semantic rules to the markdown ie

#### image title
$FLOAT_RIGHT(altText)[url]

Obviously option three would be not to use md as a medium to store the content for adoro sites.

[nelsonic]

@des-des can we work within the markdown rules and make something that will allow us to float images? My suggestion would be to put a keyword after the Title text part of an image which we can parse and use to style it.

A markdown-standard-compliant image has the format:

![alt text](http://i.imgur.com/glpNEuq.jpg "Title Text")

see: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images

But if we add the word right after the title string it does not affect the rendering:

![alt text](http://i.imgur.com/glpNEuq.jpg "Title Text" right)

![alt text](http://i.imgur.com/glpNEuq.jpg "Title Text" right)

If we define a set of keywords that get translated there aren't that many... Without "extending" the markdown language we can add a feature that _degrades gracefully_...

[des-des]

we can also use alt text?

[iteles]

Although if we use alt text we have to remember that that's what will show up on mouse-over and get read out by screen readers so it has to make sense in those contexts.

[nelsonic]

@des-des yes, we could use the alt text section provided we remove the keyword during md->html->amp translation. :+1: