newsroom/templates/components/event_card.html.twig

{# Embedded event card component #}
<div class="embedded-event-card" data-nevent="{{ nevent }}">
    <div class="event-header">
        {% if author %}
            {% if author.image is defined %}
                <img src="{{ author.image }}" class="avatar-small" alt="{{ author.name }}" onerror="this.style.display = 'none'" />
            {% endif %}
            <div class="author-info">
                <strong>{{ author.name ?? 'Anonymous' }}</strong>
            </div>
        {% endif %}
        <div class="event-meta">
            <span class="event-date">{{ event.created_at|date('M j, Y H:i') }}</span>
        </div>
    </div>
    <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>
</div>

<style>
.embedded-event-card {
    border: none;
    border-radius: 0;
    padding: 12px;
    margin: 8px 0;
    background: #f8f9fa;
}

.embedded-event-card .event-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.embedded-event-card .avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.embedded-event-card .author-info {
    flex: 1;
}

.embedded-event-card .nip05 {
    color: #6c757d;
    font-size: 0.85em;
}

.embedded-event-card .event-meta {
    color: #6c757d;
    font-size: 0.8em;
}

.embedded-event-card .event-content {
    margin: 8px 0;
    line-height: 1.4;
}

.embedded-event-card .event-footer {
    text-align: right;
}

.embedded-event-card .view-full {
    color: #007bff;
    text-decoration: none;
    font-size: 0.85em;
}
</style>