mirror of
https://github.com/codeninjasuk/codeninjasuk.github.io.git
synced 2024-11-26 01:07:53 -05:00
44 lines
1.2 KiB
Markdown
44 lines
1.2 KiB
Markdown
|
---
|
||
|
title: "Post: Image (Standard)"
|
||
|
categories:
|
||
|
- Post Formats
|
||
|
tags:
|
||
|
- image
|
||
|
- Post Formats
|
||
|
---
|
||
|
|
||
|
The preferred way of using images is placing them in the `/assets/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/assets/images/{% endraw %}` will make sure your images display properly in feeds and such.
|
||
|
|
||
|
Standard image with no width modifier classes applied.
|
||
|
|
||
|
**HTML:**
|
||
|
|
||
|
```html
|
||
|
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg" alt="">{% endraw %}
|
||
|
```
|
||
|
|
||
|
**or Kramdown:**
|
||
|
|
||
|
```markdown
|
||
|
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg){% endraw %}
|
||
|
```
|
||
|
|
||
|
![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/assets/images/unsplash-image-9.jpg)
|
||
|
|
||
|
Image that fills page content container by adding the `.full` class with:
|
||
|
|
||
|
**HTML:**
|
||
|
|
||
|
```html
|
||
|
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg" alt="" class="full">{% endraw %}
|
||
|
```
|
||
|
|
||
|
**or Kramdown:**
|
||
|
|
||
|
```markdown
|
||
|
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/assets/images/filename.jpg)
|
||
|
{: .full}{% endraw %}
|
||
|
```
|
||
|
|
||
|
![Unsplash image 10]({{ site.url }}{{ site.baseurl }}/assets/images/unsplash-image-10.jpg)
|
||
|
{: .full}
|