kuvia2/templates/user_gallery.tmpl
2022-01-15 00:09:03 +01:00

65 lines
No EOL
2.7 KiB
Cheetah

{{template "top" .}}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/lightgallery@2.3.0/css/lightgallery-bundle.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.css" />
<div class="container" style="margin-top: 100px;">
<div class="row">
<div class="col-md-3">
<img src="/image?path={{ .user.Image }}&width=200" style="border-radius: 50%;max-width: 80%;" ></img>
</div>
<div class="col-9">
<h1>{{ if not .user.Name }}
{{ .user.Username }}
{{else}}
{{ .user.Name }}
{{end}}</h1>
<p>{{ if .user.AboutMe }}{{ .user.AboutMe }}{{ end }}</p>
<div style="padding-top: 30px;">
{{ if .user.Webpage }}<i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a> {{ end }}
{{ if .user.Location}}<i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
</div>
</div>
</div>
<hr></hr>
<div id="lightgallery" style="width: 100%;">
{{ range .images }}
<a href="/image?path={{.Path}}&width=1200">
<img class="img-responsive" src="/image?path={{.Path}}&height=250" />
</a>
{{ end }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.js"></script>
<script src="https://unpkg.com/lightgallery@2.3.0/lightgallery.umd.js"></script>
<script src="https://unpkg.com/lightgallery@2.3.0/plugins/zoom/lg-zoom.umd.js"></script>
<script src="https://unpkg.com/lightgallery@2.3.0/plugins/thumbnail/lg-thumbnail.umd.js"></script>
<script type="text/javascript">
$("#lightgallery").justifiedGallery({
rowHeight: 250,
lastRow: "justify",
margins: 10,
thumbnailPath: function (currentPath, width, height, image) {
if (height < 250) {
return currentPath.replace(/height=[0-9]{2,4}$/, "height=250");
} else {
return currentPath.replace(/height=[0-9]{2,4}$/, "height="+height);
}
}
});
lightGallery(document.getElementById('lightgallery'), {
autoplayFirstVideo: false,
pager: false,
galleryId: "nature",
plugins: [lgZoom, lgThumbnail],
mobileSettings: {
controls: false,
showCloseIcon: false,
download: false,
rotate: false
}
});
</script>
</div>
{{template "bottom" .}}