Aroy/Rinkusu
1
1
Fork 0
mirror of https://github.com/Aroy-Art/Rinkusu.git synced 2024-12-27 05:44:23 +01:00
Code Issues 6 Projects Releases Packages Wiki Activity

Update Masonry plugin and portfolio

Browse source
This commit is contained in:
Aroy-Art 2024-02-12 18:32:56 +01:00
parent 77d4252b75
commit ff604db53f
Signed by: Aroy
GPG key ID: 583642324A1D2070
3 changed files with 61 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
assets/js/script.js
View file

@ -12,6 +12,21 @@ $(window).on('load', function () {
const observer = lozad(); // lazy loads elements with default selector as ".lozad" const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe(); observer.observe();
/* ========================================================================= */
/* init Masonry for blog list
/* ========================================================================= */
var grid = document.querySelector('.blog-post');
if (grid) {
var msnry = new Masonry(grid, {
percentPosition: true
});
imagesLoaded(grid).on('progress', function() {
// layout Masonry after each image loads
msnry.layout();
});
}
/* ========================================================================= */ /* ========================================================================= */
/* Image Preloader /* Image Preloader
@ -21,7 +36,6 @@ function imgIsLoaded(imgElement) {
$(imgElement).removeClass("unloaded"); $(imgElement).removeClass("unloaded");
} }
/* ========================================================================= */ /* ========================================================================= */
/* Code Copy Button /* Code Copy Button
/* ========================================================================= */ /* ========================================================================= */

61
layouts/static/portfolio.html
View file

@ -16,43 +16,52 @@
{{"<!-- Title -->" | safeHTML}} {{"<!-- Title -->" | safeHTML}}
<div class="title text-center"> <div class="title text-center">
<h2>{{ with .title }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span class="color"> <h2>{{ with .title }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span class="color">
{{ with .title }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2> {{ with .title }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2>
<div class="border-Rinkusu"></div> <div class="border-Rinkusu"></div>
</div> </div>
<p class="text-center mb-4">
{{ .description }}
</p>
{{"<!-- /Title -->" | safeHTML}} {{"<!-- /Title -->" | safeHTML}}
</div> </div>
</div> </div>
{{ range .portfolio_categories }} {{ range .portfolio_categories }}
{{ $text_color := .text_color}} {{ $text_color := .text_color}}
<div class="row portfolio-category"> <div class="row">
{{"<!-- Section Title -->" | safeHTML}}
<div class="col-12"> <div class="pb-2 title text-center">
{{"<!-- Section Title -->" | safeHTML}} <h2 class="portfolio-category-title" style="background-color: {{ .bg_color }};">
<div class="title text-center"> {{ with .name }} {{ index (split . " ") 0 | safeHTML }} {{ end }}
<h2 class="portfolio-category-title" style="background-color: {{ .bg_color}};"> <span style="color: {{ $text_color }};">
{{ with .name }} {{ index (split . " ") 0 | safeHTML }} {{ end }}<span style="color: {{ $text_color }};"> {{ with .name }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}
{{ with .name }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}</span></h2> </span>
<div class="border-Rinkusu"></div> </h2>
</div> <div class="border-Rinkusu"></div>
{{"<!-- /Section Title -->" | safeHTML}}
</div>
<div class="masonry-wrapper">
<div class="masonry">
{{ $category := .name }}
{{ range .portfolio_items }}
{{- $original := resources.Get .image -}}
{{ $thumb := $original.Fit "512x512" }}
{{ $image := $original.Fit "1080x1080" }}
<a class="masonry-item" href="{{ $image.RelPermalink }}" data-lightbox="{{ $category }}" data-title="{{ .name }}">
<img src="{{ $thumb.RelPermalink }}" alt="" class="masonry-content">
</a>
{{ end }}
</div>
</div> </div>
{{"<!-- /Section Title -->" | safeHTML}}
</div> </div>
<div class="row portfolio-category" data-masonry='{ "percentPosition": true }'>
{{ $category := .name }}
{{ range .portfolio_items }}
{{- $original := resources.Get .image -}}
{{ $thumb := $original.Fit "512x512" }}
{{ $image := $original.Fit "1080x1080" }}
<div class="item col-sm-4 col-lg-3 my-2">
<a class="card bg-transparent" href="{{ $image.RelPermalink }}" data-lightbox="{{ $category }}" data-title="{{ .name }}">
<img class="card-img" src="{{ $thumb.RelPermalink }}" alt="">
</a>
</div>
{{ end }}
</div>
{{ end }} {{ end }}
</div> </div>
</div>
<script src="{{ .image_loaded_plugin }}"></script> <script src="{{ .image_loaded_plugin }}"></script>
</section> </section>
{{"<!-- /Portfolio Section -->" | safeHTML}} {{"<!-- /Portfolio Section -->" | safeHTML}}

9
static/plugins/masonry/masonry.pkgd.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long