Images
A website won't be complete without some images and graphics for users to view.
Example Input
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac consequat turpis. Nullam viverra, neque at cursus
dignissim, quam ligula lacinia diam, vitae ultricies ligula
quam non dui. Morbi volutpat, risus quis aliquam sodales, ante
nisl tempor metus, quis scelerisque diam odio facilisis odio.
Pellentesque luctus metus vitae blandit interdum. Vestibulum
semper turpis felis, et dictum nulla euismod sit amet.
In placerat nulla sed elit consequat fermentum. Proin
vestibulum justo nec metus finibus hendrerit. Duis at
suscipit nunc. Donec molestie ultricies luctus. Nullam vel
imperdiet massa, sed facilisis erat.Example Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consequat turpis. Nullam viverra, neque at cursus dignissim, quam ligula lacinia diam, vitae ultricies ligula quam non dui. Morbi volutpat, risus quis aliquam sodales, ante nisl tempor metus, quis scelerisque diam odio facilisis odio. Pellentesque luctus metus vitae blandit interdum. Vestibulum semper turpis felis, et dictum nulla euismod sit amet. In placerat nulla sed elit consequat fermentum. Proin vestibulum justo nec metus finibus hendrerit. Duis at suscipit nunc. Donec molestie ultricies luctus. Nullam vel imperdiet massa, sed facilisis erat.
Advanced Features
Markdown does not support many features that configures the layout of the document. However, there are many features users would like to use with images such as:
- Right aligned images
- Resizing images
- Responsive resizing images
Solution 1: Write HTML
One solution to this is to manually write HTML within a Markdown document. Markdown supports embedding HTML within a Markdown document.
Float Images To The Right
Example Input
<img alt="tux" style="float: right;" src="https://mdg.imgix.net/assets/images/tux.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac consequat turpis. Nullam viverra, neque at cursus
dignissim, quam ligula lacinia diam, vitae ultricies ligula
quam non dui. Morbi volutpat, risus quis aliquam sodales, ante
nisl tempor metus, quis scelerisque diam odio facilisis odio.
Pellentesque luctus metus vitae blandit interdum. Vestibulum
semper turpis felis, et dictum nulla euismod sit amet.
In placerat nulla sed elit consequat fermentum. Proin
vestibulum justo nec metus finibus hendrerit. Duis at
suscipit nunc. Donec molestie ultricies luctus. Nullam vel
imperdiet massa, sed facilisis erat.Example Output
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac consequat turpis. Nullam viverra, neque at cursus dignissim, quam ligula lacinia diam, vitae ultricies ligula quam non dui. Morbi volutpat, risus quis aliquam sodales, ante nisl tempor metus, quis scelerisque diam odio facilisis odio. Pellentesque luctus metus vitae blandit interdum. Vestibulum semper turpis felis, et dictum nulla euismod sit amet. In placerat nulla sed elit consequat fermentum. Proin vestibulum justo nec metus finibus hendrerit. Duis at suscipit nunc. Donec molestie ultricies luctus. Nullam vel imperdiet massa, sed facilisis erat.
Set Image Size
Example Input
<img alt="tux" style="width: 50%; height: 240px" src="image.jpg">Example Output
Solution 2: Use Built-in Templates
Another solution we have created for users with limited programming background is to use the built-in collection of templates specifically geared towards images. You can learn more about them here