Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgraded sample project to .NET 8 #371

Merged
merged 7 commits into from
Oct 31, 2024
Merged

upgraded sample project to .NET 8 #371

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ea86dd8
Upgrade project to .NET 8.0 and update dependencies
arya2004 Oct 4, 2024
81c9476
Migrate to .NET 8 minimal hosting model. Combined `Startup.cs` into `…
arya2004 Oct 4, 2024
ee18c1d
Refactor README.md for .NET 8 compatibility
arya2004 Oct 4, 2024
c404785
feat: Enhance UI/UX and integrate Cloudinary settings
arya2004 Oct 6, 2024
cb964e6
Enhance UI and add Markdown support with Markdig
arya2004 Oct 6, 2024
d5d4880
feat: refactored the UI
arya2004 Oct 30, 2024
c942b4b
Enhance photo detail UI and update configuration settings
arya2004 Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 52 additions & 17 deletions samples/PhotoAlbum/Pages/Index.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,63 @@
ViewData["Title"] = "PhotoAlbum - Main page";
}

<h1>Welcome!</h1>
<div class="container mt-5" style="height: 100vh;">
<!-- Welcome Section -->

<div class="card-body text-center" style="font-size: 1.5rem; line-height: 1.8;">
<h1 class="card-title" style="font-size: 3rem; line-height: 1.2;">Welcome to PhotoAlbum!</h1>


<p>
This is the main demo page of the PhotoAlbum sample .NET application of Cloudinary.<br />
Here you can see all images you have uploaded to this .NET application and find some information on how
to implement your own .NET application storing, manipulating and serving your photos using Cloudinary!
</p>
<p>
All of the images you see here are transformed and served by Cloudinary.
For instance, the logo and the poster frame.
They are both generated in the cloud using the Cloudinary shortcut functions: fetch_image_tag and facebook_profile_image_tag.
These two pictures weren't even have to be uploaded to Cloudinary, they are retrieved by the service, transformed, cached and distributed through a CDN.
</p>
<p class="card-text" style="font-size: 1.5rem; line-height: 1.8;">
This is the main demo page of the PhotoAlbum sample .NET application of Cloudinary.<br />
Here, you can see all the images you have uploaded to this .NET application and find some information on how to implement your own .NET application to store, manipulate, and serve your photos using Cloudinary.
</p>
</div>

<h1>Your Photos</h1>
<!-- Cloudinary Info Section -->
<div class="card-body text-center" style="font-size: 1.5rem; line-height: 1.8;">
<h2 style="font-size: 2.5rem; line-height: 1.4;">Cloudinary Image Transformation</h2>
<p style="font-size: 1.5rem; line-height: 1.8;">
All of the images you see here are transformed and served by Cloudinary. For instance, the logo and the poster frame. These images were not even uploaded to Cloudinary—they are retrieved by the service, transformed, cached, and distributed through a CDN.
</p>
<p style="font-size: 1.5rem; line-height: 1.8;">
Cloudinary’s powerful functions like <strong>fetch_image_tag</strong> and <strong>facebook_profile_image_tag</strong> allow you to manipulate images effortlessly.
</p>
</div>

<div class="actions">
<a class="upload_link" asp-page="Upload">Add photo...</a>
<a class="upload_link" asp-page="UploadDirectly" asp-route-type="signed">Add photo (direct upload)...</a>
<a class="upload_link" asp-page="UploadDirectly" asp-route-type="unsigned">Add photo (direct unsigned upload)...</a>
<!-- Call-to-Action Section -->
<div class="text-center mt-4 w-100">
<a href="/Upload" class="btn btn-primary btn-lg">Upload Your Photos Now</a>
</div>
<div id="posterframe mt-1">
<!-- This will render the fetched Facebook profile picture using Cloudinary according to the
requested transformations -->
@Html.Raw(Cloudinary.Api.UrlImgUp.Action("facebook").Format("png")
.Transform(new Transformation()
.Width(95)
.Height(95)
.Crop("thumb")
.Gravity("face")
.Effect("sepia")
.Radius(20)
.Chain() // apply current stack of transformations before processing next
.Angle(10))
.BuildImageTag("officialchucknorrispage"))
</div>
<div id="logo-container" style="position: relative; width: 100%; height: 100%;">
<div id="logo" style="position: absolute; top: 10%; left: 10%; width: 20%;">
<!-- This will render the image fetched from a remote HTTP URL using Cloudinary -->
@Html.Raw(Cloudinary.Api.UrlImgUp.Signed(true).Secure().Action("fetch").Transform(new Transformation()
.Width(344)
.Height(76)).BuildImageTag("http://cloudinary.com/images/logo.png"))
</div>
</div>
</div>


<h1>Your Photos</h1>


<div class="photos">
@if (Model.Photos.Count == 0)
{
Expand Down
185 changes: 163 additions & 22 deletions samples/PhotoAlbum/Pages/Shared/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,175 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link rel="stylesheet" media="all" href="~/css/site.css" />
<link rel="icon" href="@Cloudinary.Api.UrlImgUp.Action("fetch").Transform(new Transformation().Effect("sepia")).BuildUrl("http://cloudinary.com/favicon.png")" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="~/css/site.css" />


<style>
/* Sidebar styling */
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
}

#sidebar {
height: 100vh;
background-color: #6f42c1; /* Bootstrap purple */
color: white;
padding-top: 20px;
position: fixed;
width: 250px;
top: 0;
left: 0;
}

#sidebar .nav-link {
color: white;
}

#sidebar .nav-link:hover {
background-color: #563d7c;
}

/* Content area adjusts for sidebar */
#content {
margin-left: 250px;
padding: 20px;
}

/* Content Area */
.content {
margin-left: 250px; /* Leave space for the sidebar */
margin-top: 60px; /* Leave space for the navbar */
padding: 20px;
height: calc(100% - 60px); /* Full height minus the navbar */
overflow-y: auto; /* Allow scrolling if content overflows */
background-color: #f8f9fa; /* Light background for content */
}

/* Header Styling */
#header {
position: fixed;
top: 0;
left: 250px; /* Offset for sidebar */
right: 0;
height: 60px;
background-color: #563d7c; /* Darker purple for the header */
color: white;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000; /* Ensure it stays on top */
}

#header a {
color: white;
text-decoration: none;
padding: 0 15px;
}

#header a:hover {
color: #ddd;
}

/* Adjust content for the header */
#main-content {
margin-top: 60px; /* Offset for header */
}

/* Footer Styling */
#footer {
background-color: #6f42c1; /* Matching the sidebar purple */
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
left: 250px; /* Match with sidebar */
}

#footer a {
color: #fff;
text-decoration: none;
}

#footer a:hover {
color: #ddd;
}
</style>
</head>
<body>
<div id="logo">
<!-- This will render the image fetched from a remote HTTP URL using Cloudinary -->
@Html.Raw(Cloudinary.Api.UrlImgUp.Signed(true).Secure().Action("fetch").BuildImageTag("http://cloudinary.com/images/logo.png"))
</div>
<!-- Sidebar Navigation -->
<nav id="sidebar" class="d-flex flex-column" style="height: 100vh;">
<a class="navbar-brand text-center" href="/" style="color: white;">PhotoAlbum</a>

<!-- Navigation Links -->
<ul class="nav flex-column flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-page="Upload">Add photo...</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-page="UploadDirectly" asp-route-type="signed">Add photo (direct upload)...</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-page="UploadDirectly" asp-route-type="unsigned">Add photo (direct unsigned upload)...</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-page="/Contact">Contact</a>
</li>

</ul>

<div id="posterframe">
<!-- This will render the fetched Facebook profile picture using Cloudinary according to the
requested transformations -->
@Html.Raw(Cloudinary.Api.UrlImgUp.Action("facebook").Format("png")
.Transform(new Transformation()
.Width(95)
.Height(95)
.Crop("thumb")
.Gravity("face")
.Effect("sepia")
.Radius(20)
.Chain() // apply current stack of transformations before processing next
.Angle(10))
.BuildImageTag("officialchucknorrispage"))
<!-- Footer Text in Sidebar -->
<div class="text-center mb-3" style="color: white;">
<p>Made with <span style="color: red;">♥</span> by
<a href="https://cloudinary.com" target="_blank" style="color: white; text-decoration: none;">Cloudinary</a>
</p>
</div>
</nav>


@RenderBody()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

<!-- Header Section -->
<header id="header">
<div class="header-left">
<a href="/">PhotoAlbum</a> <!-- Brand/Logo -->
</div>
<div class="header-right">
<a href="/Profile">Profile</a>
<a href="/Notifications">Notifications</a>
<a href="/Settings">Settings</a>
</div>
</header>

<!-- Page Content -->
<!-- Main Content Area -->
<div class="content">
@RenderBody()
</div>

<!-- Optional Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script>
@RenderSection("Scripts", required: false)

<!-- Bootstrap JS and Popper.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"
integrity="sha384-b4gt1jrGC7Jh4AgP3ZR6g6UpYIjB77nSxv8MAB8ftfFx4AJeMlK6Roi58i8oaA"
crossorigin="anonymous"></script>
</body>
</html>
100 changes: 90 additions & 10 deletions samples/PhotoAlbum/Pages/Upload.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,94 @@
ViewData["Title"] = "PhotoAlbum - Upload page";
}

<!-- A standard form for sending the image data to your server -->
<div id="backend_upload">
<h1>Upload through your server</h1>

<form method="Post" enctype="multipart/form-data">
<input id="fileupload" type="file" name="images" multiple accept="image/gif, image/jpeg, image/png">
<input type="submit" value="Upload">
</form>
</div>
<div id="backend_upload" class="container-fluid mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center mb-4">Upload through your server</h1>

<div class="card shadow-sm">
<div class="card-body">
<form method="Post" enctype="multipart/form-data" class="form-group">
<div class="mb-3">
<label for="fileupload" class="form-label">Select Images</label>
<input id="fileupload" type="file" class="form-control" name="images" multiple accept="image/gif, image/jpeg, image/png">
</div>

<div class="d-grid">
<input type="submit" value="Upload" class="btn btn-primary btn-block">
</div>
</form>
</div>
</div>

<div class="text-center mt-4">
<a asp-page="Index" class="btn btn-link">Back to list...</a>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
@Html.Raw(Model.RenderedMarkdown)
</div>
</div>

<!-- Documentation Section -->
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5>Server-side Upload Documentation</h5>
</div>
<div class="card-body">
<p>
<strong>Server-side upload</strong><br />
You can upload images, videos, or any other raw file to Cloudinary from your .NET code.
Uploading is done over HTTPS using a secure protocol based on your product environment's <code>api_key</code> and <code>api_secret</code> parameters.
</p>
<p>
<strong>.NET image upload</strong><br />
The following C# method uploads an image to the cloud:
</p>

<pre><code class="language-csharp">
public ImageUploadResult Upload(ImageUploadParams parameters);
</code></pre>

<a asp-page="Index" class="back_link">Back to list...</a>
<p>
The <code>ImageUploadParams</code> class sets an image to upload with additional parameters
and <code>ImageUploadResult</code> class provides the deserialized server response.
</p>
<p>
For example, uploading a local image file named <strong>'my_image.jpg'</strong>:
</p>

<p><strong>In C#:</strong></p>
<pre><code class="language-csharp">
var uploadParams = new ImageUploadParams()
{
File = new FileDescription('filename.jpg")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
File = new FileDescription('filename.jpg")
File = new FileDescription("filename.jpg")

};
var uploadResult = cloudinary.Upload(uploadParams);
</code></pre>

<p><strong>In VB.NET:</strong></p>
<pre><code class="language-vbnet">
Dim uploadParams = New ImageUploadParams
uploadParams.File = New FileDescription("c:\my_image.jpg")
Dim uploadResult = m_cloudinary.Upload(uploadParams)
</code></pre>

<p>
For a full list of the Upload method parameters, see the
<a href="https://cloudinary.com/documentation/dotnet_image_and_video_upload#server_side_upload" target="_blank">upload method in the Upload API reference</a>.
</p>

<p>
<strong>Note:</strong> If you need to override the default signing mechanism and supply your own signature for the upload,
you can also pass the <code>signature</code> and <code>timestamp</code> parameters.
</p>
</div>
</div>
</div>
</div>
</div>
Loading