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')) {