jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 11:38:28 -04:00
Code Issues

fix responsive image height scaling

Browse Source
This commit is contained in:
Jake Jarvis 2019-11-08 11:19:08 -05:00
parent b623aaeda8
commit a9f52bffbd
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/gh-pages.yml vendored
View File

@ -39,7 +39,7 @@ jobs:
sudo DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends pngquant jpegoptim sudo DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends pngquant jpegoptim
cd $HOME/gh-pages/notes cd $HOME/gh-pages/notes
find . -iname "*.jp*" -print0 | xargs -0 jpegoptim --max=80 --strip-all find . -iname "*.jp*" -print0 | xargs -0 jpegoptim --max=80 --strip-all
find . -iname "*.png" -print0 | xargs -0 pngquant --quality=60-70 --speed 1 --ext=.png --force --verbose find . -iname "*.png" -print0 | xargs -0 pngquant --quality=60-65 --speed 1 --ext=.png --force --verbose
# Initialize a sub-repository in the new gh-pages directory and # Initialize a sub-repository in the new gh-pages directory and
# add jakejarvis/jakejarvis.github.io as a remote. # add jakejarvis/jakejarvis.github.io as a remote.

1
assets/sass/pages/_notes.scss
View File

@ -170,6 +170,7 @@ body#notes {
img, img,
figure { figure {
height: auto;
max-width: 100%; max-width: 100%;
margin: 1em auto; margin: 1em auto;
display: block; display: block;

13
layouts/shortcodes/image.html
View File

@ -5,17 +5,18 @@
<!-- TODO: automatically pull max-width of page --> <!-- TODO: automatically pull max-width of page -->
{{- $maxWidth := 910 -}} {{- $maxWidth := 910 -}}
{{- $setWidth := 0 -}}
{{- if .Get "width" }} {{- if .Get "width" }}
{{- $inputWidth := (int (.Get "width")) -}} {{- $setWidth = (int (.Get "width")) -}}
{{- $retinaWidth := (mul $inputWidth 2) -}} {{- $retinaWidth := (mul $setWidth 2) -}}
{{- if gt $original.Width $retinaWidth -}} {{- if gt $original.Width $retinaWidth -}}
{{- $finalWidth := (printf "%dx" $retinaWidth ) -}} {{- $finalWidth := (printf "%dx" $retinaWidth ) -}}
{{- .Scratch.Set "image" ($original.Resize $finalWidth) -}} {{- .Scratch.Set "image" ($original.Resize $finalWidth) -}}
{{- end -}} {{- end -}}
{{- else -}} {{- else -}}
{{- $inputWidth := $maxWidth -}} {{- $setWidth = $maxWidth -}}
{{- if gt $original.Width 1820 -}} {{- if gt $original.Width 1820 -}}
{{- .Scratch.Set "image" ($original.Resize "1820x") -}} {{- .Scratch.Set "image" ($original.Resize "1820x") -}}
{{- end -}} {{- end -}}
@ -23,7 +24,7 @@
{{- $image := .Scratch.Get "image" -}} {{- $image := .Scratch.Get "image" -}}
{{- $displayWidth := (math.Round (div $image.Width 2)) -}} {{- $displayWidth := $setWidth -}}
{{- $displayHeight := (math.Round (div $image.Height 2)) -}} {{- $displayHeight := (math.Round (div $image.Height 2)) -}}
{{- if .Get "caption" -}} {{- if .Get "caption" -}}
@ -32,7 +33,9 @@
{{- else -}} {{- else -}}
<p> <p>
{{- end -}} {{- end -}}
<img src="{{ $image.Permalink }}" width="{{ $displayWidth }}" height="{{ $displayHeight }}"{{ if .Get "alt" }} alt="{{ .Get "alt" }}"{{ end }}{{ if .Get "caption" }} title="{{ .Get "caption"}}"{{ end }}> <img src="{{ $image.Permalink }}" width="{{ $displayWidth }}" height="{{ $displayHeight }}"
{{- if .Get "alt" }} alt="{{ .Get "alt" }}"{{ end }}
{{- if .Get "caption" }} title="{{ .Get "caption"}}"{{ end }}>
{{- if .Get "caption" -}} {{- if .Get "caption" -}}
</picture> </picture>
<figcaption>{{ .Get "caption" }}</figcaption> <figcaption>{{ .Get "caption" }}</figcaption>

8
layouts/shortcodes/video.html
View File

@ -3,7 +3,13 @@
{{- $video_ogg := .Page.Resources.GetMatch (.Get "ogg") -}} {{- $video_ogg := .Page.Resources.GetMatch (.Get "ogg") -}}
{{- $img_poster := .Page.Resources.GetMatch (.Get "poster") -}} {{- $img_poster := .Page.Resources.GetMatch (.Get "poster") -}}
<video class="embed"{{ if .Get "width" }} width="{{ .Get "width" }}"{{ end }}{{ if .Get "height" }} height="{{ .Get "height" }}"{{ end }}{{ if .Get "poster" }} poster="{{ $img_poster.Permalink }}"{{ end }}{{ if .Get "autoplay" }} autoplay{{ end }}{{ if .Get "loop" }} loop{{ end }}{{ if ne (.Get "nocontrols") "1" }} controls{{ end }}> <video class="embed"
{{- if .Get "width" }} width="{{ .Get "width" }}"{{ end }}
{{- if .Get "height" }} height="{{ .Get "height" }}"{{ end }}
{{- if .Get "poster" }} poster="{{ $img_poster.Permalink }}"{{ end }}
{{- if .Get "autoplay" }} autoplay{{ end }}
{{- if .Get "loop" }} loop{{ end }}
{{- if ne (.Get "nocontrols") "1" }} controls{{ end }}>
{{ if .Get "webm" }}<source src="{{ $video_webm.Permalink }}" type="video/webm">{{ end }} {{ if .Get "webm" }}<source src="{{ $video_webm.Permalink }}" type="video/webm">{{ end }}
{{ if .Get "mp4" }}<source src="{{ $video_mp4.Permalink }}" type="video/mp4">{{ end }} {{ if .Get "mp4" }}<source src="{{ $video_mp4.Permalink }}" type="video/mp4">{{ end }}
{{ if .Get "ogg" }}<source src="{{ $video_ogg.Permalink }}" type="video/ogg">{{ end }} {{ if .Get "ogg" }}<source src="{{ $video_ogg.Permalink }}" type="video/ogg">{{ end }}