danix
's git repository
home
/
my projects
/
theme-danix.xyz.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
fixed images display on smaller screens
[theme-danix.xyz.git]
/
layouts
/
shortcodes
/
img.html
diff --git
a/layouts/shortcodes/img.html
b/layouts/shortcodes/img.html
index
d4159be
..
9f537cf
100644
(file)
--- a/
layouts/shortcodes/img.html
+++ b/
layouts/shortcodes/img.html
@@
-14,7
+14,7
@@
for that, and then fade in for the LQIP effect.
Feel free to adjust your CSS/SCSS as desired.
*/}}
for that, and then fade in for the LQIP effect.
Feel free to adjust your CSS/SCSS as desired.
*/}}
-{{- $imgClass := "
w-full h-auto
animate-fade" -}}
+{{- $imgClass := "animate-fade" -}}
{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
{{/*
Now we'll create the 20-pixel-wide LQIP
{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
{{/*
Now we'll create the 20-pixel-wide LQIP
@@
-27,7
+27,7
@@
$CFPstyle is for use in styling
the div's background, as you'll see shortly.
*/}}
$CFPstyle is for use in styling
the div's background, as you'll see shortly.
*/}}
-{{- $CFPstyle := printf "%s%s%s%v%s
%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px; height: " $source.Height
"px;" -}}
+{{- $CFPstyle := printf "%s%s%s%v%s
" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width
"px;" -}}
{{/*
Then, we create a 640-pixel-wide JPG
of the image. This will serve as the
{{/*
Then, we create a 640-pixel-wide JPG
of the image. This will serve as the
@@
-74,7
+74,8
@@
/>
<img class="{{ $imgClass }}"
src="{{ $actualImg.RelPermalink }}"
/>
<img class="{{ $imgClass }}"
src="{{ $actualImg.RelPermalink }}"
- width="640"
+ width="{{ $source.Width }}"
+ height="{{ $source.Height }}"
alt="{{ $alt }}"
loading="lazy"
/>
alt="{{ $alt }}"
loading="lazy"
/>