src/subreddit.rs

@@ -469,6 +469,10 @@ async fn subreddit(sub: &str, quarantined: bool) -> Result<Subreddit, String> {
 	let community_icon: &str = res["data"]["community_icon"].as_str().unwrap_or_default();
 	let icon = if community_icon.is_empty() { val(&res, "icon_img") } else { community_icon.to_string() };
 
+	// Fetch subreddit banner either from the banner_background_image or banner_img value
+	let banner_background_image: &str = res["data"]["banner_background_image"].as_str().unwrap_or_default();
+	let banner = if banner_background_image.is_empty() { val(&res, "banner_img") } else { banner_background_image.to_string() };
+
 	Ok(Subreddit {
 		name: val(&res, "display_name"),
 		title: val(&res, "title"),
@@ -476,6 +480,7 @@ async fn subreddit(sub: &str, quarantined: bool) -> Result<Subreddit, String> {
 		info: rewrite_urls(&val(&res, "description_html")),
 		// moderators: moderators_list(sub, quarantined).await.unwrap_or_default(),
 		icon: format_url(&icon),
+		banner: format_url(&banner),
 		members: format_num(members),
 		active: format_num(active),
 		wiki: res["data"]["wiki_enabled"].as_bool().unwrap_or_default(),

src/utils.rs

@@ -585,6 +585,7 @@ pub struct Subreddit {
 	pub info: String,
 	// pub moderators: Vec<String>,
 	pub icon: String,
+	pub banner: String,
 	pub members: (String, String),
 	pub active: (String, String),
 	pub wiki: bool,

static/style.css

@@ -499,7 +499,7 @@ aside {
     height: 100px;
     border: 2px solid var(--accent);
     border-radius: 100%;
-    padding: 10px;
+    padding: 0px;
     margin: 10px;
 }
 

templates/subreddit.html

@@ -100,8 +100,14 @@
 					<a href="/r/{{ sub.name }}/wiki/index">Wiki</a>
 				</div>
 				{% endif %}
-				<div id="sub_meta">
+				{% block head %}
+					{% call super() %}
+					<link rel="preload" as="image" href="{{ sub.banner }}">
+				{% endblock %}
+				<div style="background: linear-gradient(to bottom, rgba(255,255,255,0) 10%, var(--outside)), url({{ sub.banner }});background-size: 100%;background-size: cover;background-position: center center;" id="iconbanner">
 					<img loading="lazy" id="sub_icon" src="{{ sub.icon }}" alt="Icon for r/{{ sub.name }}">
+				</div>
+				<div id="sub_meta">
 					<h1 id="sub_title">{{ sub.title }}</h1>
 					<p id="sub_name">r/{{ sub.name }}</p>
 					{% if crate::utils::enable_rss() %}