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)

14
_includes/gallery
View file

@ -4,12 +4,16 @@
{% assign gallery = page.gallery %} {% assign gallery = page.gallery %}
{% endif %} {% endif %}
{% if gallery.size == 2 %} {% if include.layout %}
{% assign gallery_layout = 'half' %} {% assign gallery_layout = include.layout %}
{% elsif gallery.size >= 3 %}
{% assign gallery_layout = 'third' %}
{% else %} {% else %}
{% assign gallery_layout = '' %} {% if gallery.size == 2 %}
{% assign gallery_layout = 'half' %}
{% elsif gallery.size >= 3 %}
{% assign gallery_layout = 'third' %}
{% else %}
{% assign gallery_layout = '' %}
{% endif %}
{% endif %} {% endif %}
<figure class="{{ gallery_layout }} {{ include.class }}"> <figure class="{{ gallery_layout }} {{ include.class }}">

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

@ -51,17 +51,17 @@ Instead of repeating `{% raw %}{{ site.url }}{{ site.baseurl }}{% endraw %}` ove
[Jekyll Group-By-Array](https://github.com/mushishi78/jekyll-group-by-array) by Max White. [Jekyll Group-By-Array](https://github.com/mushishi78/jekyll-group-by-array) by Max White.
A liquid include file for Jekyll that allows an object to be grouped by an array. A liquid include file for Jekyll that allows an object to be grouped by an array.
## Figure ## Figure
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. |
Using the `figure` include like so: Using the `figure` include like so:
@ -86,11 +86,11 @@ 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. |
| **title** | Optional | Title text for image. Will display as a caption in a Magnific Popup overlay when linked to a larger image with `url`. | | **title** | Optional | Title text for image. Will display as a caption in a Magnific Popup overlay when linked to a larger image with `url`. |
```yaml ```yaml
@ -109,13 +109,14 @@ gallery:
title: "Image 3 title caption" title: "Image 3 title caption"
``` ```
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` |
| **class** | Optional | Use to add a `class` attribute to the surrounding `<figure>` element for additional styling needs. | | | **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`. |
| **caption** | Optional | Gallery caption description. Markdown is allowed. | | | **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. | |
```liquid ```liquid
{% raw %}{% include gallery caption="This is a sample gallery with **Markdown support**." %}{% endraw %} {% raw %}{% include gallery caption="This is a sample gallery with **Markdown support**." %}{% endraw %}
@ -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
@ -134,16 +135,16 @@ 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. | |
| **url** | Optional | URL that the button should link to. | | | **url** | Optional | URL that the button should link to. | |
| **btn_label** | Optional | Button text label. | `more_label` in UI Text data file. | | **btn_label** | Optional | Button text label. | `more_label` in UI Text data file. |
| **btn_class** | Optional | Button style. See [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}) for options. | `btn` | | **btn_class** | Optional | Button style. See [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}) for options. | `btn` |
```yaml ```yaml
feature_row: feature_row:
@ -165,10 +166,10 @@ 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. | |
```liquid ```liquid
{% raw %}{% include feature_row %}{% endraw %} {% raw %}{% include feature_row %}{% endraw %}
@ -176,21 +177,21 @@ 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
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` |
### YouTube ### YouTube
To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use: To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use:
```liquid ```liquid
{% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %} {% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}
@ -209,7 +210,7 @@ header:
### Vimeo ### Vimeo
To embed the following Vimeo video at url `https://vimeo.com/212731897` into a post or page's main content you'd use: To embed the following Vimeo video at url `https://vimeo.com/212731897` into a post or page's main content you'd use:
```liquid ```liquid
{% raw %}{% include video id="212731897" provider="vimeo" %}{% endraw %} {% raw %}{% include video id="212731897" provider="vimeo" %}{% endraw %}
@ -236,21 +237,21 @@ 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. |
| **toc_sticky** | Optional | Stick table of contents to top of screen. | `false` | | **toc_sticky** | Optional | Stick table of contents to top of screen. | `false` |
**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`.
@ -270,10 +271,10 @@ To include a Kramdown [auto-generated table of contents](https://kramdown.gettal
**Deprecated:** `toc` helper will be removed in the next major version of the theme. It is encouraged that you migrate to the YAML Front Matter method above. **Deprecated:** `toc` helper will be removed in the next major version of the theme. It is encouraged that you migrate to the YAML Front Matter method above.
{: .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. |
**TOC example with custom title and icon** **TOC example with custom title and icon**
@ -349,6 +350,6 @@ 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

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

@ -131,4 +131,12 @@ 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." %}

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

@ -131,4 +131,12 @@ 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." %}