Skip to content

Commit

Permalink
Add support to gallery helper for defining column layout
Browse files Browse the repository at this point in the history 
e.g. `{% include gallery id="gallery" layout="half" caption="2 column gallery caption" %}

Fixes mmistakes#1821
  • Loading branch information
@mmistakes
mmistakes committed Sep 10, 2018
1 parent 7105f17 commit 19fecf4
Show file tree
Hide file tree
Showing 6 changed files with 532 additions and 503 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
## 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

* Fix sidebar navigation list toggle. [#1819](https://github.com/mmistakes/minimal-mistakes/issues/1819)
Expand Down
14 changes: 9 additions & 5 deletions _includes/gallery
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,16 @@
{% assign gallery = page.gallery %}
{% endif %}

{% if gallery.size == 2 %}
{% assign gallery_layout = 'half' %}
{% elsif gallery.size >= 3 %}
{% assign gallery_layout = 'third' %}
{% if include.layout %}
{% assign gallery_layout = include.layout %}
{% 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 %}

<figure class="{{ gallery_layout }} {{ include.class }}">
Expand Down
101 changes: 51 additions & 50 deletions docs/_docs/14-helpers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

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

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. |
| **alt** | Optional | Alternate text for image. |
| **caption** | Optional | Figure caption text. Markdown is allowed. |
| **alt** | Optional | Alternate text for image. |
| **caption** | Optional | Figure caption text. Markdown is allowed. |

Using the `figure` include like so:

Expand All @@ -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.

| Name | Required | Description |
| ---- | -------- | ----------- |
| **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. |
| **alt** | Optional | Alternate text for image. |
| Name | Required | Description |
| -------------- | ------------ | --------------------------------------------------------------------------------------------------------------------- |
| **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. |
| **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`. |

```yaml
Expand All @@ -109,13 +109,14 @@ gallery:
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 |
| ----------------- | -------- | ----------- | ------- |
| **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. | |
| **caption** | Optional | Gallery caption description. Markdown is allowed. | |
| 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` |
| **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. | |
| **caption** | Optional | Gallery caption description. Markdown is allowed. | |

```liquid
{% raw %}{% include gallery caption="This is a sample gallery with **Markdown support**." %}{% endraw %}
Expand All @@ -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**." %}

**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}

## Feature Row
Expand All @@ -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

| Name | Required | Description | Default |
| ---- | ----------- | ----------- | ------- |
| **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)" | |
| **alt** | Optional | Alternate text for image. | |
| **title** | Optional | Content block title. | |
| **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | |
| **url** | Optional | URL that the button should link to. | |
| **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` |
| Name | Required | Description | Default |
| ----------------- | ------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------- |
| **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)" |
| **alt** | Optional | Alternate text for image. | |
| **title** | Optional | Content block title. | |
| **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | |
| **url** | Optional | URL that the button should link to. | |
| **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` |

```yaml
feature_row:
Expand All @@ -165,32 +166,32 @@ feature_row:

And then drop-in the feature row include in the body where you'd like it to appear.

| 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` |
| **type** | Optional | Alignment of the featured blocks in the row. Options include: `left`, `center`, or `right` aligned. | |
| 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` |
| **type** | Optional | Alignment of the featured blocks in the row. Options include: `left`, `center`, or `right` aligned. | |

```liquid
{% raw %}{% include feature_row %}{% endraw %}
```

{% 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}

## Responsive Video Embed

Embed a video from YouTube or Vimeo that responsively sizes to fit the width of its parent.

| Parameter | Required | Description |
|---------- |--------- | ----------- |
| `id` | **Required** | ID of the video |
| Parameter | Required | Description |
| ---------- | ------------ | ---------------------------------------------------------- |
| `id` | **Required** | ID of the video |
| `provider` | **Required** | Hosting provider of the video, either `youtube` or `vimeo` |

### 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
{% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}
Expand All @@ -209,7 +210,7 @@ header:

### 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
{% raw %}{% include video id="212731897" provider="vimeo" %}{% endraw %}
Expand All @@ -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.

| Parameter | Required | Description | Default |
| --------- | -------- | ----------- | ------- |
| **toc** | Optional | Show table of contents. (boolean) | `false` |
| **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_sticky** | Optional | Stick table of contents to top of screen. | `false` |
| Parameter | Required | Description | Default |
| -------------- | -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **toc** | Optional | Show table of contents. (boolean) | `false` |
| **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_sticky** | Optional | Stick table of contents to top of screen. | `false` |

**TOC example with custom title and icon**

```yaml
---
toc: true
toc_label: "My Table of Contents"
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`.
Expand All @@ -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.
{: .notice--danger}

| Parameter | Required | Description | Default |
| --------- | -------- | ----------- | ------- |
| **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. |
| Parameter | Required | Description | Default |
| --------- | -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **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. |

**TOC example with custom title and icon**

Expand Down Expand Up @@ -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" %}

| Parameter | Required | Description |
| --------- | -------- | ----------- |
| Parameter | Required | Description |
| --------- | ------------ | -------------------------------------------------------- |
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |
Loading

0 comments on commit 19fecf4

Please sign in to comment.