Display article covers

plume-models/src/posts.rs

@@ -526,7 +526,8 @@ impl Post {
             "url": format!("/~/{}/{}/", blog.get_fqn(conn), self.slug),
             "date": self.creation_date.timestamp(),
             "blog": blog.to_json(conn),
-            "tags": Tag::for_post(&*conn, self.id)
+            "tags": Tag::for_post(&*conn, self.id),
+            "cover": self.cover_id.and_then(|i| Media::get(conn, i).map(|m| m.to_json(conn))),
         })
     }
 

static/css/main.css

@@ -193,6 +193,18 @@ header nav a.title p {
  main .article-info .author { font-weight: 600; }
  main .article-info .author a { font-weight: 600; }
 
+ /* Cover */
+
+ main > .cover {
+    padding: 0px;
+    margin: 0px;
+    width: auto;
+    min-height: 50vh;
+    background-position: center;
+    background-size: cover;
+    overflow: hidden;
+ }
+
  /* Article */
 
  main article {
@@ -624,13 +636,15 @@ form.inline input[type="submit"]:not(.button) {
  	min-width: 17.5em;
  	min-height: 17.5em;
  	margin: 1em;
- 	padding: 1em;
  	box-sizing: border-box;
 
  	background: #E3E3E3;
 
  	text-overflow: ellipsis;
  }
+ .card > * {
+    margin: 20px;
+ }
  .list .card {
  	/* TODO */
  	background: 0;
@@ -641,10 +655,18 @@ form.inline input[type="submit"]:not(.button) {
 
  /* ~ Card content ~ */
 
+ /* Cover */
+ .card .cover {
+    min-height: 10em;
+    background-position: center;
+    background-size: cover;
+    margin: 0px;
+ }
+
  /* Title */
 
  .card h3 {
- 	margin: 0.75em 0;
+ 	margin: 0.75em 20px;
  	font-family: "Playfair Display", serif;
  	font-size: 1.75em;
  	font-weight: normal;

templates/macros.html.tera

@@ -1,5 +1,8 @@
 {% macro post_card(article) %}
     <div class="card">
+        {% if article.cover %}
+            <div class="cover" style="background-image: url('{{ article.cover.url }}')"></div>
+        {% endif %}
         <h3><a href="{{ article.url }}">{{ article.post.title }}</a></h3>
         <main>
             <p>

templates/posts/details.html.tera

@@ -35,6 +35,9 @@
             <span class="badge">{{ "Draft" }}</span>
         {% endif %}
     </div>
+    {% if article.cover %}
+        <div class="cover" style="background-image: url('{{ article.cover.url }}')"></div>
+    {% endif %}
     <article>
         {{ article.post.content | safe }}
     </article>