Rockingcool
/
paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up gallery page

Browse Source
master
Will Faught 2 years ago
parent 0eab07cd85
commit 7df1f6e91d
1 changed files with 73 additions and 124 deletions
Show Stats Download Patch File Download Diff File

197
exampleSite/content/shortcodes/gallery/index.md
Unescape Escape View File

@ -11,302 +11,251 @@ Paige provides a `paige/gallery` shortcode for displaying a list of images.
<!--more--> <!--more-->
See the images in the example site to understand how the below file patterns work. ## Align parameter
Resize the viewport as narrow and wide as you can to see the responsiveness.
## Rows layout
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="1*.jpg" /*/>}} {{</* paige/gallery align="start" */>}}
{{</* paige/image height="20rem" src="2-2.jpg" */>}}
{{</* paige/image height="10rem" src="2-3.jpg" */>}}
{{</* /paige/gallery /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="1*.jpg" />}} {{< paige/gallery align="start" >}}
{{< paige/image height="20rem" src="2-2.jpg" >}}
{{< paige/image height="10rem" src="2-3.jpg" >}}
{{< /paige/gallery >}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="2*.jpg" /*/>}} {{</* paige/gallery align="center" */>}}
{{</* paige/image height="20rem" src="2-2.jpg" */>}}
{{</* paige/image height="10rem" src="2-3.jpg" */>}}
{{</* /paige/gallery /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="2*.jpg" />}} {{< paige/gallery align="center" >}}
{{< paige/image height="20rem" src="2-2.jpg" >}}
{{< paige/image height="10rem" src="2-3.jpg" >}}
{{< /paige/gallery >}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="3*.jpg" /*/>}} {{</* paige/gallery align="end" */>}}
{{</* paige/image height="20rem" src="2-2.jpg" */>}}
{{</* paige/image height="10rem" src="2-3.jpg" */>}}
{{</* /paige/gallery /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="3*.jpg" />}} {{< paige/gallery align="end" >}}
{{< paige/image height="20rem" src="2-2.jpg" >}}
{{< paige/image height="10rem" src="2-3.jpg" >}}
{{< /paige/gallery >}}
--- ## Height parameter
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="4*.jpg" /*/>}} {{</* paige/gallery height="10rem" images="2-*.jpg" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="4*.jpg" />}} {{< paige/gallery height="10rem" images="2-*.jpg" />}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="5*.jpg" /*/>}} {{</* paige/gallery height="20rem" images="2-*.jpg" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="5*.jpg" />}} {{< paige/gallery height="20rem" images="2-*.jpg" />}}
--- ## Images parameter
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="6*.jpg" /*/>}} {{</* paige/gallery images="2-2.jpg" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="6*.jpg" />}} {{< paige/gallery images="2-2.jpg" />}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="*.jpg" />}} {{< paige/gallery images="2-*.jpg" />}}
## Grid layout ## Justify parameter
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="1*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" justify="start" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="1*" />}} {{< paige/gallery images="2-*.jpg" justify="start" />}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="2*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" justify="center" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="2*" />}} {{< paige/gallery images="2-*.jpg" justify="center" />}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="3*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" justify="end" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="3*" />}} {{< paige/gallery images="2-*.jpg" justify="end" />}}
--- ## Maxheight parameter
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="4*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" maxheight="10rem" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="4*" />}} {{< paige/gallery images="2-*.jpg" maxheight="10rem" />}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="5*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" maxheight="20rem" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="5*" />}} {{< paige/gallery images="2-*.jpg" maxheight="20rem" />}}
--- ## Maxwidth parameter
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="6*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" maxwidth="10rem" /*/>}}
``` ```
Result: Result:
{{< paige/gallery images="6*" />}} {{< paige/gallery images="2-*.jpg" maxwidth="10rem" />}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery images="*.jpg" /*/>}} {{</* paige/gallery images="2-*.jpg" maxwidth="20rem" /*/>}}
```
Result:
{{< paige/gallery images="*.jpg" />}}
## Customization
Code:
```go-text-template
{{</* paige/gallery */>}}
{{</* paige/image src="*-1*.jpg" /*/>}}
{{</* /paige/gallery */>}}
``` ```
Result: Result:
{{< paige/gallery >}} {{< paige/gallery images="2-*.jpg" maxwidth="20rem" />}}
{{< paige/image src="*-1*.jpg" >}}
{{< /paige/gallery >}}
--- ## Method and options parameters
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery */>}} {{</* paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" /*/>}}
{{</* paige/image src="*-2*.jpg" /*/>}}
{{</* paige/image src="*-3*.jpg" /*/>}}
{{</* /paige/gallery */>}}
``` ```
Result: Result:
{{< paige/gallery >}} {{< paige/gallery images="2-*.jpg" method="fill" options="550x550 r90 webp picture Lanczos" />}}
{{< paige/image src="*-2*.jpg" >}}
{{< paige/image src="*-3*.jpg" >}}
{{< /paige/gallery >}}
--- ## Type
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery */>}} {{</* paige/gallery images="*.jpg" type="grid" /*/>}}
{{</* paige/image src="*-4*.jpg" /*/>}}
{{</* paige/image src="*-5*.jpg" /*/>}}
{{</* paige/image src="*-6*.jpg" /*/>}}
{{</* /paige/gallery */>}}
``` ```
Result: Result:
{{< paige/gallery >}} {{< paige/gallery images="*.jpg" type="grid" />}}
{{< paige/image src="*-4*.jpg" >}}
{{< paige/image src="*-5*.jpg" >}}
{{< paige/image src="*-6*.jpg" >}}
{{< /paige/gallery >}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery */>}} {{</* paige/gallery images="*.jpg" maxheight="10rem" type="rows" /*/>}}
{{</* paige/image src="*-7*.jpg" /*/>}}
{{</* paige/image src="*-8*.jpg" /*/>}}
{{</* paige/image src="*-9*.jpg" /*/>}}
{{</* paige/image src="*-10.jpg*" /*/>}}
{{</* /paige/gallery */>}}
``` ```
Result: Result:
{{< paige/gallery >}} {{< paige/gallery images="*.jpg" maxheight="10rem" type="rows" />}}
{{< paige/image src="*-7*.jpg" >}}
{{< paige/image src="*-8*.jpg" >}}
{{< paige/image src="*-9*.jpg" >}}
{{< paige/image src="*-10.jpg*" >}}
{{< /paige/gallery >}}
--- ## Width parameter
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery */>}} {{</* paige/gallery images="2-*.jpg" width="10rem" /*/>}}
{{</* paige/image src="*-11*.jpg" /*/>}}
{{</* paige/image src="*-12*.jpg" /*/>}}
{{</* paige/image src="*-13*.jpg" /*/>}}
{{</* paige/image src="*-14*.jpg" /*/>}}
{{</* paige/image src="*-15*.jpg" /*/>}}
{{</* /paige/gallery */>}}
``` ```
Result: Result:
{{< paige/gallery >}} {{< paige/gallery images="2-*.jpg" width="10rem" />}}
{{< paige/image src="*-11*.jpg" >}}
{{< paige/image src="*-12*.jpg" >}}
{{< paige/image src="*-13*.jpg" >}}
{{< paige/image src="*-14*.jpg" >}}
{{< paige/image src="*-15*.jpg" >}}
{{< /paige/gallery >}}
--- ---
Code: Code:
```go-text-template ```go-text-template
{{</* paige/gallery */>}} {{</* paige/gallery images="2-*.jpg" width="20rem" /*/>}}
{{</* paige/image src="*-16*.jpg" /*/>}}
{{</* paige/image src="*-17*.jpg" /*/>}}
{{</* paige/image src="*-18*.jpg" /*/>}}
{{</* paige/image src="*-19*.jpg" /*/>}}
{{</* paige/image src="*-20*.jpg" /*/>}}
{{</* paige/image src="*-21*.jpg" /*/>}}
{{</* /paige/gallery */>}}
``` ```
Result: Result:
{{< paige/gallery >}} {{< paige/gallery images="2-*.jpg" width="20rem" />}}
{{< paige/image src="*-16*.jpg" >}}
{{< paige/image src="*-17*.jpg" >}}
{{< paige/image src="*-18*.jpg" >}}
{{< paige/image src="*-19*.jpg" >}}
{{< paige/image src="*-20*.jpg" >}}
{{< paige/image src="*-21*.jpg" >}}
{{< /paige/gallery >}}
## Figure ## Figure
@ -315,16 +264,16 @@ Code:
```go-text-template ```go-text-template
{{</* paige/gallery */>}} {{</* paige/gallery */>}}
{{</* paige/figure caption="Image 1" /*/>}} {{</* paige/figure caption="Image 1" /*/>}}
{{</* paige/image src="*-1*.jpg" /*/>}} {{</* paige/image src="1-1.jpg" /*/>}}
{{</* /paige/figure */>}} {{</* /paige/figure */>}}
{{</* paige/figure caption="Image 2" /*/>}} {{</* paige/figure caption="Image 2" /*/>}}
{{</* paige/image src="*-2*.jpg" /*/>}} {{</* paige/image src="2-2.jpg" /*/>}}
{{</* /paige/figure */>}} {{</* /paige/figure */>}}
{{</* paige/figure caption="Image 3" /*/>}} {{</* paige/figure caption="Image 3" /*/>}}
{{</* paige/image src="*-3*.jpg" /*/>}} {{</* paige/image src="2-3.jpg" /*/>}}
{{</* /paige/figure */>}} {{</* /paige/figure */>}}
{{</* paige/figure caption="Image 4" /*/>}} {{</* paige/figure caption="Image 4" /*/>}}
{{</* paige/image src="*-4*.jpg" /*/>}} {{</* paige/image src="3-4.jpg" /*/>}}
{{</* /paige/figure */>}} {{</* /paige/figure */>}}
{{</* /paige/gallery */>}} {{</* /paige/gallery */>}}
``` ```
@ -333,16 +282,16 @@ Result:
{{< paige/gallery >}} {{< paige/gallery >}}
{{< paige/figure caption="Image 1" >}} {{< paige/figure caption="Image 1" >}}
{{< paige/image src="*-1*.jpg" >}} {{< paige/image src="1-1.jpg" >}}
{{< /paige/figure >}} {{< /paige/figure >}}
{{< paige/figure caption="Image 2" >}} {{< paige/figure caption="Image 2" >}}
{{< paige/image src="*-2*.jpg" >}} {{< paige/image src="2-2.jpg" >}}
{{< /paige/figure >}} {{< /paige/figure >}}
{{< paige/figure caption="Image 3" >}} {{< paige/figure caption="Image 3" >}}
{{< paige/image src="*-3*.jpg" >}} {{< paige/image src="2-3.jpg" >}}
{{< /paige/figure >}} {{< /paige/figure >}}
{{< paige/figure caption="Image 4" >}} {{< paige/figure caption="Image 4" >}}
{{< paige/image src="*-4*.jpg" >}} {{< paige/image src="3-4.jpg" >}}
{{< /paige/figure >}} {{< /paige/figure >}}
{{< /paige/gallery >}} {{< /paige/gallery >}}

Write Preview
Loading…
Cancel
Save