diff --git a/theme/templates/macros/cards.html b/theme/templates/macros/cards.html index d604956017cc8aaeda46fccc9a3ead2ae063e44b..ea7e8475053d06d8d0436c118720553c566a79f9 100644 --- a/theme/templates/macros/cards.html +++ b/theme/templates/macros/cards.html @@ -11,12 +11,24 @@ {%- macro card(title, link, catcolor, lang) -%} {%- set attr = namespace(classes=[], style={"--category-color": catcolor}) -%} {%- set page = link.page -%} + {%- set ns = namespace(resolvedimageurl=None) -%} {%- if page.metadata.has_image -%} {%- set attr.classes = ["has-image"] -%} - {%- set imageurl = ["url('", [siteurl, page.metadata.image.link.url]|join("/"), "')"]|join() -%} + + {#- Determine imageurl -#} + {%- set ns.resolvedimageurl = page.metadata.image.link.urlwithanchor -%} + {%- if not page.metadata.image.link.is_external -%} + {%- if page.metadata.image.link.url|length -%} + {%- set ns.resolvedimageurl = [siteurl, ns.resolvedimageurl]|join("/") -%} + {%- endif -%} + {%- endif -%} + {%- set imageurl = ["url('", ns.resolvedimageurl , "')"]|join() -%} + + {#- set imageurl = ["url('", siteurl, "/", page.metadata.image.link.url, "')"]|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>