host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add videos to gallery template and logic

Browse source
This commit is contained in:
Paul Nicoué 2022-05-10 16:24:40 +02:00
parent 568e1d3fad
commit 586763f249
138 changed files with 156 additions and 1420 deletions
Download patch file Download diff file Expand all files Collapse all files

10
site/templates/base.twig
View file

@ -12,8 +12,10 @@
<link rel="icon" type="image/svg+xml" href="assets/favicon/xiao-wang-favicon.svg">
<link rel="apple-touch-icon" href="assets/favicon/xiao-wang-apple-touch-icon.png">
<link rel="manifest" href="assets/favicon/xiao-wang.webmanifest">
<link rel="stylesheet" href="{{ asset('assets/libraries/plyr.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
{% endblock %}
</head>
@ -71,9 +73,7 @@
</footer>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('assets/libraries/circletype.min.js') }}"></script>
<script src="{{ asset('assets/libraries/plyr.min.js') }}"></script>
{% block scripts %}
<script src="{{ asset('assets/js/app.js') }}"></script>
{% endblock %}

38
site/templates/gallery.twig
View file

@ -1,5 +1,10 @@
{% extends "base.twig" %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('assets/libraries/plyr.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
{% endblock %}
{% block main %}
<main>
@ -10,21 +15,32 @@
{% if page.text.isNotEmpty %}
<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
{% endif %}
<div class="gallery__artworks">
{% set files = page.files.sortBy('sort') %}
{% for file in files %}
{% if file.type == 'image' %}
<figure class="gallery__image">
<img src="{{ file.url }}" srcset="{{ file.srcset() }}" alt="{{ file.alt_text }}">
<figcaption>{{ file.caption }}</figcaption>
</figure>
{% elseif file.type == 'video' %}
{% endif %}
{% if page.files.isNotEmpty %}
{% set artworks = page.files.sortBy('sort') %}
{% for artwork in artworks %}
<figure class="gallery__artwork">
{% if artwork.type == 'video' %}
<video class="gallery__video" controls playsinline preload="metadata">
<source src="{{ artwork.url }}" type="video/mp4" />
</video>
{% endif %}
{% if artwork.type == 'image' %}
<img class="gallery__image" src="{{ artwork.url }}" srcset="{{ artwork.srcset() }}" alt="{{ artwork.alt_text }}">
{% endif %}
{% if artwork.caption %}
<figcaption>{{ artwork.caption }}</figcaption>
{% endif %}
</figure>
{% endfor %}
</div>
{% endif %}
</article>
</section>
</main>
{% endblock %}
{% block scripts %}
<script src="{{ asset('assets/libraries/plyr.min.js') }}"></script>
<script src="{{ asset('assets/js/app.js') }}"></script>
{% endblock %}

9
site/templates/home.twig
View file

@ -1,5 +1,9 @@
{% extends "base.twig" %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/style.min.css') }}">
{% endblock %}
{% block main %}
<main>
@ -27,3 +31,8 @@
</main>
{% endblock %}
{% block scripts %}
<script src="{{ asset('assets/libraries/circletype.min.js') }}"></script>
<script src="{{ asset('assets/js/app.js') }}"></script>
{% endblock %}