Add .full image class for spanning the entire content container

This commit is contained in:
Michael Rose 2016-03-15 12:55:19 -04:00
parent 2b28790ae8
commit 5a14bfb98c
5 changed files with 28 additions and 5 deletions

View file

@ -128,6 +128,11 @@ body:hover .visually-hidden button {
}
}
/* file page content container */
.full {
max-width: 100% !important;
}
/*
Icons

View file

@ -16,7 +16,7 @@
{% assign gallery-layout = '' %}
{% endif %}
<figure class="{{ gallery-layout }}">
<figure class="{{ gallery-layout }} {{ include.class }}">
{% for img in gallery %}
{% if img.url %}
<a href=

View file

@ -10,3 +10,21 @@ tags:
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 %}` well make sure your images display properly in feeds and such.
![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
<img src="/images/filename.jpg" alt="" class="full">
```
**or Kramdown:**
```markdown
{% raw %}![alt](/images/filename.jpg)
{: .full}{% endraw %}
```
![Unsplash image 10]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-10.jpg)
{: .full}

View file

@ -86,6 +86,6 @@ And place it like so:
{% include gallery id="gallery2" caption="This is a second gallery example with images hosted externally." %}
And for giggles one more gallery just to make sure this works.
And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`.
{% include gallery id="gallery3" caption="This is a third gallery example with two images." %}
{% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %}

File diff suppressed because one or more lines are too long