Would you be able to implement a more visual aspect for the FileManagement so it look close to this picture.
Attach is the modified Kendo.all.min.js file that you may want to alter so it becomes a permanent in you repository. Changes made for those following :
* Changed:
* template:
* var i
* singleFileTemplate
The style sheet for the effects:
/* 5.7.3 - Filemanager Image Grid View */
.FileManagerImgGridView {
display: flex;
justify-content: start;
align-items: center;
gap: 10px;
cursor: zoom-in;
}
/* 5.7.4 - Filemanager Image List View */
.FileManagerImgListView {
cursor: zoom-in;
max-width: 115px;
box-shadow: 0 0 10px rgba(0,0,0,0.4);
transition-duration: .5s;
}
.FileManagerImgListView:hover {
transition-duration: .5s;
transform: translateY(5px) scale(1.75);
border-radius: 3px;
z-index: 100;
}
/* 5.7.5 - Filemanager Image Detail */
.FileManagerImgDetail {
max-height: 280px;
max-width: 280px;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
cursor: pointer;
transition-duration: .5s;
}
.FileManagerImgDetail:hover {
transition-duration: .5s;
transform: scale(1.2);
max-width: 80%;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.FileManagerImgDownloadLink {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
padding: 5px 10px;
border-radius: 10px;
color: var(--bs-primary-inverted);
background-color: var(--bs-primary);
box-shadow: 0 0 10px rgba(0 0 0 /.7);
gap: 5px;
}
.FileManagerImgDownloadLink a {
text-decoration: none;
color: var(--bs-primary-inverted);
}also here is the C# Thumbnail Class that can be modified if you intend to have you own fabrication of thumbnail as it use to be years ago :-)
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Processing;
public virtual IActionResult Thumbnail(string path)
{
var virtualPath = Path.Combine(_thumbnailFolderRoot);
var physicalPath = Path.Combine(ConstantVar.webEnv.WebRootPath, virtualPath.Replace('/', '\\'));
path = Path.Combine(physicalPath, path);
FileInfo imageInfo = new FileInfo(path);
int width = 75;
int height = 75;
bool KeepRatio = true;
using (Image image = Image.Load(imageInfo.FullName))
{
// Figure out the ratio
double ratioX = (double)width / (double)image.Width;
double ratioY = (double)height / (double)image.Height;
// use whichever multiplier is smaller
double ratio = ratioX < ratioY ? ratioX : ratioY;
int newHeight = height;
int newWidth = width;
if (KeepRatio)
{
// now we can get the new height and width
newHeight = Convert.ToInt32(image.Height * ratio);
newWidth = Convert.ToInt32(image.Width * ratio);
}
image.Mutate(s => s.Resize(width: newWidth, height: newHeight));
using (var ms = new MemoryStream())
{
image.SaveAsJpeg(ms);
return File(ms.ToArray(), "image/jpg");
}
}
}
We can easily add a photo image with only face in it.
The request is to add an option in the avatar to detect face from a full body image and auto zoom in to the face to create an avatar from the image provided. This can be controlled using an option in the avatar settings.