Merge branch 'images-on-cards' into 'master'

Images on cards

Closes #55

See merge request GAUMI-fginfo/fg-website!20

fgs/pandoc.py

@@ -48,6 +48,7 @@ def run_pandoc(source, factories, lang, base="markdown", extensions=[], extra_ar
         if block != None:
             blocks.append(block)
 
+    elementlist = convert_elements_to_list(blocks)
 
     contentmetadata = {}
     contentmetadata["toc_list"] = []
@@ -56,10 +57,33 @@ def run_pandoc(source, factories, lang, base="markdown", extensions=[], extra_ar
     # TODO TOC
     #contentmetadata["toc"] = build_toc(n["toc_list"].copy())
 
+    # Get all images on page
+    images = []
+    for e in elementlist:
+        if e.etype == "image":
+            images.append(e)
+    contentmetadata["images"] = images
+    contentmetadata["has_image"] = (len(images) > 0)
+    if contentmetadata["has_image"]:
+        contentmetadata["image"] = images[0]
+
+
+
     #blocks = json.loads(json.dumps(blocks, cls=ElementEncoder)) # Reduce to 'simple' dict, which can be converted to JSON in Jinja2.
 
     return (blocks, contentmetadata)
 
+
+def convert_elements_to_list(elements):
+    res = []
+    for element in elements:
+        res.append(element)
+        res += convert_elements_to_list(element.children)
+    return res
+
+
+
+
 def parse_from_register(factories, lang, reg: dict, h: dict, custom_syntax_handler):
     t = h['t'] # pandoc type
     if t not in reg:

theme/static/css/main.css

@@ -297,10 +297,12 @@ a {
 	text-decoration: none;
 }
 a:focus,
-a:hover {
+a:hover,
+a:focus *,
+a:hover * {
 	text-decoration: underline;
 }
-a.external::after {
+a.external span::after {
 	/* content: '↪'; */
 	/* content: '🡕'; */
 	content: '⤤';
@@ -309,10 +311,10 @@ a.external::after {
 	background-position: center center;
 	background-size: cover;*/
 }
-a.external[href^="mailto:"]::after {
+a.external[href^="mailto:"] span::after {
 	content: '';
 }
-a.external[href^="mailto:"]::before {
+a.external[href^="mailto:"] span::before {
 	content: '📧';
 }
 
@@ -521,7 +523,7 @@ ul.cards li a {
 	display: inline-block;
 	width:  calc(100% - 1.3rem );
 	height: calc(100% - 1.3rem );
-	padding: 0.5rem;
+	/* padding: 0.5rem; */
 	transition: all 0.2s;
 	/* padding: 1rem; */
 	/*width:  var(--card-size);
@@ -530,13 +532,51 @@ ul.cards li a {
 	background-color: var(--category-color);
 	/* text-align: center; */
 	border: 0.2rem solid var(--category-color);
+	line-height: 2rem;
+	/* font-size: large; */
 }
 ul.cards li a:focus,
 ul.cards li a:hover {
 	background-color: var(--category-contrast-color);
 	color: var(--category-color);
 }
+ul.cards li a span {
+	display: inline-block;
+	/*position: relative;
+	top: 0.5rem;
+	left: 0rem;*/
+	padding: 0rem 0.5rem;
+	/*padding-top: 0.5rem;
+	padding-left: 0.5rem;*/
+}
+
+ul.cards li a.has-image {
+	/* background-image: var(--card-image); */
+	background-origin: border-box;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-blend-mode: normal;
+	/* background-blend-mode: luminosity; */
+	/* background-blend-mode: overlay; */
+	/* background-blend-mode: multiply; */
+}
+ul.cards li a.has-image:focus,
+ul.cards li a.has-image:hover {
+	color: var(--category-contrast-color);
+	background-color: var(--category-color);
+	background-blend-mode: overlay;
+}
 
+ul.cards li a.has-image:focus span,
+ul.cards li a.has-image:hover span {
+	/* border-radius: 0.3rem; */
+	/* font-weight: bold; */
+}
+
+ul.cards li a.has-image span {
+	background-color: var(--category-color);
+}
 
 
 

theme/templates/macros/cards.html

 
-{%- macro open(id = None, classes = None) -%}
-	<ul {%- if id %} id="{{ id|e }}"{% endif %} class="cards {%- if classes %}{% for class in classes %} {{ class|e }}{% endfor %}{% endif %}">
+{%- macro open(id = None, classes = []) -%}
+	{%- set attr = {"id": id, "classes": ["cards"], "extra_classes": classes} -%}
+	<ul {{ common.render_attr(attr, None) }}>
 {%- endmacro -%}
 
 {%- macro close() -%}
@@ -8,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) -%}