thomasjsn/hugo-theme-hello-friend
1
0
Fork 0
mirror of https://github.com/thomasjsn/hugo-theme-hello-friend.git synced 2024-11-14 20:35:07 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #132 from aormsby/PR-imgproc-pos

Browse Source 
Add position param to imgproc shortcode
This commit is contained in:
Radek Kozieł 2020-05-27 00:41:00 +02:00 committed by GitHub
commit 4083e16784
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -10,6 +10,8 @@ This theme is pretty basic and covers all of the essentials. All you have to do
--- ---
- [Hello Friend](#hello-friend)
- [DEMO - https://hugo-hello-friend.now.sh/](#demo---httpshugo-hello-friendnowsh)
- [Features](#features) - [Features](#features)
- [Built-in shortcodes](#built-in-shortcodes) - [Built-in shortcodes](#built-in-shortcodes)
- [Code highlighting](#code-highlighting) - [Code highlighting](#code-highlighting)
@ -17,14 +19,14 @@ This theme is pretty basic and covers all of the essentials. All you have to do
- [How to configure](#how-to-configure) - [How to configure](#how-to-configure)
- [How to add a cover image to your posts](#how-to-add-a-cover-image-to-your-posts) - [How to add a cover image to your posts](#how-to-add-a-cover-image-to-your-posts)
- [How to display the Last Modified Date in your posts](#how-to-display-the-last-modified-date-in-your-posts) - [How to display the Last Modified Date in your posts](#how-to-display-the-last-modified-date-in-your-posts)
- [How to hide "Read more" button](#how-to-hide-read-more-button) - [How to hide "Read more" button](#how-to-hide-%22read-more%22-button)
- [Add-ons](#add-ons) - [Add-ons](#add-ons)
- [How to run your site](#how-to-run-your-site) - [How to run your site](#how-to-run-your-site)
- [How to edit the theme](#how-to-edit-the-theme) - [How to edit the theme](#how-to-edit-the-theme)
- [How to contribute](#how-to-contribute) - [How to contribute](#how-to-contribute)
- [Hello Friend theme user?](#hello-friend-theme-user) - [`Hello Friend` theme user?](#hello-friend-theme-user)
- [Sponsoring](#sponsoring) - [Sponsoring](#sponsoring)
- [Licence](#licence) - [License](#license)
## Features ## Features
@ -39,7 +41,9 @@ This theme is pretty basic and covers all of the essentials. All you have to do
- eg: `{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}` - eg: `{{< image src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" >}}`
- **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`** - **`figure`** (same as `image`, plus few optional props: **`caption`**, **`captionPosition`** (left | **center** is default | right), **`captionStyle`**
- eg: `{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}` - eg: `{{< figure src="/img/hello.png" alt="Hello Friend" position="center" style="border-radius: 8px;" caption="Hello Friend!" captionPosition="right" captionStyle="color: red;" >}}`
- **`imgproc`** Hugo shortcode for image processing. More info at [https://gohugo.io/content-management/image-processing/](https://gohugo.io/content-management/image-processing/) - **`imgproc`** Hugo shortcode for image processing, plus additional **`position`** param [ left | center | right ] (optional).
- eg: `{{< imgproc "img/hello.png" Resize "250x" center />}}`
- More detailed info on processing commands at [https://gohugo.io/content-management/image-processing/](https://gohugo.io/content-management/image-processing/)
#### Code highlighting #### Code highlighting

3
layouts/shortcodes/imgproc.html
View File

@ -1,6 +1,7 @@
{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }} {{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
{{ $command := .Get 1 }} {{ $command := .Get 1 }}
{{ $options := .Get 2 }} {{ $options := .Get 2 }}
{{ $position := .Get 3}}
{{ if eq $command "Fit"}} {{ if eq $command "Fit"}}
{{ .Scratch.Set "image" ($original.Fit $options) }} {{ .Scratch.Set "image" ($original.Fit $options) }}
@ -14,7 +15,7 @@
{{ $image := .Scratch.Get "image" }} {{ $image := .Scratch.Get "image" }}
<figure> <figure class="{{ with $position }}{{ . }}{{ else -}} left {{- end }}" >
<img style="max-width: 100%; width: auto; height: auto; border-radius: 8px;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}"> <img style="max-width: 100%; width: auto; height: auto; border-radius: 8px;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
{{ with .Inner }} {{ with .Inner }}
<figcaption> <figcaption>