feat: show images in kanban

frappe/public/js/frappe/list/list_view.js

@@ -957,6 +957,15 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		)}'></span>`;
 	}
 
+	get_image_url(doc) {
+		let url = doc.image ? doc.image : doc[this.meta.image_field];
+		// absolute url for mobile
+		if (window.cordova && !frappe.utils.is_url(url)) {
+			url = frappe.base_url + url;
+		}
+		return url || null;
+	}
+
 	setup_events() {
 		this.setup_filterable();
 		this.setup_list_click();

frappe/public/js/frappe/views/image/image_view.js

@@ -142,20 +142,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
 		`;
 	}
 
-	get_image_url(data) {
-		var url;
-		url = data.image ? data.image : data[this.meta.image_field];
-
-		// absolute url for mobile
-		if (window.cordova && !frappe.utils.is_url(url)) {
-			url = frappe.base_url + url;
-		}
-		if (url) {
-			return url;
-		}
-		return null;
-	}
-
 	get_attached_images() {
 		return frappe
 			.call({

frappe/public/js/frappe/views/kanban/kanban_board.js

@@ -608,6 +608,7 @@ frappe.provide("frappe.views");
 				title: remove_img_tags(card.title),
 				disable_click: card._disable_click ? 'disable-click' : '',
 				creation: card.creation,
+				image_url: cur_list.get_image_url(card),
 			};
 			self.$card = $(frappe.render_template('kanban_card', opts))
 				.appendTo(wrapper);
@@ -705,6 +706,7 @@ frappe.provide("frappe.views");
 			title: card[state.card_meta.title_field.fieldname],
 			creation: moment(card.creation).format('MMM DD, YYYY'),
 			_liked_by: card._liked_by,
+			image: card[cur_list.meta.image_field],
 			tags: card._user_tags,
 			column: card[state.board.field_name],
 			assigned_list: card.assigned_list || assigned_list,

frappe/public/js/frappe/views/kanban/kanban_card.html

@@ -1,16 +1,23 @@
 <div class="kanban-card-wrapper {{ disable_click }}" data-name="{{escape(name)}}">
 	<a class="kanban-card-redirect" href="#">
 		<div class="kanban-card content">
-			<div class="kanban-title-area">
-				<div class="kanban-card-title" title="{{title}}">
-					{{ title }}
+			{% if(image_url) { %}
+			<div class="kanban-image">
+				<img  src="{{image_url}}" alt="{{title}}">
+			</div>
+			{% } %}
+			<div class="kanban-card-body">
+				<div class="kanban-title-area">
+					<div class="kanban-card-title ellipsis" title="{{title}}">
+						{{ title }}
+					</div>
+					<div class="kanban-card-creation">
+						{{ creation }}
+					</div>
 				</div>
-				<div class="kanban-card-creation">
-					{{ creation }}
+				<div class="kanban-card-meta">
 				</div>
 			</div>
-			<div class="kanban-card-meta">
-			</div>
 		</div>
 	</a>
 </div>

frappe/public/scss/common/mixins.scss

@@ -37,6 +37,38 @@
 	background-color: var(--bg-light-gray);
 }
 
+@mixin broken-img(
+	$content: null,
+	$height: 100%,
+	$top: 0,
+	$left: 0,
+	$background-color: var(--bg-color),
+	$border-radius: var(--border-radius),
+) {
+
+	@if $content {
+		img:after {
+			content: url($content);
+		}
+	} @else {
+		img:after {
+			content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
+		}
+	}
+
+	img[alt]:after {
+		height: $height;
+		top: $top;
+		left: $left;
+		background-color: $background-color;
+		border-radius: $border-radius;
+		width: 100%;
+		position: absolute;
+		@include flex();
+		z-index: 1;
+	}
+}
+
 // @mixin img-foreground() {
 // 	content: "\f1c5";
 // 	display: block;

frappe/public/scss/desk/file_view.scss

@@ -98,21 +98,10 @@
 						position: relative;
 					}
 
-					img:after {
-						content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
-					}
-
-					img[alt]:after {
-						height: 70px;
-						@include flex();
-						position: absolute;
-						z-index: 1;
-						top: -15px;
-						left: 0px;
-						width: 100%;
-						background-color: var(--bg-color);
-						border-radius: var(--border-radius);
-					}
+					@include broken-img(
+						$height: 70px,
+						$top: -15px,
+					);
 				}
 			}
 

frappe/public/scss/desk/image_view.scss

@@ -154,20 +154,10 @@
 				width: 100%;
 			}
 
-			img:after {
-				content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
-			}
-
-			img[alt]:after {
-				height: 175px;
-				@include flex();
-				position: absolute;
-				z-index: 1;
-				top: 0;
-				left: 0;
-				width: 100%;
-				background-color: var(--bg-color);
-			}
+			@include broken-img(
+				$height: 175px,
+				$border-radius: 0
+			);
 		}
 
 		.image-title {

frappe/public/scss/desk/kanban.scss

@@ -153,13 +153,15 @@
 
 		.kanban-card {
 			@include flex(flex, space-between, null, column);
-
+			margin-top: var(--margin-sm);
+			min-height: 100px;
 			@include card(
-				$padding: var(--padding-sm) var(--padding-md),
+				$padding: 0,
 				$background-color: var(--kanban-card-bg)
 			);
-			margin-top: var(--margin-sm);
-			min-height: 100px;
+			.kanban-card-body {
+				padding: var(--padding-sm);
+			}
 		}
 	}
 
@@ -211,6 +213,27 @@
 		}
 	}
 
+	.kanban-image {
+		height: 125px;
+
+		img {
+			border-radius: var(--border-radius) var(--border-radius) 0 0;
+			object-position: top;
+			object-fit: cover;
+			margin: 0 auto;
+			height: 100%;
+			width: 100%;
+			min-width: 100%;
+			color: transparent;
+			position: relative;
+		}
+
+		@include broken-img(
+			$height: 125px,
+			$top: -4px,
+		)
+	}
+
 	.kanban-card-edit {
 		position: absolute;
 		right: 10px;
@@ -289,6 +312,7 @@
 				height: 22px;
 				width: auto;
 				padding: 2px 8px;
+				margin-bottom: var(--margin-xs);
 				margin-right: var(--margin-xs);
 			}
 		}

frappe/public/scss/website/website_image.scss

@@ -4,36 +4,10 @@ img {
 	position: relative;
 }
 
-// fallback for broken images
-// img:after {
-// 	content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
-// 	display: flex;
-// 	justify-content: center;
-// 	align-items: center;
-// 	position: absolute;
-// 	z-index: 1;
-// 	top: 0;
-// 	left: 0;
-// 	width: 100%;
-// 	height: 100%;
-// 	background-color: $light;
-// 	padding: 50% 0;
-// }
-
-img:after {
-	content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='lightgrey' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>");
-}
-
-img[alt]:after {
-	height: 175px;
-	@include flex();
-	position: absolute;
-	z-index: 1;
-	top: 0;
-	left: 0;
-	width: 100%;
-	background-color: var(--bg-color);
-}
+@include broken-img(
+	$height: 175px,
+	$border-radius: 0,
+);
 
 .website-image-placeholder {
 	display: flex;