This is a gentle fork from https://framagit.org/marienfressinaud/photos.marienfressinaud.fr with a responsive and optimized mindset. https://media.larlet.fr/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

media.html.j2 7.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. {% extends "base.html.j2" %}
  2. {% block title %}{{ gallery.name }}{% endblock %}
  3. {% block extra_head %}
  4. <!-- CanIHazMoreComplexityPlease? https://htmlhead.dev/ -->
  5. <meta
  6. name="twitter:image" property="og:image" itemprop="image"
  7. content="https://media.larlet.fr/{{ photo.gallery_slug }}/jpg/{{ photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
  8. >
  9. {% endblock %}
  10. {% block container %}
  11. <div class="hero u-center">
  12. <picture>
  13. <source
  14. srcset="
  15. {%- for size in sizes %}
  16. {{ photo.gallery_slug }}/webp/{{ photo.name }}_{{ size.0 }}x{{ size.1 }}.webp {{ size.0 }}w{% if not loop.last%},{% endif %}
  17. {%- endfor -%}
  18. "
  19. sizes="min(100vw, calc(100vh * {{ photo.width }} / {{ photo.height }}))"
  20. type="image/webp">
  21. <img
  22. src="{{ photo.gallery_slug }}/jpg/{{ photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
  23. width="{{ photo.width }}" height="{{ photo.height }}"
  24. srcset="
  25. {%- for size in sizes %}
  26. {{ photo.gallery_slug }}/jpg/{{ photo.name }}_{{ size.0 }}x{{ size.1 }}.jpg {{ size.0 }}w{% if not loop.last%},{% endif %}
  27. {%- endfor -%}
  28. "
  29. sizes="min(100vw, calc(100vh * {{ photo.width }} / {{ photo.height }}))"
  30. alt="TODO">
  31. </picture>
  32. </div>
  33. <h1>{{ gallery.name }}{% if gallery.private %} (🔒 privé){% endif %}</h1>
  34. <nav>
  35. <p class="u-center">
  36. {% if previous %}
  37. <a href="{{ previous.page_url }}"
  38. title="Photo précédente, vous pouvez utiliser la flèche du clavier ←"
  39. >← Photo précédente</a>
  40. {% endif %}
  41. <a href="/"
  42. title="Retour à l’accueil, vous pouvez utiliser la flèche du clavier ↑"
  43. >↑ Retour aux albums{% if gallery.private %} publics{% endif %}</a>
  44. {% if next %}
  45. <a href="{{ next.page_url }}"
  46. title="Photo suivante, vous pouvez utiliser la flèche du clavier →"
  47. >Photo suivante →</a>
  48. {% endif %}
  49. </p>
  50. </nav>
  51. {# TODO: less manual! #}
  52. {% if gallery.type == "video" %}
  53. <div class="u-center">
  54. <div class="iframe-container"><iframe src="https://player.vimeo.com/video/580086949?h=0833bc929c" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
  55. <p><a href="https://vimeo.com/580086949/0833bc929c">Évasion (lire sur Vimeo)</a></p>
  56. <hr>
  57. <div class="iframe-container"><iframe src="https://player.vimeo.com/video/540447287?h=323e810be3" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
  58. <p><a href="https://vimeo.com/540447287/323e810be3">Contemplation (lire sur Vimeo)</a></p>
  59. <hr>
  60. <div class="iframe-container"><iframe src="https://player.vimeo.com/video/516515235?h=45826baa92" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
  61. <p><a href="https://vimeo.com/516515235/45826baa92">Précipitation (lire sur Vimeo)</a></p>
  62. <hr>
  63. <div class="iframe-container"><iframe src="https://player.vimeo.com/video/492686199?h=31ac11260c" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
  64. <p><a href="https://vimeo.com/492686199/31ac11260c">Arrakice (lire sur Vimeo)</a></p>
  65. <hr>
  66. <div class="iframe-container"><iframe src="https://player.vimeo.com/video/473661570?h=46af2e921e" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>
  67. <p><a href="https://vimeo.com/473661570/46af2e921e">Chaos (lire sur Vimeo)</a></p>
  68. </div>
  69. {% endif %}
  70. <div class="gallery">
  71. {% for gallery_photo in gallery.photos %}
  72. {% if not gallery_photo.url == photo.url %}
  73. <div class="photo{% if gallery_photo.narrow %} narrow{% endif %}{% if gallery_photo.wide %} wide{% endif %}">
  74. <a href="{{ gallery_photo.page_url }}">
  75. <picture>
  76. <source
  77. srcset="
  78. {%- for size in sizes %}
  79. {{ gallery_photo.gallery_slug }}/webp/{{ gallery_photo.name }}_{{ size.0 }}x{{ size.1 }}.webp {{ size.0 }}w{% if not loop.last%},{% endif %}
  80. {%- endfor -%}
  81. "
  82. sizes="{% if gallery_photo.narrow %}150px{% else %}310px{% endif %}"
  83. type="image/webp">
  84. <img
  85. src="{{ gallery_photo.gallery_slug }}/jpg/{{ gallery_photo.name }}_{{ sizes.0.0 }}x{{ sizes.0.1 }}.jpg"
  86. width="{{ gallery_photo.width }}" height="{{ gallery_photo.height }}"
  87. srcset="
  88. {%- for size in sizes %}
  89. {{ gallery_photo.gallery_slug }}/jpg/{{ gallery_photo.name }}_{{ size.0 }}x{{ size.1 }}.jpg {{ size.0 }}w{% if not loop.last%},{% endif %}
  90. {%- endfor -%}
  91. "
  92. sizes="{% if gallery_photo.narrow %}150px{% else %}310px{% endif %}"
  93. alt="TODO" loading="lazy" decoding="async">
  94. </picture>
  95. </a>
  96. </div>
  97. {% endif %}
  98. {% endfor %}
  99. </div>
  100. <nav>
  101. <p class="u-center"
  102. data-controller="navigation"
  103. data-action="keydown@window->navigation#navigate"
  104. >
  105. {% if previous %}
  106. <a href="{{ previous.page_url }}"
  107. title="Photo précédente, vous pouvez utiliser la flèche du clavier ←"
  108. data-navigation-target="previous"
  109. >← Photo précédente</a>
  110. {% endif %}
  111. <a href="/"
  112. title="Retour à l’accueil, vous pouvez utiliser la flèche du clavier ↑"
  113. data-navigation-target="up"
  114. >↑ Retour aux albums{% if gallery.private %} publics{% endif %}</a>
  115. {% if next %}
  116. <a href="{{ next.page_url }}"
  117. title="Photo suivante, vous pouvez utiliser la flèche du clavier →"
  118. data-navigation-target="next"
  119. >Photo suivante →</a>
  120. {% endif %}
  121. </p>
  122. </nav>
  123. {% endblock %}
  124. {% block extra_bottom %}
  125. <script type="module">
  126. import { Application, Controller } from "/scripts/stimulus-3.0.1.js"
  127. window.Stimulus = Application.start()
  128. // window.Stimulus.debug = true
  129. Stimulus.register("navigation", class extends Controller {
  130. static targets = [ "previous", "next", "up" ]
  131. navigate(event) {
  132. const key = event.key
  133. if (key === "ArrowLeft" && this.hasPreviousTarget) {
  134. this.previousTarget.click()
  135. }
  136. if (key === "ArrowRight" && this.hasNextTarget) {
  137. this.nextTarget.click()
  138. }
  139. if (key === "ArrowUp" && this.hasUpTarget) {
  140. this.upTarget.click()
  141. }
  142. }
  143. })
  144. </script>
  145. {% endblock %}