Files
_data
_docs
_drafts
_includes
_layouts
_pages
_pets
_portfolio
_posts
2009-05-15-edge-case-nested-and-mixed-lists.md
2009-06-01-edge-case-many-tags.md
2009-07-02-edge-case-many-categories.md
2009-08-06-edge-case-no-body-content.md
2009-09-05-edge-case-no-yaml-title.md
2009-10-05-edge-case-title-should-not-overflow-the-content-area.md
2009-10-05-edge-case-very-long-title.md
2010-01-07-post-modified.md
2010-01-07-post-standard.md
2010-01-08-post-chat.md
2010-02-05-post-notice.md
2010-02-05-post-quote.md
2010-03-07-post-link.md
2010-06-02-post-video-youtube.md
2010-08-05-post-image-linked.md
2010-08-05-post-image-standard.md
2010-08-06-post-image-linked-caption.md
2010-08-07-post-image-caption.md
2010-09-09-post-gallery.md
2010-09-10-post-twitter-embeds.md
2010-10-25-post-future-date.md
2012-01-02-layout-comments-disabled.md
2012-01-02-layout-comments.md
2012-01-02-layout-read-time-disabled.md
2012-01-02-layout-read-time.md
2012-01-02-layout-related-posts-disabled.md
2012-01-02-layout-related-posts.md
2012-01-02-layout-sharing-disabled.md
2012-01-02-layout-sharing.md
2012-01-03-layout-read-time-comments-sharing-related-posts-disabled.md
2012-01-03-layout-table-of-contents-post.md
2012-03-14-layout-code-excerpt-generated.md
2012-03-14-layout-excerpt-defined.md
2012-03-14-layout-excerpt-generated.md
2012-03-15-layout-author-override.md
2012-03-15-layout-author-sidebar-disabled.md
2012-03-15-layout-header-image-external.md
2012-03-15-layout-header-image-horizontal.md
2012-03-15-layout-header-image-text-readability.md
2012-03-15-layout-header-image-vertical.md
2012-03-15-layout-header-overlay-color.md
2012-03-15-layout-header-overlay-image.md
2012-03-15-layout-more-tag.md
2012-03-15-layout-sidebar-custom.md
2012-05-22-markup-text-readability.md
2013-01-05-markup-title-with-markup.md
2013-01-05-markup-title-with-special-characters.md
2013-01-09-markup-text-alignment.md
2013-01-10-markup-image-alignment.md
2013-01-11-markup-html-tags-and-formatting.md
2013-05-22-markup-more-images.md
2013-08-16-markup-syntax-highlighting.md
2016-02-24-welcome-to-jekyll.md
_recipes
assets
images
.editorconfig
.gitattributes
.gitignore
CHANGELOG
Gemfile
Gemfile.lock
LICENSE
README
_config.dev.yml
_config.yml
index.html
package.json
website/_posts/2010-08-05-post-image-standard.md

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 `/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/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 }}/images/filename.jpg" alt="">{% endraw %}
```
**or Kramdown:**
```markdown
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg){% endraw %}
```
![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/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 }}/images/filename.jpg" alt="" class="full">{% endraw %}
```
**or Kramdown:**
```markdown
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg)
{: .full}{% endraw %}
```
![Unsplash image 10]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-10.jpg)
{: .full}