nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

images: apply image effects to lightbox images #631

Browse source
This commit is contained in:
Sören Weber 2023-08-26 22:41:07 +02:00
parent 937af7214c
commit 82d3a9aabf
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
layouts/partials/shortcodes/image.html
View file

@ -71,5 +71,5 @@
<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="figure-image {{ delimit $classes " " }}" style="height: {{ $height }}; width: {{ $width }};" loading="lazy"> <img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="figure-image {{ delimit $classes " " }}" style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
{{- if $effects.lightbox -}} {{- if $effects.lightbox -}}
</a> </a>
<a href="javascript:history.back();" class="lightbox-back" id="image-{{ $id }}"><img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image" loading="lazy"></a> <a href="javascript:history.back();" class="lightbox-back" id="image-{{ $id }}"><img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image {{ delimit $classes " " }}" loading="lazy"></a>
{{- end }} {{- end }}

11
static/css/theme.css
View file

@ -330,25 +330,26 @@ dd {
text-align: center; text-align: center;
} }
#body img.left { #body img:not(.lightbox-image).left {
margin-left: 0; margin-left: 0;
} }
#body img.right { #body img:not(.lightbox-image).right {
margin-right: 0; margin-right: 0;
} }
#body img.border, #body img:not(.lightbox-image).border,
#body .video-container.border { #body .video-container.border {
background-clip: padding-box;
border: 1px solid rgba( 134, 134, 134, .333 ); border: 1px solid rgba( 134, 134, 134, .333 );
} }
#body img.shadow, #body img:not(.lightbox-image).shadow,
#body .video-container.shadow { #body .video-container.shadow {
box-shadow: 0 10px 30px rgba( 176, 176, 176, .666 ); box-shadow: 0 10px 30px rgba( 176, 176, 176, .666 );
} }
#body img.inline { #body img:not(.lightbox-image).inline {
display: inline !important; display: inline !important;
margin: 0 !important; margin: 0 !important;
vertical-align: bottom; vertical-align: bottom;