diff options
| author | Bennet Blischke <bennet.blischke@haw-hamburg.de> | 2019-05-01 18:51:32 +0300 |
|---|---|---|
| committer | Bennet Blischke <bennet.blischke@haw-hamburg.de> | 2019-05-01 18:51:32 +0300 |
| commit | 571b8f2b2ddc5319c5bb7de55397d12d4422c47a (patch) | |
| tree | 135fc99c546e4717c700dde0509f869525570217 | |
| parent | 4dfb51fbcaef178d132697aa16b6ee545891ed80 (diff) | |
feature: Adding image shortcut parameter to round the corners
| -rw-r--r-- | README.md | 4 | ||||
| -rw-r--r-- | exampleSite/content/posts/2017/images.md | 13 | ||||
| -rw-r--r-- | layouts/shortcodes/image.html | 5 |
3 files changed, 22 insertions, 0 deletions
@@ -155,6 +155,10 @@ Lightbox: `{{< image src="media/image-1.jpg" lightbox="true" >}}` +Rounded corners: + +`{{< image src="media/image-1.jpg" round="50" >}}` + Insert image without resizing (the same image for all devices/resolutions). `{{< image src="media/image-1.jpg" resize="false" >}}` diff --git a/exampleSite/content/posts/2017/images.md b/exampleSite/content/posts/2017/images.md index 9595d5b..e6469a9 100644 --- a/exampleSite/content/posts/2017/images.md +++ b/exampleSite/content/posts/2017/images.md @@ -54,6 +54,19 @@ Result (click on the image): {{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" >}} +You can add ```round="50"``` parameter to round the corners from 0% to 50%(full circle). + +Example code: + +```html +{{</* image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" round="50" */>}} +``` + +Result (you can still click on it): + +{{< image src="media/image-1.jpg" title="Photo by Ales Krivec on Unsplash" lightbox="true" round="50" >}} + + You can add `full="true"` parameter to display image with full width. Example code: diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html index 42d51d7..71f4328 100644 --- a/layouts/shortcodes/image.html +++ b/layouts/shortcodes/image.html @@ -3,6 +3,7 @@ {{ $full := (.Get "full") | default "false" }} {{ $lightbox := (.Get "lightbox") | default "false" }} {{ $resize := (.Get "resize") | default "true" }} +{{ $round := (.Get "round") | default 0 }} {{ $fileName := index (last 1 (split $src "/")) 0 }} {{ $imageName := index (split $fileName ".") 0 }} @@ -70,6 +71,7 @@ {{ ($.Scratch.Get "resize_1920").RelPermalink }} 1920w " {{ if ($title) }}alt="{{ $title }}"{{ end }} + style="border-radius: {{ $round }}%" > </a> {{ else }} @@ -86,6 +88,7 @@ {{ ($.Scratch.Get "resize_1920").RelPermalink }} 1920w " {{ if $title }}alt="{{ $title }}"{{ end }} + style="border-radius: {{ $round }}%" > {{ end }} {{ if $title }}<figcaption>{{ $title }}</figcaption>{{ end }} @@ -106,6 +109,7 @@ data-src="{{ $original.RelPermalink }}" {{ if eq $full "true" }} class="full"{{ end }} {{ if ($title) }}alt="{{ $title }}"{{ end }} + style="border-radius: {{ $round }}%" > </a> {{ else }} @@ -113,6 +117,7 @@ {{ if eq $full "true" }}class="full"{{ end }} data-src="{{ $original.RelPermalink }}" {{ if $title }}alt="{{ $title }}"{{ end }} + style="border-radius: {{ $round }}%" > {{ end }} {{ if $title }}<figcaption>{{ $title }}</figcaption>{{ end }} |