update profile vcard to implement the cover image

images/default_cover_photos/hubzilla/cover.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="cover.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.094804191"
+     inkscape:cx="2019.9529"
+     inkscape:cy="-1128.6421"
+     inkscape:window-width="1440"
+     inkscape:window-height="831"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#c83771;stroke-width:0.264999;stop-color:#000000"
+       id="rect111"
+       width="1200"
+       height="435"
+       x="-554.39471"
+       y="-88.229851"
+       inkscape:export-filename="1200.png"
+       inkscape:export-xdpi="25.4"
+       inkscape:export-ydpi="25.4" />
+    <path
+       d="m -49.632961,-275.98711 c 41.1402495,20.31029 79.11616,59.36325 98.93794,101.55051 7.83678,18.87322 16.06483,37.48582 14.3668,81.305955 -1.47011,39.509911 -4.24319,55.052081 -16.55487,81.239731 -32.58551,69.55035 -96.71568,116.048784 -169.958999,120.815394 l -39.57518,2.67788 -13.87676,55.05207 c -11.6583,45.84517 -12.73334,61.25731 -12.73334,61.25731 13.22338,14.04083 43.26374,22.72602 55.83374,55.24839 17.14367,33.14275 15.18352,80.19576 -6.72376,107.42783 -35.85241,44.40762 -89.30435,57.73041 -136.35923,33.17565 -42.7737,-22.46543 -65.209,-78.0407 -51.85267,-126.69371 3.19853,-12.30971 -0.52422,-16.06441 -51.85267,-49.72982 l -55.60961,-36.89738 -20.30802,16.58754 c -96.74987,77.518 -238.46531,9.07684 -237.90689,-115.46082 0,-80.195794 63.67052,-142.692854 145.40021,-142.203044 41.14405,0 65.76362,9.07782 96.22944,36.8983604 l 22.4315,20.3093396 49.72918,-25.1422396 50.2876,-24.5881204 -5.35621,-17.63249 c -7.51009,-26.18712 -5.87664,-84.439736 3.20233,-113.860256 10.18439,-35.26497 41.72905,-79.11751 71.67065,-101.02734 60.96202,-44.96317 144.32516,-52.99608 210.609209,-20.34315 z m -367.344829,453.22173 111.44335,76.60315 c 0,0 33.8277,-28.50571 79.67458,-32.52188 l 28.53606,-121.14186 c 0,0 -88.16094,-28.539064 -113.14139,-90.4486536 L -413.74508,58.704806 c 0,0 24.42204,60.995264 -3.19853,118.464054 z"
+       id="path11720"
+       style="fill:#a02c5a;stroke-width:0.264582"
+       inkscape:export-filename="/home/mario/path11720.png"
+       inkscape:export-xdpi="270"
+       inkscape:export-ydpi="270" />
+    <path
+       d="m 692.60113,-48.906947 c 25.73115,12.703053 49.48314,37.128692 61.88066,63.514677 4.90151,11.80424 10.04773,23.445476 8.9857,50.852742 -0.91949,24.711441 -2.65391,34.432268 -10.35423,50.811388 -20.38058,43.5002 -60.49073,72.58261 -106.30069,75.56387 l -24.75227,1.67488 -8.67921,34.43227 c -7.29166,28.67381 -7.96405,38.31334 -7.96405,38.31334 8.27056,8.78182 27.05927,14.21395 34.92115,34.55505 10.7225,20.72909 9.49652,50.15836 -4.20536,67.19064 -22.42386,27.7747 -55.85532,36.10743 -85.28576,20.74967 -26.75277,-14.05098 -40.7849,-48.81048 -32.43119,-79.24046 2.00051,-7.69911 -0.32789,-10.04748 -32.4312,-31.10347 l -34.78099,-23.07744 -12.70164,10.37467 c -60.5121,48.48356 -149.14791,5.6771 -148.79864,-72.21488 0,-50.15837 39.82267,-89.24713 90.94043,-88.94078 25.73351,0 41.13179,5.67774 60.18661,23.07808 l 14.02977,12.70246 31.10306,-15.7252 31.45233,-15.37861 -3.35004,-11.028315 c -4.69717,-16.378699 -3.67553,-52.812744 2.00291,-71.213777 6.3698,-22.0564475 26.09939,-49.483992 44.82634,-63.187472 38.12863,-28.122168 90.26804,-33.146349 131.72533,-12.723604 z m -229.75547,283.467197 69.70213,47.91138 c 0,0 21.15752,-17.82888 49.8324,-20.34079 l 17.84786,-75.76806 c 0,0 -55.14019,-17.84973 -70.76418,-56.57102 l -64.59631,30.63414 c 0,0 15.27474,38.14942 -2.00053,74.09323 z"
+       id="path11720-7"
+       style="fill:#a02c5a;stroke-width:0.264582"
+       inkscape:export-filename="/home/mario/path11720.png"
+       inkscape:export-xdpi="270"
+       inkscape:export-ydpi="270" />
+  </g>
+</svg>

