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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      templates/components/event_card.html.twig
  2. 127
      templates/event/index.html.twig

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

@ -16,6 +16,106 @@ @@ -16,6 +16,106 @@
<div class="event-content">
{{ event.content|markdown_to_html|mentionify }}
</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">
<a href="/e/{{ nevent }}" class="view-full">View full event</a>
</div>

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

@ -1,7 +1,7 @@ @@ -1,7 +1,7 @@
{% extends 'layout.html.twig' %}
{% block title %}
{%- if author and author.name is defined -%}
{%- if author and (author.name ?? false) -%}
{{ author.name }} - Nostr Event
{%- else -%}
Nostr Event
@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
{% set ogType = 'article' %} {# Could use 'image' but 'article' is more widely supported #}
{% endif %}
<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 #}
{% set ogDescription = event.content|default('View this Nostr event')|striptags|slice(0, 200) %}
@ -50,7 +50,7 @@ @@ -50,7 +50,7 @@
{% endif %}
{# 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 %}
{% endif %}
@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
{# Twitter Card tags #}
<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:image" content="{{ ogImage }}" />
@ -72,7 +72,7 @@ @@ -72,7 +72,7 @@
<meta property="article:published_time" content="{{ event.created_at|date('c') }}" />
{% endif %}
{% if author and author.name is defined %}
{% if author and (author.name ?? false) %}
<meta property="article:author" content="{{ author.name }}" />
{% endif %}
@ -121,25 +121,130 @@ @@ -121,25 +121,130 @@
<twig:Atoms:Content :content="event.content" />
</div>
{% endif %}
</div>
</article>
<div class="w-container d-flex">
<div class="notice info mt-4">
<p>This is a work in progress. If your event didn't render right, we apologize. Working on it!</p>
{# 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>
</article>
<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">
<h4>Referenced Nostr Links</h4>
<ul class="link-list">
{% for link in nostrLinks %}
{% if link.type == 'url' %}
<li>
<a href="{{ link.identifier }}">{{ link.identifier }}</a>
</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 %}
</ul>
</div>

Write Preview
Loading…
Cancel
Save