N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add support to gallery helper for defining column layout

Browse source 
e.g. `{% include gallery id="gallery" layout="half" caption="2 column gallery caption" %}

Fixes #1821
This commit is contained in:
Michael Rose 2018-09-10 10:24:24 -04:00
parent d082dc2a39
commit 833ab3933d
6 changed files with 532 additions and 503 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -1,5 +1,9 @@
## Unreleased ## Unreleased
### Enhancements
* Add support to [gallery helper](https://mmistakes.github.io/minimal-mistakes/docs/helpers/#gallery) for defining column layout (`half`, `third`, or single `''`). [#1821](https://github.com/mmistakes/minimal-mistakes/issues/1821)
### Bug Fixes ### Bug Fixes
* Fix sidebar navigation list toggle. [#1819](https://github.com/mmistakes/minimal-mistakes/issues/1819) * Fix sidebar navigation list toggle. [#1819](https://github.com/mmistakes/minimal-mistakes/issues/1819)

4
_includes/gallery
View file

@ -4,6 +4,9 @@
{% assign gallery = page.gallery %} {% assign gallery = page.gallery %}
{% endif %} {% endif %}
{% if include.layout %}
{% assign gallery_layout = include.layout %}
{% else %}
{% if gallery.size == 2 %} {% if gallery.size == 2 %}
{% assign gallery_layout = 'half' %} {% assign gallery_layout = 'half' %}
{% elsif gallery.size >= 3 %} {% elsif gallery.size >= 3 %}
@ -11,6 +14,7 @@
{% else %} {% else %}
{% assign gallery_layout = '' %} {% assign gallery_layout = '' %}
{% endif %} {% endif %}
{% endif %}
<figure class="{{ gallery_layout }} {{ include.class }}"> <figure class="{{ gallery_layout }} {{ include.class }}">
{% for img in gallery %} {% for img in gallery %}

27
docs/_docs/14-helpers.md
View file

@ -58,7 +58,7 @@ Instead of repeating `{% raw %}{{ site.url }}{{ site.baseurl }}{% endraw %}` ove
Generate a `<figure>` element with a single image and caption. Generate a `<figure>` element with a single image and caption.
| Include Parameter | Required | Description | | Include Parameter | Required | Description |
| ---- | -------- | ----------- | | ----------------- | ------------ | ---------------------------------------------------------------------------------------------------- |
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | | **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. |
| **alt** | Optional | Alternate text for image. | | **alt** | Optional | Alternate text for image. |
| **caption** | Optional | Figure caption text. Markdown is allowed. | | **caption** | Optional | Figure caption text. Markdown is allowed. |
@ -87,7 +87,7 @@ Generate a `<figure>` element with optional caption of arrays with two or more i
To place a gallery add the necessary YAML Front Matter. To place a gallery add the necessary YAML Front Matter.
| Name | Required | Description | | Name | Required | Description |
| ---- | -------- | ----------- | | -------------- | ------------ | --------------------------------------------------------------------------------------------------------------------- |
| **url** | Optional | URL to link gallery image to (eg. a larger detail image). | | **url** | Optional | URL to link gallery image to (eg. a larger detail image). |
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | | **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. |
| **alt** | Optional | Alternate text for image. | | **alt** | Optional | Alternate text for image. |
@ -112,8 +112,9 @@ gallery:
And then drop-in the gallery include in the body where you'd like it to appear. And then drop-in the gallery include in the body where you'd like it to appear.
| Include Parameter | Required | Description | Default | | Include Parameter | Required | Description | Default |
| ----------------- | -------- | ----------- | ------- | | ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| **id** | Optional | To add multiple galleries to a document uniquely name them in the YAML Front Matter and reference in `{% raw %}{% include gallery id="gallery_id" %}{% endraw %}` | `gallery` | | **id** | Optional | To add multiple galleries to a document uniquely name them in the YAML Front Matter and reference in `{% raw %}{% include gallery id="gallery_id" %}{% endraw %}` | `gallery` |
| **layout** | Optional | Layout type. 2 column: `half`, 3 column: `third`, single column: `''` (blank) | Determined by gallery size. Two items: `half`, three or more items: `third`. |
| **class** | Optional | Use to add a `class` attribute to the surrounding `<figure>` element for additional styling needs. | | | **class** | Optional | Use to add a `class` attribute to the surrounding `<figure>` element for additional styling needs. | |
| **caption** | Optional | Gallery caption description. Markdown is allowed. | | | **caption** | Optional | Gallery caption description. Markdown is allowed. | |
@ -125,7 +126,7 @@ And then drop-in the gallery include in the body where you'd like it to appear.
{% include gallery caption="This is a sample gallery with **Markdown support**." %} {% include gallery caption="This is a sample gallery with **Markdown support**." %}
**More Gallery Goodness:** A few more examples and [source code](https://github.com/{{ site.repository }}/blob/master/docs/_posts/2010-09-09-post-gallery.md) can be seen in [this sample gallery post]({{ "" | relative_url }}{% post_url 2010-09-09-post-gallery %}). **More Gallery Goodness:** A few more examples and [source code](https://github.com/{{ site.repository }}/blob/master/docs/\_posts/2010-09-09-post-gallery.md) can be seen in [this sample gallery post]({{ "" | relative_url }}{% post_url 2010-09-09-post-gallery %}).
{: .notice--info} {: .notice--info}
## Feature Row ## Feature Row
@ -135,9 +136,9 @@ Designed to compliment the [`splash`]({{ "/docs/layouts/#splash-page-layout" | r
To add a feature row containing three content blocks with text and image, add the following YAML Front Matter To add a feature row containing three content blocks with text and image, add the following YAML Front Matter
| Name | Required | Description | Default | | Name | Required | Description | Default |
| ---- | ----------- | ----------- | ------- | | ----------------- | ------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------- |
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | | | **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | |
| **image_caption** | Optional | Caption for image, Markdown is supported eg: `"Image from [Unsplash](https://unsplash.com)" | | | **image_caption** | Optional | Caption for image, Markdown is supported eg: `"Image from [Unsplash](https://unsplash.com)" |
| **alt** | Optional | Alternate text for image. | | | **alt** | Optional | Alternate text for image. | |
| **title** | Optional | Content block title. | | | **title** | Optional | Content block title. | |
| **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | | | **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | |
@ -166,7 +167,7 @@ feature_row:
And then drop-in the feature row include in the body where you'd like it to appear. And then drop-in the feature row include in the body where you'd like it to appear.
| Include Parameter | Required | Description | Default | | Include Parameter | Required | Description | Default |
| ----------------- | -------- | ----------- | ------- | | ----------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| **id** | Optional | To add multiple rows to a document uniquely name them in the YAML Front Matter and reference in `{% raw %}{% include feature_row id="row2" %}{% endraw %}` | `feature_row` | | **id** | Optional | To add multiple rows to a document uniquely name them in the YAML Front Matter and reference in `{% raw %}{% include feature_row id="row2" %}{% endraw %}` | `feature_row` |
| **type** | Optional | Alignment of the featured blocks in the row. Options include: `left`, `center`, or `right` aligned. | | | **type** | Optional | Alignment of the featured blocks in the row. Options include: `left`, `center`, or `right` aligned. | |
@ -176,7 +177,7 @@ And then drop-in the feature row include in the body where you'd like it to appe
{% include feature_row %} {% include feature_row %}
**More Feature Row Goodness:** A [few more examples]({{ "/splash-page/" | relative_url }}) and [source code](https://github.com/{{ site.repository }}/blob/master/docs/_pages/splash-page.md) can be seen in the demo site. **More Feature Row Goodness:** A [few more examples]({{ "/splash-page/" | relative_url }}) and [source code](https://github.com/{{ site.repository }}/blob/master/docs/\_pages/splash-page.md) can be seen in the demo site.
{: .notice--info} {: .notice--info}
## Responsive Video Embed ## Responsive Video Embed
@ -184,7 +185,7 @@ And then drop-in the feature row include in the body where you'd like it to appe
Embed a video from YouTube or Vimeo that responsively sizes to fit the width of its parent. Embed a video from YouTube or Vimeo that responsively sizes to fit the width of its parent.
| Parameter | Required | Description | | Parameter | Required | Description |
|---------- |--------- | ----------- | | ---------- | ------------ | ---------------------------------------------------------- |
| `id` | **Required** | ID of the video | | `id` | **Required** | ID of the video |
| `provider` | **Required** | Hosting provider of the video, either `youtube` or `vimeo` | | `provider` | **Required** | Hosting provider of the video, either `youtube` or `vimeo` |
@ -237,7 +238,7 @@ Auto-generated table of contents list for your posts and pages can be enabled us
Add `toc: true` to the YAML Front Matter of any post or page. Add `toc: true` to the YAML Front Matter of any post or page.
| Parameter | Required | Description | Default | | Parameter | Required | Description | Default |
| --------- | -------- | ----------- | ------- | | -------------- | -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **toc** | Optional | Show table of contents. (boolean) | `false` | | **toc** | Optional | Show table of contents. (boolean) | `false` |
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. | | **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. | | **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
@ -246,11 +247,11 @@ Add `toc: true` to the YAML Front Matter of any post or page.
**TOC example with custom title and icon** **TOC example with custom title and icon**
```yaml ```yaml
---
toc: true toc: true
toc_label: "My Table of Contents" toc_label: "My Table of Contents"
toc_icon: "cog" toc_icon: "cog"
--- ---
``` ```
**Note:** using both methods will have unintended results. Be sure to remove `{% raw %}{% include toc %}{% endraw %}` placed table of contents from your content when using `toc: true`. **Note:** using both methods will have unintended results. Be sure to remove `{% raw %}{% include toc %}{% endraw %}` placed table of contents from your content when using `toc: true`.
@ -271,7 +272,7 @@ To include a Kramdown [auto-generated table of contents](https://kramdown.gettal
{: .notice--danger} {: .notice--danger}
| Parameter | Required | Description | Default | | Parameter | Required | Description | Default |
| --------- | -------- | ----------- | ------- | | --------- | -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **title** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. | | **title** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
| **icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. | | **icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/icons?d=gallery&s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
@ -350,5 +351,5 @@ To add a navigation list to a post or page's main content instead of the sidebar
{% include nav_list nav="foo" %} {% include nav_list nav="foo" %}
| Parameter | Required | Description | | Parameter | Required | Description |
| --------- | -------- | ----------- | | --------- | ------------ | -------------------------------------------------------- |
| items | **Required** | Name of the links array found in `_data/navigation.yml`. | | items | **Required** | Name of the links array found in `_data/navigation.yml`. |

896
docs/_docs/18-history.md
View file

File diff suppressed because it is too large Load diff

8
docs/_posts/2010-09-09-post-gallery.md
View file

@ -132,3 +132,11 @@ And place it like so:
And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`. And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`.
{% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %} {% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %}
Gallery column layout can be overrided by setting a `layout`.
```liquid
{% raw %}{% include gallery id="gallery" layout="half" caption="This is a half gallery layout example." %}{% endraw %}
```
{% include gallery id="gallery" layout="half" caption="This is a half gallery layout example." %}

8
test/_posts/2010-09-09-post-gallery.md
View file

@ -132,3 +132,11 @@ And place it like so:
And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`. And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`.
{% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %} {% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %}
Gallery column layout can be overrided by setting a `layout`.
```liquid
{% raw %}{% include gallery id="gallery" layout="half" caption="This is a half gallery layout example." %}{% endraw %}
```
{% include gallery id="gallery" layout="half" caption="This is a half gallery layout example." %}