From e5371e942e1caeee3e9e3add48be6037b97bfb6e Mon Sep 17 00:00:00 2001 From: Will Faught Date: Thu, 16 Mar 2023 23:15:46 -0700 Subject: [PATCH] Size landscape pic to max container width --- exampleSite/content/_index.md | 2 +- exampleSite/content/layouts/home.md | 4 +-- exampleSite/content/shortcodes/figure.md | 16 +++++----- exampleSite/content/shortcodes/image.md | 40 ++++++++++++------------ 4 files changed, 31 insertions(+), 31 deletions(-) diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 9b8a6d9a..0f4f17e8 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -8,7 +8,7 @@ paige: image: alt: "Landscape" stretch: true - url: "https://images.unsplash.com/photo-1490604001847-b712b0c2f967" + url: "https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" social: github: class: "bi bi-github" diff --git a/exampleSite/content/layouts/home.md b/exampleSite/content/layouts/home.md index 9e165ed2..9a9cb69d 100644 --- a/exampleSite/content/layouts/home.md +++ b/exampleSite/content/layouts/home.md @@ -9,7 +9,7 @@ paige: greeting: "This is the greeting" image: stretch: false - url: "https://images.unsplash.com/photo-1490604001847-b712b0c2f967" + url: "https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" social: discord: class: "bi bi-discord" @@ -114,7 +114,7 @@ paige: greeting: "This is the greeting" image: stretch: false - url: "https://images.unsplash.com/photo-1490604001847-b712b0c2f967" + url: "https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" social: discord: class: "bi bi-discord" diff --git a/exampleSite/content/shortcodes/figure.md b/exampleSite/content/shortcodes/figure.md index 085630c3..4a3a673c 100644 --- a/exampleSite/content/shortcodes/figure.md +++ b/exampleSite/content/shortcodes/figure.md @@ -123,7 +123,7 @@ Code: ```go-text-template {{}} -{{}} +{{}} {{}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Est lorem ipsum dolor sit amet. Consequat mauris nunc congue nisi. Sodales ut etiam sit amet nisl purus in mollis nunc. Vehicula ipsum a arcu cursus vitae congue. Ultrices eros in cursus turpis massa tincidunt dui. Aliquet bibendum enim facilisis gravida. Eu turpis egestas pretium aenean pharetra magna ac placerat. Sed turpis tincidunt id aliquet risus feugiat. Gravida neque convallis a cras. Cras ornare arcu dui vivamus arcu felis bibendum. Vulputate dignissim suspendisse in est. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Nisl nisi scelerisque eu ultrices vitae auctor eu. Tortor pretium viverra suspendisse potenti nullam ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Facilisis gravida neque convallis a cras semper auctor neque vitae. In dictum non consectetur a erat nam at lectus urna. Eu lobortis elementum nibh tellus. Interdum varius sit amet mattis vulputate. Quisque id diam vel quam elementum pulvinar etiam non quam. Tellus mauris a diam maecenas sed enim ut. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. @@ -132,7 +132,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Result: {{< paige/figure float="start" >}} -{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" width="20rem" >}} +{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="20rem" >}} {{< /paige/figure >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Est lorem ipsum dolor sit amet. Consequat mauris nunc congue nisi. Sodales ut etiam sit amet nisl purus in mollis nunc. Vehicula ipsum a arcu cursus vitae congue. Ultrices eros in cursus turpis massa tincidunt dui. Aliquet bibendum enim facilisis gravida. Eu turpis egestas pretium aenean pharetra magna ac placerat. Sed turpis tincidunt id aliquet risus feugiat. Gravida neque convallis a cras. Cras ornare arcu dui vivamus arcu felis bibendum. Vulputate dignissim suspendisse in est. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Nisl nisi scelerisque eu ultrices vitae auctor eu. Tortor pretium viverra suspendisse potenti nullam ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Facilisis gravida neque convallis a cras semper auctor neque vitae. In dictum non consectetur a erat nam at lectus urna. Eu lobortis elementum nibh tellus. Interdum varius sit amet mattis vulputate. Quisque id diam vel quam elementum pulvinar etiam non quam. Tellus mauris a diam maecenas sed enim ut. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. @@ -145,7 +145,7 @@ Code: ```go-text-template {{}} -{{}} +{{}} {{}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Est lorem ipsum dolor sit amet. Consequat mauris nunc congue nisi. Sodales ut etiam sit amet nisl purus in mollis nunc. Vehicula ipsum a arcu cursus vitae congue. Ultrices eros in cursus turpis massa tincidunt dui. Aliquet bibendum enim facilisis gravida. Eu turpis egestas pretium aenean pharetra magna ac placerat. Sed turpis tincidunt id aliquet risus feugiat. Gravida neque convallis a cras. Cras ornare arcu dui vivamus arcu felis bibendum. Vulputate dignissim suspendisse in est. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Nisl nisi scelerisque eu ultrices vitae auctor eu. Tortor pretium viverra suspendisse potenti nullam ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Facilisis gravida neque convallis a cras semper auctor neque vitae. In dictum non consectetur a erat nam at lectus urna. Eu lobortis elementum nibh tellus. Interdum varius sit amet mattis vulputate. Quisque id diam vel quam elementum pulvinar etiam non quam. Tellus mauris a diam maecenas sed enim ut. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. @@ -154,7 +154,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Result: {{< paige/figure float="end" >}} -{{}} +{{}} {{< /paige/figure >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Est lorem ipsum dolor sit amet. Consequat mauris nunc congue nisi. Sodales ut etiam sit amet nisl purus in mollis nunc. Vehicula ipsum a arcu cursus vitae congue. Ultrices eros in cursus turpis massa tincidunt dui. Aliquet bibendum enim facilisis gravida. Eu turpis egestas pretium aenean pharetra magna ac placerat. Sed turpis tincidunt id aliquet risus feugiat. Gravida neque convallis a cras. Cras ornare arcu dui vivamus arcu felis bibendum. Vulputate dignissim suspendisse in est. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Nisl nisi scelerisque eu ultrices vitae auctor eu. Tortor pretium viverra suspendisse potenti nullam ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Facilisis gravida neque convallis a cras semper auctor neque vitae. In dictum non consectetur a erat nam at lectus urna. Eu lobortis elementum nibh tellus. Interdum varius sit amet mattis vulputate. Quisque id diam vel quam elementum pulvinar etiam non quam. Tellus mauris a diam maecenas sed enim ut. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. @@ -167,11 +167,11 @@ Code: ```go-text-template {{}} -{{}} +{{}} {{}} {{}} -{{}} +{{}} {{}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Est lorem ipsum dolor sit amet. Consequat mauris nunc congue nisi. Sodales ut etiam sit amet nisl purus in mollis nunc. Vehicula ipsum a arcu cursus vitae congue. Ultrices eros in cursus turpis massa tincidunt dui. Aliquet bibendum enim facilisis gravida. Eu turpis egestas pretium aenean pharetra magna ac placerat. Sed turpis tincidunt id aliquet risus feugiat. Gravida neque convallis a cras. Cras ornare arcu dui vivamus arcu felis bibendum. Vulputate dignissim suspendisse in est. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Nisl nisi scelerisque eu ultrices vitae auctor eu. Tortor pretium viverra suspendisse potenti nullam ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Facilisis gravida neque convallis a cras semper auctor neque vitae. In dictum non consectetur a erat nam at lectus urna. Eu lobortis elementum nibh tellus. Interdum varius sit amet mattis vulputate. Quisque id diam vel quam elementum pulvinar etiam non quam. Tellus mauris a diam maecenas sed enim ut. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. @@ -180,11 +180,11 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i Result: {{< paige/figure float="start" >}} -{{}} +{{}} {{< /paige/figure >}} {{< paige/figure float="end" >}} -{{}} +{{}} {{< /paige/figure >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Est lorem ipsum dolor sit amet. Consequat mauris nunc congue nisi. Sodales ut etiam sit amet nisl purus in mollis nunc. Vehicula ipsum a arcu cursus vitae congue. Ultrices eros in cursus turpis massa tincidunt dui. Aliquet bibendum enim facilisis gravida. Eu turpis egestas pretium aenean pharetra magna ac placerat. Sed turpis tincidunt id aliquet risus feugiat. Gravida neque convallis a cras. Cras ornare arcu dui vivamus arcu felis bibendum. Vulputate dignissim suspendisse in est. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Placerat orci nulla pellentesque dignissim enim sit amet venenatis urna. Nisl nisi scelerisque eu ultrices vitae auctor eu. Tortor pretium viverra suspendisse potenti nullam ac. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis. Facilisis gravida neque convallis a cras semper auctor neque vitae. In dictum non consectetur a erat nam at lectus urna. Eu lobortis elementum nibh tellus. Interdum varius sit amet mattis vulputate. Quisque id diam vel quam elementum pulvinar etiam non quam. Tellus mauris a diam maecenas sed enim ut. Maecenas accumsan lacus vel facilisis volutpat est velit egestas dui. diff --git a/exampleSite/content/shortcodes/image.md b/exampleSite/content/shortcodes/image.md index 23fb0202..117b5261 100644 --- a/exampleSite/content/shortcodes/image.md +++ b/exampleSite/content/shortcodes/image.md @@ -16,108 +16,108 @@ Paige provides a `paige/image` shortcode for displaying an image. Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image alt="Landscape" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Height parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image height="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Link parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image link="https://github.com/willfaught/paige" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Maxheight parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image maxheight="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Maxwidth parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image maxwidth="10rem" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Method and options parameters Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image link="https://github.com/willfaught/paige" method="resize" options="550x webp picture Lanczos" src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Src parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} ## Title parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" title="Landscape" >}} +{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" title="Landscape" >}} ## Width parameter Code: ```go-text-template -{{}} +{{}} ``` Result: -{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" width="50%" >}} +{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" width="50%" >}} ## Figure @@ -125,12 +125,12 @@ Code: ```go-text-template {{}} -{{}} +{{}} {{}} ``` Result: {{< paige/figure caption="Landscape" >}} -{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967" >}} +{{< paige/image src="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296" >}} {{< /paige/figure >}}