include/channel.php

@@ -1583,6 +1583,10 @@ function profile_sidebar($profile, $block = 0, $show_connect = true, $details =
 	$reddress = true;
 	$connect_url = '';
 	$connect = '';
+	$default_cover = get_config('system', 'default_cover_photo', 'hubzilla');
+	$default_cover_url = z_root() . '/images/default_cover_photos/' . $default_cover . '/425.png';
+
+
 
 	if(! perm_is_allowed($profile['uid'], $observer_hash, 'view_profile')) {
 		$block = true;
@@ -1681,9 +1685,11 @@ function profile_sidebar($profile, $block = 0, $show_connect = true, $details =
 		'$homepage'      => $homepage,
 		'$chanmenu'      => $channel_menu,
 		'$reddress'      => $reddress,
+		'$no_pdesc'      => t('This channel has not added a profile description yet'),
 		'$contact_block' => $contact_block,
 		'$change_photo'  => t('Change your profile photo'),
-		'$editmenu'      => profile_edit_menu($profile['uid'])
+		'$editmenu'      => profile_edit_menu($profile['uid']),
+		'$cover'         => get_cover_photo($profile['uid'], 'array', PHOTO_RES_COVER_425) ?: ['url' => $default_cover_url]
 	));
 
 	$arr = [
@@ -2404,7 +2410,7 @@ function get_zcard($channel, $observer_hash = '', $args = array()) {
 		$cover = $r[0];
 		$cover['href'] = z_root() . '/photo/' . $r[0]['resource_id'] . '-' . $r[0]['imgscale'];
 	} else {
-		$default_cover = get_config('system','default_cover_photo','bggenerator');
+		$default_cover = get_config('system', 'default_cover_photo', 'hubzilla');
 		$cover = [ 'href' => z_root() . '/images/default_cover_photos/' . $default_cover . '/' . $cover_width . '.png' ];
 	}
 
@@ -2478,7 +2484,7 @@ function get_zcard_embed($channel, $observer_hash = '', $args = array()) {
 		$cover['href'] = z_root() . '/photo/' . $r[0]['resource_id'] . '-' . $r[0]['imgscale'];
 	}
 	else {
-		$default_cover = get_config('system','default_cover_photo','bggenerator');
+		$default_cover = get_config('system', 'default_cover_photo', 'hubzilla');
 		$cover = [ 'href' => z_root() . '/images/default_cover_photos/' . $default_cover . '/' . $cover_width . '.png' ];
 	}
 

view/css/widgets.css

@@ -231,6 +231,30 @@ a.wikilist {
 	display: none !important;
 }
 
+/* vcard */
+
+.vcard-card {
+	background-color: rgba(var(--bs-body-bg-rgb), .7);
+}
+
+.vcard {
+	word-wrap: break-word;
+}
+
+.profile-edit-side-link {
+	opacity: 0;
+	filter:alpha(opacity=0);
+}
+
+.card:hover .profile-edit-side-link {
+	opacity: 1;
+	filter:alpha(opacity=100);
+}
+
+#profile-cover-text {
+	background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+}
+
 /* contact block */
 .contact-block-div .oneway-overlay {
 	font-size: .9rem;

view/theme/redbasic/css/style.css

@@ -404,29 +404,6 @@ footer {
 	margin-bottom: 10px;
 }
 
-.fn {
-	font-weight: bold;
-	font-size: 1rem;
-}
-
-.vcard-card {
-	background-color: rgba(var(--bs-body-bg-rgb), .7);
-}
-
-.vcard {
-	word-wrap: break-word;
-}
-
-.profile-edit-side-link {
-	opacity: 0;
-	filter:alpha(opacity=0);
-}
-
-.card:hover .profile-edit-side-link {
-	opacity: 1;
-	filter:alpha(opacity=100);
-}
-
 #hide-friends-yes-label,
 #hide-friends-no-label {
 	margin-left: 125px;

view/tpl/profile_vcard.tpl

@@ -1,15 +1,23 @@
 <div class="rounded mb-3 vcard-card h-card">
 	<div class="card mb-2">
-		<div class="row">
-			<div class="col-4" style="width: fit-content;">
-				<div id="profile-photo-wrapper">
-					<img class="rounded-start u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
+		<div id="profile-cover-wrapper" class="position-relative">
+			<img class="img-fluid rounded-top" src="{{$cover.url}}" alt="" style="">
+			{{if $connect}}
+			<a href="{{$connect_url}}" class="btn btn-success btn-sm m-2 position-absolute end-0" rel="nofollow">
+				<i class="fa fa-plus"></i> {{$connect}}
+			</a>
+			{{/if}}
+			<div id="profile-cover-text" class="p-2 position-absolute bottom-0 w-100">
+				<div class="text-truncate h3 lh-sm">
+					<strong class="text-white fn p-name">{{$profile.fullname}}{{if $profile.online}}<i class="fa fa-fw fa-asterisk text-danger ps-2" title="{{$profile.online}}"></i>{{/if}}</strong>
+				</div>
+				<div class="text-truncate">
+					<span class="text-white p-adr">{{$profile.reddress}}</span>
 				</div>
 			</div>
-			<div class="col-7 m-1 p-0">
 			{{if $editmenu.multi}}
-				<div class="dropdown float-end">
-					<a class="profile-edit-side-link float-end" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
+			<div class="dropdown position-absolute bottom-0 end-0 m-2">
+				<a class="profile-edit-side-link text-white" data-bs-toggle="dropdown" href="#" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
 				<div class="dropdown-menu dropdown-menu-end" role="menu">
 					{{foreach $editmenu.menu.entries as $e}}
 					<a href="profiles/{{$e.id}}" class="dropdown-item"><img class="menu-img-1" src='{{$e.photo}}'> {{$e.profile_name}}</a>
@@ -20,30 +28,26 @@
 				</div>
 			</div>
 			{{elseif $editmenu}}
-				<a class="profile-edit-side-link float-end" href="{{$editmenu.edit.0}}" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
-				{{/if}}
-
-				<div class="text-truncate lh-sm">
-					<strong class="fn p-name">{{$profile.fullname}}{{if $profile.online}}<i class="fa fa-fw fa-asterisk text-danger ps-2" title="{{$profile.online}}"></i>{{/if}}</strong>
-				</div>
-				<div class="text-truncate">
-					<span class="text-muted p-adr">{{$profile.reddress}}</span>
-				</div>
-				{{if $connect}}
-				<div class="mt-2">
-					<a href="{{$connect_url}}" class="btn btn-success btn-sm" rel="nofollow">
-						<i class="fa fa-plus"></i> {{$connect}}
-					</a>
+			<div class="position-absolute bottom-0 end-0 m-2">
+				<a class="profile-edit-side-link text-white" href="{{$editmenu.edit.0}}" ><i class="fa fa-pencil" title="{{$editmenu.edit.1}}"></i></a>
 			</div>
 			{{/if}}
 		</div>
+		<div class="d-flex justify-content-start">
+			<div class="rounded rounded-end-0 rounded-top-0">
+				<img class="rounded rounded-end-0 rounded-top-0 u-photo" src="{{$profile.photo}}?rev={{$profile.picdate}}" alt="{{$profile.fullname}}" style="width: 6rem; height:6rem;">
+			</div>
+			{{if $profile.pdesc}}
+			<div class="m-2 text-break">{{$profile.pdesc}}</div>
+			{{else}}
+			<div class="m-2">
+			<span class="opacity-50">{{$no_pdesc}}</span>
+			</div>
+			{{/if}}
 		</div>
 	</div>
 	{{if $details}}
 	<div class="vcard ps-2 pe-2">
-		{{if $profile.pdesc}}
-		<div class="mb-2">{{$profile.pdesc}}</div>
-		{{/if}}
 		{{if $location}}
 		<dl class="mb-0 pb-1">
 			<dt class="location-label">{{$location}}</dt>