diff --git a/templates/patterns/news_ticker/news_ticker.ui_patterns.yml b/templates/patterns/news_ticker/news_ticker.ui_patterns.yml index 0d169fdbd..c6e5a0a59 100644 --- a/templates/patterns/news_ticker/news_ticker.ui_patterns.yml +++ b/templates/patterns/news_ticker/news_ticker.ui_patterns.yml @@ -15,12 +15,20 @@ news_ticker: - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" link: "http://example.com" external_link: TRUE + image: + path: 'https://loremflickr.com/800/600/rome' + alt: 'Example alt text' + title: 'image title' + icon: "clock" - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" link: "http://example.com" + icon: "clock" - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" link: "http://example.com" + icon: "clock" - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum" link: "http://example.com" + icon: "clock" - content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium" link: "http://example.com" external_link: TRUE diff --git a/templates/patterns/news_ticker/pattern-news-ticker.html.twig b/templates/patterns/news_ticker/pattern-news-ticker.html.twig index 2f12f6699..5a63c819e 100644 --- a/templates/patterns/news_ticker/pattern-news-ticker.html.twig +++ b/templates/patterns/news_ticker/pattern-news-ticker.html.twig @@ -6,14 +6,27 @@ #} {% set _items = [] %} {% for _item in items %} + {% set _img = [] %} + {% set _icon = { + name: _item.icon|default('information'), + path: ecl_icon_path, + } %} + + {% if _item.image is not empty %} + {% set _img = { + path: _item.image.path|default(''), + alt: _item.image.alt|default(''), + title: _item.image.title|default(''), + } %} + {% set _icon = []%} + {% endif %} + {% set _items = _items|merge([{ content: _item.content, link: _item.link, external: _item.external_link|default(false), - icon: { - path: ecl_icon_path, - name: 'information', - } + icon: _icon, + img: _img, }]) %} {% endfor %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 7f82a304c..45f3b3d48 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3619,7 +3619,13 @@ - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" link: "http://example.com" external_link: TRUE + image: + path: 'https://loremflickr.com/800/600/rome' + alt: 'Example alt text' + title: 'image title' + icon: "clock" - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" + icon: "clock" - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur" link: "http://example.com" - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum" @@ -3634,6 +3640,11 @@ assertions: count: div.ecl-news-ticker: 1 + img.ecl-news-ticker__icon: 1 + svg.ecl-news-ticker__icon: 5 + img.ecl-news-ticker__icon[src="https://loremflickr.com/800/600/rome"]: 1 + img.ecl-news-ticker__icon[alt="Example alt text"]: 1 + img.ecl-news-ticker__icon[title="image title"]: 1 div.ecl-news-ticker[data-name="data value"]: 1 div.ecl-news-ticker__container: 1 div.ecl-news-ticker__content: 1 @@ -3652,7 +3663,11 @@ equals: li.ecl-news-ticker__slide:nth-child(1) a svg.ecl-link__icon: '