mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
theme: option to align images #327
This commit is contained in:
Sören Weber
parent
95420afdd2
commit
cf47a1c049
3 changed files with 69 additions and 32 deletions
|
|
@ -18,6 +18,8 @@ This document shows you what's new in the latest release. For a detailed list of
|
|||
|
||||
- **Change**: In the effort to comply with WCAG standards, the implementation of the collapsible menu was changed. Although the functionality of the new implementation works with old browsers (Internet Explorer 11), the display of the expander icons does not and is limited to modern browsers.
|
||||
|
||||
- **New**: [Image formatting]({{% relref "cont/markdown#add-css-classes" %}}) has two new classes to align images to the `left` or `right`. Additionally, the already existing `inline` option is now documented.
|
||||
|
||||
- **New**: Printing for the [`swagger` shortcode]({{% relref "shortcodes/swagger" %}}) was optimized to expand sections that are usually closed in interactive mode. This requires [print support]({{%relref "basics/configuration#activate-print-support" %}}) to be configured.
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -601,40 +601,40 @@ Content for chapter one.
|
|||
## Chapter 3 <a id="chapter-3"></a>
|
||||
Content for chapter one.
|
||||
```
|
||||
**NOTE** that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
|
||||
|
||||
{{% notice note %}}
|
||||
Note that specific placement of the anchor tag seems to be arbitrary. They are placed inline here since it seems to be unobtrusive, and it works.
|
||||
{{% /notice %}}
|
||||
|
||||
## Images {#images}
|
||||
Images have a similar syntax to links but include a preceding exclamation point.
|
||||
|
||||
Images have a similar syntax to links but include a preceding exclamation mark:
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
or
|
||||
Like links, images also have a footnote style syntax, resulting in a tooltip:
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Like links, Images also have a footnote style syntax
|
||||
|
||||
### Alternative usage : note images
|
||||
Images can also be linked by reference ID to later define the URL location:
|
||||
|
||||
```markdown
|
||||
![Alt text][id]
|
||||
![La Forge][laforge]
|
||||
|
||||
[laforge]: https://octodex.github.com/images/trekkie.jpg "Geordi La Forge"
|
||||
```
|
||||
|
||||
![Alt text][id]
|
||||
![La Forge][laforge]
|
||||
|
||||
With a reference later in the document defining the URL location:
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
|
||||
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||
[laforge]: https://octodex.github.com/images/trekkie.jpg?width=20vw "Geordi La Forge"
|
||||
|
||||
### Further image formatting
|
||||
|
||||
|
|
@ -645,12 +645,10 @@ The Hugo Markdown parser supports additional non-standard functionality.
|
|||
Add HTTP parameters `width` and/or `height` to the link image to resize the image. Values are CSS values (default is `auto`).
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```markdown
|
||||
|
||||
|
|
@ -659,39 +657,67 @@ Add HTTP parameters `width` and/or `height` to the link image to resize the imag
|
|||
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### Add CSS classes
|
||||
|
||||
Add a HTTP `classes` parameter to the link image to add CSS classes. `shadow`and `border` are available but you could define other ones.
|
||||
Add a HTTP `classes` parameter to the link image to add CSS classes. Add some of the predefined values or even define your own in your CSS.
|
||||
|
||||
##### shadow
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### border
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### left
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
##### right
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
##### inline
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### Lightbox
|
||||
|
||||
Add a HTTP `featherlight` parameter to the link image to disable lightbox. By default lightbox is enabled using the featherlight.js plugin. You can disable this by defining `featherlight` to `false`.
|
||||
|
||||
```markdown
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -287,12 +287,21 @@ th {
|
|||
}
|
||||
|
||||
#body img,
|
||||
#body img.center,
|
||||
#body .video-container {
|
||||
display: block;
|
||||
margin: 1.5rem auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#body img.left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#body img.right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#body img.border,
|
||||
#body .video-container.border {
|
||||
border: 2px solid #e6e6e6;
|
||||
|
|
|
|||
Loading…
Reference in a new issue