silberengel
/
newsroom
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Image gallery

imwald
Nuša Pukšič 3 months ago
parent
4755ec5233
commit
6b1d3a8b81
2 changed files with 222 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      templates/components/event_card.html.twig
  2. 139
      templates/event/index.html.twig

100
templates/components/event_card.html.twig
Unescape View File

@ -16,6 +16,106 @@
<div class="event-content"> <div class="event-content">
{{ event.content|markdown_to_html|mentionify }} {{ event.content|markdown_to_html|mentionify }}
</div> </div>
{# Collect all imeta images into an array #}
{% set images = [] %}
{% for tag in event.tags %}
{% if tag[0] == 'imeta' %}
{% set imageUrl = null %}
{% set mimeType = null %}
{% set blurhash = null %}
{% set dimensions = null %}
{% set altText = null %}
{% set fallbacks = [] %}
{% set annotatedUsers = [] %}
{# Parse imeta tag parameters #}
{% for i in 1..(tag|length - 1) %}
{% set param = tag[i] %}
{% if param starts with 'url ' %}
{% set imageUrl = param[4:] %}
{% elseif param starts with 'm ' %}
{% set mimeType = param[2:] %}
{% elseif param starts with 'blurhash ' %}
{% set blurhash = param[9:] %}
{% elseif param starts with 'dim ' %}
{% set dimensions = param[4:] %}
{% elseif param starts with 'alt ' %}
{% set altText = param[4:] %}
{% elseif param starts with 'fallback ' %}
{% set fallbacks = fallbacks|merge([param[9:]]) %}
{% elseif param starts with 'annotate-user ' %}
{% set annotatedUsers = annotatedUsers|merge([param[14:]]) %}
{% endif %}
{% endfor %}
{# Alt is also own tag #}
{% for altTag in event.tags %}
{% if altTag[0] == 'alt' %}
{% set altText = altTag[1] %}
{% endif %}
{% endfor %}
{% set images = images|merge([{
'url': imageUrl,
'mimeType': mimeType,
'blurhash': blurhash,
'dimensions': dimensions,
'altText': altText,
'fallbacks': fallbacks,
'annotatedUsers': annotatedUsers
}]) %}
{% endif %}
{% endfor %}
{% if images|length > 0 %}
<div class="gallery-view" data-controller="gallery">
<div class="main-image-wrapper">
{% set main = images[0] %}
<figure class="media">
<picture>
<img src="{{ main.url }}"
alt="{{ main.altText|default('Picture') }}"
{% if main.dimensions %}data-dimensions="{{ main.dimensions }}"{% endif %}
{% if main.blurhash %}data-blurhash="{{ main.blurhash }}"{% endif %}
class="picture-image main-image"
data-gallery-target="mainImage"
/>
{% for fallback in main.fallbacks %}
<source srcset="{{ fallback }}" />
{% endfor %}
</picture>
{% if images|length > 1 %}
<div class="thumbnails" data-gallery-target="thumbnails">
{% for img in images %}
<img src="{{ img.url }}"
alt="{{ img.altText|default('Picture') }}"
class="thumbnail{% if loop.first %} selected{% endif %}"
data-gallery-target="thumbnail"
data-action="click->gallery#switch"
data-gallery-index="{{ loop.index0 }}"
{% if img.dimensions %}data-dimensions="{{ img.dimensions }}"{% endif %}
{% if img.blurhash %}data-blurhash="{{ img.blurhash }}"{% endif %}
/>
{% endfor %}
</div>
{% endif %}
</figure>
{# Display annotated users for main image #}
{% if main.annotatedUsers|length > 0 %}
<div class="annotated-users">
{% for userAnnotation in main.annotatedUsers %}
{% set parts = userAnnotation|split(':') %}
{% if parts|length == 3 %}
<div class="user-tag" data-left="{{ parts[1] }}" data-top="{{ parts[2] }}" style="left: {{ parts[1] }}%; top: {{ parts[2] }}%;">
<twig:Molecules:UserFromNpub ident="{{ parts[0] }}" />
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
<div class="event-footer"> <div class="event-footer">
<a href="/e/{{ nevent }}" class="view-full">View full event</a> <a href="/e/{{ nevent }}" class="view-full">View full event</a>
</div> </div>

139
templates/event/index.html.twig
Unescape View File

@ -1,7 +1,7 @@
{% extends 'layout.html.twig' %} {% extends 'layout.html.twig' %}
{% block title %} {% block title %}
{%- if author and author.name is defined -%} {%- if author and (author.name ?? false) -%}
{{ author.name }} - Nostr Event {{ author.name }} - Nostr Event
{%- else -%} {%- else -%}
Nostr Event Nostr Event
@ -17,7 +17,7 @@
{% set ogType = 'article' %} {# Could use 'image' but 'article' is more widely supported #} {% set ogType = 'article' %} {# Could use 'image' but 'article' is more widely supported #}
{% endif %} {% endif %}
<meta property="og:type" content="{{ ogType }}" /> <meta property="og:type" content="{{ ogType }}" />
<meta property="og:title" content="{% if author and author.name is defined %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" /> <meta property="og:title" content="{% if author and (author.name ?? false) %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" />
{# OG Description - use event content or fallback #} {# OG Description - use event content or fallback #}
{% set ogDescription = event.content|default('View this Nostr event')|striptags|slice(0, 200) %} {% set ogDescription = event.content|default('View this Nostr event')|striptags|slice(0, 200) %}
@ -50,7 +50,7 @@
{% endif %} {% endif %}
{# Fallback to author image if available #} {# Fallback to author image if available #}
{% if ogImage is null and author and author.image is defined %} {% if ogImage is null and author and (author.image ?? false) %}
{% set ogImage = author.image %} {% set ogImage = author.image %}
{% endif %} {% endif %}
@ -63,7 +63,7 @@
{# Twitter Card tags #} {# Twitter Card tags #}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{% if author and author.name is defined %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" /> <meta name="twitter:title" content="{% if author and (author.name ?? false) %}{{ author.name }} - Nostr Event{% else %}Nostr Event{% endif %}" />
<meta name="twitter:description" content="{{ ogDescription }}" /> <meta name="twitter:description" content="{{ ogDescription }}" />
<meta name="twitter:image" content="{{ ogImage }}" /> <meta name="twitter:image" content="{{ ogImage }}" />
@ -72,7 +72,7 @@
<meta property="article:published_time" content="{{ event.created_at|date('c') }}" /> <meta property="article:published_time" content="{{ event.created_at|date('c') }}" />
{% endif %} {% endif %}
{% if author and author.name is defined %} {% if author and (author.name ?? false) %}
<meta property="article:author" content="{{ author.name }}" /> <meta property="article:author" content="{{ author.name }}" />
{% endif %} {% endif %}
@ -110,7 +110,7 @@
{# NIP-68 Picture Event (kind 20) #} {# NIP-68 Picture Event (kind 20) #}
{% if event.kind == 20 %} {% if event.kind == 20 %}
{% include 'event/_kind20_picture.html.twig' %} {% include 'event/_kind20_picture.html.twig' %}
{# NIP-71 Video Events (kind 21 and 22) #} {# NIP-71 Video Events (kind 21 and 22) #}
{% elseif event.kind == 21 or event.kind == 22 %} {% elseif event.kind == 21 or event.kind == 22 %}
{% include 'event/_kind22_video.html.twig' %} {% include 'event/_kind22_video.html.twig' %}
{% elseif event.kind == 1450 %} {% elseif event.kind == 1450 %}
@ -121,25 +121,130 @@
<twig:Atoms:Content :content="event.content" /> <twig:Atoms:Content :content="event.content" />
</div> </div>
{% endif %} {% endif %}
</div>
</article>
<div class="w-container d-flex"> {# Collect all imeta images into an array #}
<div class="notice info mt-4"> {% set images = [] %}
<p>This is a work in progress. If your event didn't render right, we apologize. Working on it!</p> {% for tag in event.tags %}
</div> {% if tag[0] == 'imeta' %}
{% set imageUrl = null %}
{% set mimeType = null %}
{% set blurhash = null %}
{% set dimensions = null %}
{% set altText = null %}
{% set fallbacks = [] %}
{% set annotatedUsers = [] %}
{# Parse imeta tag parameters #}
{% for i in 1..(tag|length - 1) %}
{% set param = tag[i] %}
{% if param starts with 'url ' %}
{% set imageUrl = param[4:] %}
{% elseif param starts with 'm ' %}
{% set mimeType = param[2:] %}
{% elseif param starts with 'blurhash ' %}
{% set blurhash = param[9:] %}
{% elseif param starts with 'dim ' %}
{% set dimensions = param[4:] %}
{% elseif param starts with 'alt ' %}
{% set altText = param[4:] %}
{% elseif param starts with 'fallback ' %}
{% set fallbacks = fallbacks|merge([param[9:]]) %}
{% elseif param starts with 'annotate-user ' %}
{% set annotatedUsers = annotatedUsers|merge([param[14:]]) %}
{% endif %}
{% endfor %}
{# Alt is also own tag #}
{% for altTag in event.tags %}
{% if altTag[0] == 'alt' %}
{% set altText = altTag[1] %}
{% endif %}
{% endfor %}
{% set images = images|merge([{
'url': imageUrl,
'mimeType': mimeType,
'blurhash': blurhash,
'dimensions': dimensions,
'altText': altText,
'fallbacks': fallbacks,
'annotatedUsers': annotatedUsers
}]) %}
{% endif %}
{% endfor %}
{% if images|length > 0 %}
<div class="gallery-view" data-controller="gallery">
<div class="main-image-wrapper">
{% set main = images[0] %}
<figure class="media">
<picture>
<img src="{{ main.url }}"
alt="{{ main.altText|default('Picture') }}"
{% if main.dimensions %}data-dimensions="{{ main.dimensions }}"{% endif %}
{% if main.blurhash %}data-blurhash="{{ main.blurhash }}"{% endif %}
class="picture-image main-image"
data-gallery-target="mainImage"
/>
{% for fallback in main.fallbacks %}
<source srcset="{{ fallback }}" />
{% endfor %}
</picture>
{% if images|length > 1 %}
<div class="thumbnails" data-gallery-target="thumbnails">
{% for img in images %}
<img src="{{ img.url }}"
alt="{{ img.altText|default('Picture') }}"
class="thumbnail{% if loop.first %} selected{% endif %}"
data-gallery-target="thumbnail"
data-action="click->gallery#switch"
data-gallery-index="{{ loop.index0 }}"
{% if img.dimensions %}data-dimensions="{{ img.dimensions }}"{% endif %}
{% if img.blurhash %}data-blurhash="{{ img.blurhash }}"{% endif %}
/>
{% endfor %}
</div>
{% endif %}
</figure>
{# Display annotated users for main image #}
{% if main.annotatedUsers|length > 0 %}
<div class="annotated-users">
{% for userAnnotation in main.annotatedUsers %}
{% set parts = userAnnotation|split(':') %}
{% if parts|length == 3 %}
<div class="user-tag" data-left="{{ parts[1] }}" data-top="{{ parts[2] }}" style="left: {{ parts[1] }}%; top: {{ parts[2] }}%;">
<twig:Molecules:UserFromNpub ident="{{ parts[0] }}" />
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</div> </div>
</article>
<div class="container"> <div class="container">
{% if nostrLinks is defined and nostrLinks|length > 0 %} {% if is_granted('ROLE_ADMIN') and nostrLinks is defined and nostrLinks|length > 0 %}
<div class="nostr-links"> <div class="nostr-links">
<h4>Referenced Nostr Links</h4> <h4>Referenced Nostr Links</h4>
<ul class="link-list"> <ul class="link-list">
{% for link in nostrLinks %} {% for link in nostrLinks %}
<li> {% if link.type == 'url' %}
<a href="/e/{{ link.identifier }}">{{ link.identifier }}</a> <li>
<span class="link-type">({{ link.type }})</span> <a href="{{ link.identifier }}">{{ link.identifier }}</a>
</li> </li>
{% elseif link.type == 'npub' %}
<li>
<a href="/p/{{ link.identifier }}">{{ link.identifier }}</a>
<span class="link-type">({{ link.type }})</span>
</li>
{% else %}
<li>
<a href="/e/{{ link.identifier }}">{{ link.identifier }}</a>
<span class="link-type">({{ link.type }})</span>
</li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>

Write Preview
Loading…
Cancel
Save