Add support to gallery helper for defining column layout
e.g. `{% include gallery id="gallery" layout="half" caption="2 column gallery caption" %}
Fixes #1821
This commit is contained in:
Michael Rose
parent
d082dc2a39
commit
833ab3933d
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
{% 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 }}">
|
||||
|
|
|
|||
|
|
@ -51,14 +51,14 @@ 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 |
|
||||
| ---- | -------- | ----------- |
|
||||
| ----------------- | ------------ | ---------------------------------------------------------------------------------------------------- |
|
||||
| **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. |
|
||||
|
|
@ -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.
|
||||
|
||||
| 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. |
|
||||
|
|
@ -112,8 +112,9 @@ gallery:
|
|||
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` |
|
||||
| **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. | |
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
||||
| 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)" | |
|
||||
| **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. | |
|
||||
|
|
@ -166,7 +167,7 @@ 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. | |
|
||||
|
||||
|
|
@ -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 %}
|
||||
|
||||
**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
|
||||
|
|
@ -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.
|
||||
|
||||
| Parameter | Required | Description |
|
||||
|---------- |--------- | ----------- |
|
||||
| ---------- | ------------ | ---------------------------------------------------------- |
|
||||
| `id` | **Required** | ID of the video |
|
||||
| `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.
|
||||
|
||||
| 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. |
|
||||
|
|
@ -246,11 +247,11 @@ Add `toc: true` to the YAML Front Matter of any post or page.
|
|||
**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`.
|
||||
|
|
@ -271,7 +272,7 @@ To include a Kramdown [auto-generated table of contents](https://kramdown.gettal
|
|||
{: .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. |
|
||||
|
||||
|
|
@ -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" %}
|
||||
|
||||
| Parameter | Required | Description |
|
||||
| --------- | -------- | ----------- |
|
||||
| --------- | ------------ | -------------------------------------------------------- |
|
||||
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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"`.
|
||||
|
||||
{% 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." %}
|
||||
|
|
@ -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"`.
|
||||
|
||||
{% 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." %}
|
||||
Loading…
Reference in a new issue