diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fcabc43..d0a6f4f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Multilingual support - Right-to-left (RTL) language support +- Automatic Markdown image resizing and srcset generation - Performance and Accessibility improvements to achieve perfect Lighthouse scores - Author `headline` parameter @@ -19,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Inline Javascript moved to external files - Author images are now Hugo assets - Required Hugo version is now 0.87.0 or later +- Overhauled `figure` shortcode which now resizes images - Minor style and layout improvements ## [1.6.2] - 2022-01-07 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 57c17b01..e299ac1a 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1826,6 +1826,11 @@ body a, body button { margin-right: 0.25rem; } +.my-0 { + margin-top: 0px; + margin-bottom: 0px; +} + .mb-3 { margin-bottom: 0.75rem; } diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 65c26d04..f29c11af 100755 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -26,4 +26,4 @@ This is a demo site built entirely using Congo. It also contains a complete set Explore the [sample pages]({{< ref "samples" >}}) to get a feel for what Congo can do. If you like what you see, check out the project on [Github](https://github.com/jpanther/congo) or read the [Installation guide]({{< ref "docs/installation" >}}) to get started. -{{< figure src="mountains.jpg" width="1200" height="800" caption="Photo by [Anna Scarfiello](https://unsplash.com/@little_anne?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)." >}} +![A stylised photograph of a purple squid on a pink backdrop.](squid.jpg "Photo by [Jippe Joosten](https://unsplash.com/@jippe_joosten?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/vibrant-purple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).") diff --git a/exampleSite/content/docs/_index.md b/exampleSite/content/docs/_index.md index 7c1a3218..263f6e86 100755 --- a/exampleSite/content/docs/_index.md +++ b/exampleSite/content/docs/_index.md @@ -11,7 +11,7 @@ cascade: Simple, yet powerful. Learn how to use Congo and its features. {{< /lead >}} -{{< figure src="screenshot.png" >}} +![Screenshots of Congo on an iPhone, iPad and MacBook](screenshot.png) This section contains everything you need to know about Congo. If you're new, check out the [Installation]({{< ref "docs/installation" >}}) guide to begin or visit the [Samples]({{< ref "samples" >}}) section to see what Congo can do. diff --git a/exampleSite/content/docs/homepage-layout/index.md b/exampleSite/content/docs/homepage-layout/index.md index e6a73c6f..5108ea22 100644 --- a/exampleSite/content/docs/homepage-layout/index.md +++ b/exampleSite/content/docs/homepage-layout/index.md @@ -15,7 +15,7 @@ The layout of the homepage is controlled by the `homepage.layout` setting in the The default layout is the page layout. It's simply a normal content page that displays your Markdown content. It's great for static websites and provides a lot of flexibility. -![Profile layout](home-page.jpg) +![Screenshot of homepage layout](home-page.jpg) To enable the page layout, set `homepage.layout = "page"` in the `params.toml` configuration file. @@ -23,7 +23,7 @@ To enable the page layout, set `homepage.layout = "page"` in the `params.toml` c The profile layout is great for personal websites and blogs. It puts the author's details front and centre by providing an image and links to social profiles. -![Profile layout](home-profile.jpg) +![Screenshot of profile layout](home-profile.jpg) The author information is provided in the `config.toml` configuration file. Refer to the [Getting Started]({{< ref "getting-started" >}}) and [Site Configuration]({{< ref "configuration#site-configuration" >}}) sections for parameter details. diff --git a/exampleSite/content/mountains.jpg b/exampleSite/content/mountains.jpg deleted file mode 100644 index 493565f8..00000000 Binary files a/exampleSite/content/mountains.jpg and /dev/null differ diff --git a/exampleSite/content/squid.jpg b/exampleSite/content/squid.jpg new file mode 100644 index 00000000..67b12241 Binary files /dev/null and b/exampleSite/content/squid.jpg differ diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html new file mode 100644 index 00000000..f51d7d8c --- /dev/null +++ b/layouts/_default/_markup/render-image.html @@ -0,0 +1,19 @@ +{{ $altText := .Text }} +{{ $caption := .Title }} +{{ with $.Page.Resources.GetMatch (.Destination) }} +
+ {{ $altText }} +
{{ $caption | markdownify }}
+
+{{ else }} + {{ errorf `[CONGO] Markdown image error in "%s": Resource "%s" not found. Check the path is correct or remove the image from the content.` .Page.Path .Destination }} +{{ end }} diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html index b9476a83..5a9bbc0b 100644 --- a/layouts/shortcodes/figure.html +++ b/layouts/shortcodes/figure.html @@ -1,27 +1,23 @@ -{{ if .Get "src" }} - {{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }} - - {{- if .Get "link" -}} - - {{- end -}} - {{ with .Get - {{- if .Get "link" }}{{ end -}} - {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}} -
- {{ with (.Get "title") -}}

{{ . }}

{{- end -}} - {{- if or (.Get "caption") (.Get "attr") -}}

- {{- .Get "caption" | markdownify -}} - {{- with .Get "attrlink" }}{{- end -}} - {{- .Get "attr" | markdownify -}} - {{- if .Get "attrlink" }}{{ end }}

- {{- end }} -
- {{- end }} +{{ $altText := .Get "alt" }} +{{ $caption := .Get "caption" }} +{{ $href := .Get "href" }} +{{ $class := .Get "class" }} +{{ with $.Page.Resources.GetMatch (.Get "src") }} +
+ {{ with $href }}{{ end }} + {{ $altText }} + {{ if $href }}{{ end }} + {{ with $caption }}
{{ . | markdownify }}
{{ end }}
+{{ else }} + {{ errorf `[CONGO] Shortcode "figure" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (.Get "src") }} {{ end }} diff --git a/layouts/shortcodes/screenshot.html b/layouts/shortcodes/screenshot.html index 4d701bdf..39640ac3 100644 --- a/layouts/shortcodes/screenshot.html +++ b/layouts/shortcodes/screenshot.html @@ -1,35 +1,22 @@ {{ if .Get "src" }} {{ $image := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }} - {{- if .Get "link" -}} - + {{- if .Get "href" -}} + + {{- end -}} + {{ with .Get - {{- if .Get "link" }}{{ end -}} - {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}} -
- {{ with (.Get "title") -}} -

{{ . }}

- {{- end -}} - {{- if or (.Get "caption") (.Get "attr") -}}

- {{- .Get "caption" | markdownify -}} - {{- with .Get "attrlink" }} - - {{- end -}} - {{- .Get "attr" | markdownify -}} - {{- if .Get "attrlink" }}{{ end }}

- {{- end }} -
- {{- end }} + width="100%" + height="auto" + style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;" + /> + {{- if .Get "href" }}{{ end -}} + {{- if .Get "caption" -}} +
+ {{- .Get "caption" | markdownify -}} +
+ {{- end }} {{ end }} - - -