From 4f1281deb308834076592354e20f159e068e8f70 Mon Sep 17 00:00:00 2001
From: Daniel Waxweiler <daniel.waxweiler@pm.me>
Date: Sun, 4 Aug 2024 18:26:30 +0200
Subject: [PATCH] adapt block too, add to changelog

---
 source/changelog.txt             |  1 +
 source/front/events-displayer.js | 16 +++++++++++++---
 source/front/html-creator.js     |  7 +++++++
 source/view/events-list.php      |  2 +-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/source/changelog.txt b/source/changelog.txt
index 1cfb71b..9b244f7 100644
--- a/source/changelog.txt
+++ b/source/changelog.txt
@@ -1,5 +1,6 @@
 ### [Unreleased]
 #### Added
+- Display event picture if available
 #### Changed
 #### Deprecated
 #### Removed
diff --git a/source/front/events-displayer.js b/source/front/events-displayer.js
index d6ca9d0..c00b723 100644
--- a/source/front/events-displayer.js
+++ b/source/front/events-displayer.js
@@ -1,5 +1,5 @@
 import Formatter from './formatter.js'
-import { createAnchorElement } from './html-creator.js'
+import { createAnchorElement, createImageElement } from './html-creator.js'
 
 export function clearEventsList(container) {
   const list = container.querySelector('ul')
@@ -18,9 +18,19 @@ export function displayEvents({ events, document, container, maxEventsCount }) {
   const list = container.querySelector('ul')
   for (let i = 0; i < eventsCount; i++) {
     const li = document.createElement('li')
-    // TODO add style
+    li.style.lineHeight = '150%'
+    li.style.marginTop = '20px'
 
-    // TODO add image
+    if (events[i].picture) {
+      const img = createImageElement({
+        document,
+        alt: events[i].picture.alt ? events[i].picture.alt : '',
+        src: events[i].picture.base64 ? events[i].picture.base64 : '',
+      })
+      img.style.display = 'block'
+      img.style.maxWidth = '100%'
+      li.appendChild(img)
+    }
 
     const a = createAnchorElement({
       document,
diff --git a/source/front/html-creator.js b/source/front/html-creator.js
index d64503b..4c04b01 100644
--- a/source/front/html-creator.js
+++ b/source/front/html-creator.js
@@ -5,3 +5,10 @@ export function createAnchorElement({ document, text, url }) {
   a.innerHTML = text
   return a
 }
+
+export function createImageElement({ document, alt, src }) {
+  const img = document.createElement('img')
+  img.setAttribute('alt', alt)
+  img.setAttribute('src', src)
+  return img
+}
diff --git a/source/view/events-list.php b/source/view/events-list.php
index fbab545..0581c5d 100644
--- a/source/view/events-list.php
+++ b/source/view/events-list.php
@@ -11,7 +11,7 @@ if (!defined('ABSPATH')) {
     <?php foreach ($events as $event) { ?>
     <li style="line-height: 150%; margin-top: 20px;">
       <?php if (isset($event['picture'])) { ?>
-      <img alt="<?php echo esc_attr($event['picture']['alt']); ?>" src="<?php echo esc_attr($event['picture']['base64']); ?>" style="display: block;">
+      <img alt="<?php echo esc_attr($event['picture']['alt']); ?>" src="<?php echo esc_attr($event['picture']['base64']); ?>" style="display: block; max-width: 100%;">
       <?php } ?>
       <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html_e($event['title']); ?></a>
       <br>