Add support for preview images #2

content/subprojects/blog/index.md

@@ -4,6 +4,8 @@ title = "Blogs"
 description = "Duckling offers the blogs feature borrowed from Duckquill 🦆"
 [taxonomies]
 tags = ["Demo", "Test"]
+[extra]
+preview = "duckling.jpg"
 +++
 
 Check out the [sample blog](/blog) to see the blogging feature in action!

content/subprojects/docs/index.md

@@ -5,7 +5,7 @@ description = "No need for a separate documentation page - coming soon!"
 [taxonomies]
 tags = ["Demo", "Test"]
 [extra]
-featured = true
+preview = "pond.jpg"
 +++
 
 This feature is not yet implemented. Coming soon!

content/subprojects/subproject/index.md

@@ -4,6 +4,8 @@ title = "Subprojects"
 description = "Showcase parts of your project!"
 [taxonomies]
 tags = ["Demo", "Test"]
+[extra]
+preview = "duckling.jpg"
 +++
 
 I'm an example for a subproject!

sass/_article-list.scss

@@ -2,6 +2,12 @@
 	flex-direction: column;
 }
 
+#article-list {
+	article {
+		padding: 1.5rem;
+	}
+}
+
 #article-list, #subproject-list {
 	display: flex;
 	gap: 1rem;
@@ -11,11 +17,10 @@
 		--bg-overlay: var(--accent-color-alpha);
 		position: relative;
 		transition: var(--transition);
-		border-radius: var(--rounded-corner);
 		background-position: center;
 		background-size: cover;
 		background-color: var(--fg-contrast-soft);
-		padding: 1.5rem;
+		border-radius: var(--rounded-corner);
 		overflow: hidden;
 
 		&:hover {

sass/_media.scss

@@ -103,7 +103,7 @@ video {
 	}
 }
 
-img {
+img:not(.preview) {
 	transition: var(--transition-longer);
 
 	&:not(

sass/_subproject-list.scss

@@ -6,6 +6,19 @@
 		width: calc(50% - 0.5rem);
 		min-width: 300px;
 		flex-grow: 1;
+
+		img {
+			margin: 0;
+			border-bottom-left-radius: 0px;
+			border-bottom-right-radius: 0px;
+			box-shadow: none;
+			object-fit: cover;
+			height: 200px;
+			width: 100%;
+		}
+
+		#subproject-info {
+			padding: 1.5rem;
+		}
 	}
 }
-

templates/partials/subprojects.html

@@ -24,10 +24,15 @@
 					{{- article_string -}}
 				</span>
 			{%- endif %}
-			<h3>{{ page.title }}</h3>
+			{%- if page.extra.preview -%}
-			{%- if page.description %}
+				<img class="preview" src="{{ current_url ~ page.slug ~ "/" ~ page.extra.preview }}" {% if config.markdown.lazy_async_image %}decoding="async" loading="lazy"{% endif %} />
-				{{ page.description | markdown | safe }}
+			{%- endif -%}
-			{%- endif %}
+			<div id="subproject-info">
+				<h3>{{ page.title }}</h3>
+				{%- if page.description %}
+					{{ page.description | markdown | safe }}
+				{%- endif %}
+			 </div>
 		</article>
 	{%- endfor %}
 </div>