-
-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34 changed files
with
1,045 additions
and
244 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| --- | ||
| glightbox.auto_caption: true | ||
| --- | ||
|
|
||
| # Caption | ||
|
|
||
| Built-in GLightbox caption with title and description can be used by adding attributes: ```data-title```, ```data-description``` through markdown_extensions ```attr_list```. Enable ```attr_list``` via ```mkdocs.yml```: | ||
|
|
||
| ```yaml | ||
| markdown_extensions: | ||
| - attr_list | ||
| ``` | ||
| Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/). | ||
|
|
||
| !!! warning "Warning" | ||
|
|
||
| When the title or the description has been set, the plugin setting of lightbox image ```height``` and ```width``` will be overridden as ```100vh```. | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Title and description attributes | ||
|
|
||
| ```markdown title="Setting title and description with attributes" | ||
| { data-title="Madeira, Portugal." data-description="Madeira, an autonomous region of Portugal, is an archipelago comprising 4 islands off the northwest coast of Africa. - Google" } | ||
| ``` | ||
|
|
||
| <div class="result" markdown> | ||
| <figure markdown> | ||
|
|
||
| { width="500px" data-title="Madeira, Portugal." data-description="Madeira, an autonomous region of Portugal, is an archipelago comprising 4 islands off the northwest coast of Africa. - Google" } | ||
|
|
||
| <figcaption>Madeira, Portugal. Credit: Blueswen</figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
| ### Caption position | ||
|
|
||
| Caption position can be changed with plugin option ```caption_position``` globally or individually by attribute ```data-caption-position```. | ||
|
|
||
| ```markdown title="Setting position with data-caption-position" | ||
| { data-title="Cabo da Roca, Portugal. Credit: Blueswen" data-description=".custom-desc1" data-caption-position="right"} | ||
| ``` | ||
|
|
||
| <div class="result" markdown> | ||
| <figure markdown> | ||
| { width="400px" data-title="Cabo da Roca, Portugal. Credit: Blueswen" data-description="Monument announcing Cabo da Roca as the westernmost point of continental Europe" data-caption-position="right"} | ||
| <figcaption>Cabo da Roca, Portugal. Credit: Blueswen</figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
| ### Advanced description | ||
|
|
||
| For a longer description, you can add a ```div``` with class ```glightbox-desc``` and a custom class name which be assigned in ```data-description``` with a prefix ```.```. The content in div will be used as the description. | ||
|
|
||
| ```html title="Advanced Description" | ||
| { width="500px" data-title="Cabo da Roca, Portugal. Credit: Blueswen" data-description=".custom-desc1" } | ||
| <div class="glightbox-desc custom-desc1"> | ||
| <p>Saint George's Castle is a historic castle in the Portuguese capital of Lisbon, located in the freguesia of Santa Maria Maior.</p> | ||
| <p>Human occupation of the castle hill dates to at least the 8th century BC while the first fortifications built date from the 1st century BC.</p> | ||
| </div> | ||
| ``` | ||
|
|
||
| <div class="result" markdown> | ||
| <figure markdown> | ||
| { width="500px" data-title="Cabo da Roca, Portugal. Credit: Blueswen" data-description=".custom-desc1" } | ||
| <figcaption>Castelo de São Jorge, Lisbon, Portugal. Credit: Blueswen</figcaption> | ||
| </figure> | ||
|
|
||
| <div class="glightbox-desc custom-desc1"> | ||
| <p>Saint George's Castle is a historic castle in the Portuguese capital of Lisbon, located in the freguesia of Santa Maria Maior.</p> | ||
| <p>Human occupation of the castle hill dates to at least the 8th century BC while the first fortifications built date from the 1st century BC.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| ### Image alt as the caption | ||
|
|
||
| Since adding a title attribute to each image may be frustrating, we provide an ```auto_caption``` option to use the image alt as the default title. | ||
|
|
||
| - Globally: Enable the ```auto_caption``` plugin option in ```mkdocs.yml``` to affect whole mkdocs | ||
|
|
||
| ```yaml | ||
| plugins: | ||
| - glightbox: | ||
| auto_caption: true | ||
| ``` | ||
|
|
||
| - Locally: Add page metadata ```glightbox.auto_caption: true``` through markdown_extensions ```meta``` setting page meta on a specific page. Enable ```meta``` via ```mkdocs.yml```: | ||
|
|
||
| ```yaml | ||
| markdown_extensions: | ||
| - meta | ||
| ``` | ||
|
|
||
| Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/). | ||
|
|
||
| ```markdown title="Using image alt as caption title with page meta" | ||
| --- | ||
| glightbox.auto_caption: true | ||
| --- | ||
|  | ||
| ``` | ||
|
|
||
| <div class="result" markdown> | ||
| <figure markdown> | ||
|
|
||
| { width="500px"} | ||
|
|
||
| <figcaption>Yosemite, USA. Credit: Blueswen</figcaption> | ||
| </figure> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,20 @@ | ||
| <figure markdown> | ||
|
|
||
|  | ||
| Jioufen, Taiwan. Credit: [Andy Wang](https://unsplash.com/photos/eOcOTrceCmQ) | ||
|
|
||
| <figcaption markdown>Jioufen, Taiwan. Credit: [Andy Wang](https://unsplash.com/photos/eOcOTrceCmQ)</figcaption> | ||
| </figure> | ||
|
|
||
| <figure markdown> | ||
|
|
||
|  | ||
| Hehuanshan, Taiwan. Credit: [張 峻嘉](https://unsplash.com/photos/ZFddx3rGaow) | ||
|
|
||
| <figcaption markdown>Hehuanshan, Taiwan. Credit: [張 峻嘉](https://unsplash.com/photos/ZFddx3rGaow)</figcaption> | ||
| </figure> | ||
|
|
||
| <figure markdown> | ||
|
|
||
|  | ||
| Alishan, Taiwan. Credit: [Alexa Soh](https://unsplash.com/photos/nDVqwAH6DDA) | ||
|
|
||
| <figcaption markdown>Alishan, Taiwan. Credit: [Alexa Soh](https://unsplash.com/photos/nDVqwAH6DDA)</figcaption> | ||
| </figure> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,21 @@ | ||
|
|
||
| <figure markdown> | ||
|
|
||
|  | ||
| Penghu, Taiwan. Credit: [Maggie Hung](https://unsplash.com/photos/hcMd-8aLEdI) | ||
|
|
||
| <figcaption markdown>Penghu, Taiwan. Credit: [Maggie Hung](https://unsplash.com/photos/hcMd-8aLEdI)</figcaption> | ||
| </figure> | ||
|
|
||
| <figure markdown> | ||
|
|
||
|  | ||
| Ch'ing-shui Cliff in Hualian, Taiwan. Credit: [Bells Mayer](https://unsplash.com/photos/ROWXoqmqyjk) | ||
|
|
||
| <figcaption markdown>Ch'ing-shui Cliff in Hualian, Taiwan. Credit: [Bells Mayer](https://unsplash.com/photos/ROWXoqmqyjk)</figcaption> | ||
| </figure> | ||
|
|
||
| <figure markdown> | ||
|
|
||
|  | ||
| Chi-shing-tan, Taiwan. Credit: [Sam Chang](https://unsplash.com/photos/qeETHbnFP3k) | ||
|
|
||
| <figcaption markdown>Chi-shing-tan, Taiwan. Credit: [Sam Chang](https://unsplash.com/photos/qeETHbnFP3k)</figcaption> | ||
| </figure> |
Oops, something went wrong.