add background-image to cards

theme/templates/macros/cards.html

 
 {%- macro open(id = None, classes = []) -%}
-	{%- set attr = {"id": id, "classes": classes} -%}
-	<ul {{ common.render_attr(attr, None)}}>
+	{%- set attr = {"id": id, "classes": ["cards"], "extra_classes": classes} -%}
+	<ul {{ common.render_attr(attr, None) }}>
 {%- endmacro -%}
 
 {%- macro close() -%}
@@ -9,7 +9,17 @@
 {%- endmacro -%}
 
 {%- macro card(title, link, catcolor, lang) -%}
-	<li style="--category-color: {{ catcolor }}">{{ common.render_link(link, title, lang) }}</li>
+	{%- set attr = namespace(classes=[], style={"--category-color": catcolor}) -%}
+	{%- set page = link.page -%}
+
+	{%- if page.metadata.has_image -%}
+		{%- set attr.classes = ["has-image"] -%}
+		{%- set imageurl = ["url('", [siteurl, page.metadata.image.link.url]|join("/"), "')"]|join() -%}
+		{#- set imageurl = ["url('", ["http://127.0.0.1:8000/output", page.metadata.image.link.url]|join("/"), "')"]|join() -#}
+		{#- AHHHHHHHHH... Firefox interpretiert relative background-image urls falsch, wenn diese nicht direkt im inline-style sind! -#}
+		{%- set attr.style = {"--category-color": catcolor, "--card-image": imageurl, "background-image": imageurl } -%}
+	{%- endif -%}
+	<li>{{ common.render_link(link, title, lang, attr=attr) }}</li>
 {%- endmacro -%}
 
 {%- macro card_from_link(link, lang) -%}