Hello, Jetto.NET Community!

In today's topic, we will show how to add user photo on postbit. For those who want to do it with the plugin, you can download the relevant plugin from the link below. For those who want to do it without a plugin, you can follow the steps in our content.

Login or Register to see the download link.

Let's log in to the Admin Panel

After logging into the admin panel, let's create a template group by saying 'Customization -> Template groups -> Add template group'. As an example, you can process as in the picture;

Then, by saying Templates, type 'messageSidebar' in the search field and copy the template. When copying the template, paste the following code in the section I specified. Then copy the template.

<div class="messageAuthorBackground" style="background-image: url({@$userProfile->getCoverPhoto()->getURL()});"></div>

Let's adjust the theme settings

Now we need to apply the template we created to the existing theme. In this 'Customization -> themes-> edit your theme' When editing the theme, there is a Template Group section at the bottom, let's select the template group we created in this section.

Then save the settings.

Let's make CSS settings

Now we need to add our final stage css codes. Follow the 'Customization -> Global CSS and SCSS' steps and add and save the following codes.

/* Postbit arka plan resmi */
@include screen-md-up {
	.messageSidebar {
		.messageAuthorBackground {
			position: absolute; 
			top: 0; 
			left: 0; 
			width: 100%;
			height: 120px;
			background-size: cover;
			background-position: center center;
		}
		.userAvatar {
			margin-top: 30px;
		}
		.userAvatarImage {
			border: 4px $wcfSidebarBackground solid;
		}
	}
}
/* Postbit arka plan resmi */

That's it, you will now be able to show Cover Photos in the user postbit.